Jquery UI
cdn.bootcss.com
<!-- jquery --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- jquery ui --> <link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
code.jquery.com
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <!-- jquery --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- jquery ui --> <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src=" http://code.jquery.com/ui/1.11.4/jquery-ui.min.js "></script> </head> <body> </body> </html>
Themes: <link href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">black-tie 黑领带 <link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">blitzer 闪电人 <link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">cupertino 苹果 <link href="http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet">dark-hive 黑暗的蜂巢 <link href="http://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css" rel="stylesheet">dot-luv 点爱 <link href="http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css" rel="stylesheet">eggplant 茄子 <link href="http://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css" rel="stylesheet">excite-bike 越野摩托 <link href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">flick 轻弹 <link href="http://code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">hot-sneaks 热时 <link href="http://code.jquery.com/ui/1.11.4/themes/humanity/jquery-ui.css" rel="stylesheet">humanity 人类 <link href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" rel="stylesheet">le-frog 乐蛙 <link href="http://code.jquery.com/ui/1.11.4/themes/mint-choc/jquery-ui.css" rel="stylesheet">mint-choc 薄荷巧克力 <link href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet">overcast 阴 <link href="http://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet">pepper-grinder 胡椒研磨器 <link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet">redmond 雷蒙德 <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">smoothness 平滑 <link href="http://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css" rel="stylesheet">south-street 南大街 <link href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" rel="stylesheet">start 开始 <link href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" rel="stylesheet">sunny 阳光 <link href="http://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css" rel="stylesheet">swanky-purse 时髦的钱包 <link href="http://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet">trontastic 前.. <link href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">ui-darkness UI-黑暗 <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">ui-lightness UI-光亮 <link href="http://code.jquery.com/ui/1.11.4/themes/vader/jquery-ui.css" rel="stylesheet">vader 维达
自动完成：
<script> $(function() { var availableTags=["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"]; //var availableTags=["北京","上海","南京","广东","广西","山东","山西","湖南","湖北","河南","河北","江西"]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"> </div>
折叠面板：
<script> $(function() { $( "#accordion" ).accordion(); }); </script> <div id="accordion"> <h3>部分 1</h3> <div> <p>啊啊啊</p> </div> <h3>部分 2</h3> <div> <p>啊啊啊</p> </div> <h3>部分 3</h3> <div> <p> 啊啊啊 </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>啊啊啊</p> <p>啊啊啊</p> </div> </div>
缩放：
<style> #resizable{width:150px;height:150px;padding:0.5em;} #resizableh3{text-align:center;margin:0;} </style> <script> $(function() { $( "#resizable" ).resizable(); }); </script> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">缩放（Resizable）</h3> </div>
排序：
<style> #sortable{list-style-type:none;margin:0;padding:0;width:60%;} #sortable li{ margin:0 3px 3px 3px;padding:0.4em 0.4em 0.4em 1.5em;font-size:1.4em;height:18px;} #sortable li span {position: absolute;margin-left: -1.3em;} </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul>
拖动-放置：
<style> #draggable{width:100px;height:100px;padding:0.5em;float:left;margin: 10px 10px 10px 0; } #droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;} </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).html( "Dropped!" ); } }); }); </script> <div id="draggable" class="ui-widget-content">请把我拖拽到目标处！</div> <div id="droppable" class="ui-widget-header">请放置在这里！</div>
拖动：
<style> #draggable{width:150px;height:150px;padding:0.5em;} </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> <div id="draggable" class="ui-widget-content">请拖动我</div>
特效：
blind 盲
bounce 反弹
clip 夹
drop 滴
explode 爆炸（炸成9块）
fade 褪色
fold 折叠
highlight 突出
puff 泡芙
pulsate 脉动
scale 规模
shake 摇
size 大小
slide 幻灯片(从左到右出来)
transfer 转移
<script> $("#toggle").click(function() { $( "#toggle" ).toggle( "explode" ); }); </script> <style> #toggle{width:300px;height:300px;background:#ccc;} </style> <div id="toggle">点这里</div>
待补充