// index.html <head> <script src="jquery-3.2.1.min.js"></script> //必須第一個被引入,由於 UI 依賴 jquery 庫 <script src="jquery-ui.min.js"></script> <script src="app.js"></script> <link text="text/css" href="jquery-ui.min.css" rel="stylesheet"/> </head> <body> <a href="#" id="btn">點擊這裏</a> <div style="width:100px;height:100px;border:2px solid #FF0000" id="div1"></div> <div style="width:300px;height:300px;border:2px solid #FF0000" id="div2"></div> <ul id="st"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>山竹</li> </ul> </body> // app.js $(document).ready(function(){ // 按鈕效果 $("#btn").button(); // div 拖動效果 $("#div1").draggable(); // div 裏面能放 div $("#div2").droppable(); // div 尺寸能夠任意改變 $("#div1").resizable(); // 能夠對列表中的兩個值經過鼠標拖動,互換位置 $("#st").sortable(); })
accordion()
:可摺疊顯示;autocoplete()
: 自動補全;datepicker()
: 日期選擇;dialog()
:對話框;progressbar()
: 進度條;menu()
:菜單;slider()
:可拖動進度條;spinner()
:下拉列表;tabs()
參考資料css