強大的jQuery UI——學習手風琴效果
阿新 • • 發佈：2019-01-03
今天初次體驗了一把jQuery UI，深刻體會到了它的強大之處，以下程式碼是實現手風琴的效果，需要引入相應的js類庫，大家可去官網下載UI外掛http://jquery.com/，為了方便，我將jquery-1.7.1.min.js、jquery-ui-1.8.18.custom.min.jsjquery-ui-1.8.18.custom.css引入進來，並實現了其效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手風琴效果</title> <!--引入jquery類庫--> <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> <script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script> <!--引入Css樣式類庫檔案--> <link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" /> <script language="javascript" type="text/javascript"> $(function (){ $("#accordion").accordion({ header:"h3", //頭資訊 h3 必須是h3 頁面中div中是什麼 這裡必須是什麼 event:"click", //面板展開的事件效果 預設是click效果 active:2, //預設展開的面板 從0開始 預設值0 animated:"bounceslide", //面板展開的動畫效果 autoHeight:true, //面板的高度 是否是自動 增高的 fillSpace:true, //填充到父元素 icons:{ //圖示的設定 header預設時的效果 headerSelected代表面板啟用狀態時的圖示 header:"ui-icon-carat-2-e-w", headerSelected:"ui-icon-carat-2-n-s" } }).sortable({ //排序 axis:"y", //只能在y軸上拖拽排序 x軸 x,y預設 x,y handle:"h3", //只能拖拽h3 /* stop:function (event,ui){ //stop事件 匿名函式 event 瀏覽器自帶的事件處理物件 ui操作控制元件物件 //ui item help等 ui.item.children("h3").triggerHandler("focusout"); }*/ }); //通過繫結的操作方式 寫事件處理 $("#accordion").bind("sortstop",function (event,ui){ //alert("這種方式也可以"); }); }); </script> </head> <body> <!-- jQuery UI 使用 前提 第一步：引入別人的類庫 js類庫 css樣式類庫檔案 第二步：模擬實現 --> <div id="accordion" style="width:500px; height:600px; border:1px #0CC solid;"> <div> <h3><a href="#">First</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href="#">Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> </body> </html>
效果圖：
