实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
    <meta charset="utf-8">
5
    <title>jQuery UI 日期选择器（Datepicker） - 动画</title>
6
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
7
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
8
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
9
    <link rel="stylesheet" href="jqueryui/style.css">
10
    <script>
11
    $(function() {
12
        $( "#datepicker" ).datepicker();
13
        $( "#anim" ).change(function() {
14
            $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
15
        });
16
    });
17
    </script>
18
</head>
19
<body>
20
​
21
<p>日期：<input type="text" id="datepicker" size="30"></p>
22
​
23
<p>动画：<br>
24
    <select id="anim">
25
        <option value="show">Show (默认)</option>
26
        <option value="slideDown">滑下</option>
27
        <option value="fadeIn">淡入</option>
28
        <option value="blind">Blind (UI 百叶窗特效)</option>
29
        <option value="bounce">Bounce (UI 反弹特效)</option>
30
        <option value="clip">Clip (UI 剪辑特效)</option>
31
        <option value="drop">Drop (UI 降落特效)</option>
32
        <option value="fold">Fold (UI 折叠特效)</option>
33
        <option value="slide">Slide (UI 滑动特效)</option>
34
        <option value="">无</option>
35
    </select>
36
</p>
37
​
38
​
39
</body>
40
</html>