jQuery 入门教程(28): jQuery UI Datepicker 示例（一）

本是古典 何须时尚 2024-02-17 14:11 129阅读 0赞



jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。

基本用法如下：








1 < !doctype html>







2 <html lang=“en”>







3 <head>







4     <meta charset=“utf-8” />







5     <title>jQuery UI Demos</title>







6     <link rel=“stylesheet” href=“themes/trontastic/jquery-ui.css” />







7     <script src=“scripts/jquery-1.9.1.js”></script>







8     <script src=“scripts/jquery-ui-1.10.1.custom.js”></script>







9 <script>







10     $(function () {







11         $(“#datepicker”).datepicker();







12     });







13   </script>







14 </head>







15 <body>







16   







17 <p>Date: <input type=“text” id=“datepicker” /></p>







18  </body>







19 </html>

只需要给选择的HTML元素调用其构造函数即可。
20130319001

使用动画效果
显示和隐藏DatePicker组件支持配置使用不同的动画效果，下列使用一个列表框来选择DatePicker可以支持的动画效果。








1 <!doctype html>







2 <html lang=“en”>







3 <head>







4     <meta charset=“utf-8” />







5     <title>jQuery UI Demos</title>







6     <link rel=“stylesheet” href=“themes/trontastic/jquery-ui.css” />







7     <script src=“scripts/jquery-1.9.1.js”></script>







8     <script src=“scripts/jquery-ui-1.10.1.custom.js”></script>







9     <script>







10         $(function () {







11             $(“#datepicker”).datepicker();







12             $(“#anim”).change(function () {







13                 $(“#datepicker”).datepicker(“option”,







14                     “showAnim”, $(this).val());







15             });







16         });







17     </script>







18 </head>







19 <body>







20  







21     <p>Date:







22         <input type=“text” id=“datepicker” size=“30” /></p>







23  







24     <p>







25         Animations:<br />







26         <select id=“anim”>







27             <option value=“show”>Show (default)</option>







28             <option value=“slideDown”>Slide down</option>







29             <option value=“fadeIn”>Fade in</option>







30             <option value=“blind”>Blind (UI Effect)</option>







31             <option value=“bounce”>Bounce (UI Effect)</option>







32             <option value=“clip”>Clip (UI Effect)</option>







33             <option value=“drop”>Drop (UI Effect)</option>







34             <option value=“fold”>Fold (UI Effect)</option>







35             <option value=“slide”>Slide (UI Effect)</option>







36             <option value=“”>None</option>







37         </select>







38     </p>







39  







40  







41 </body>







42 </html>

发表评论

表情：
评论列表 （有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读