Accordion 可伸縮面板組件,基于panel,示例如下:
創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為周至企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站,周至網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <title>Document</title> <script> $(function(){ $('#ac').accordion({ //面板屬性 animate:true, //定義展開和折疊的時候是否顯示動畫效果 width:600, //面板寬度 height:200, //面板高度 fit :false, //自適應(yīng)父容器 默認(rèn)false 在此例中就是瀏覽器,設(shè)置為true面板會鋪滿瀏覽器 border:true, //是否顯示邊框 multiple:false, //是否可以同時展示多個面板1.3.5可用 selected:0, //設(shè)置默認(rèn)展開的順序號 //面板操作觸發(fā)事件 //面板被選中時觸發(fā)事件 onSelect:function(title,index){ //alert(title+':'+index) } //onUnselect //onAdd //onBeforeRemove //onRemove //組件的方法 }); /**下面是accordion組件提供的一系列可調(diào)用的方法*/ //alert($("ac").accordion("options").width)//獲取組件對象的某個屬性 var panels = $("#ac").accordion("panels");//返回的是panel數(shù)組,即每一個單獨(dú)面板,可以應(yīng)用panel的屬性 //alert(panels[0].panel('options').width); $("#ac").accordion("resize"); //調(diào)整面板大小 var selectedPanel=$("#ac").accordion("getSelected");//獲取選中的面板 var selectedPanels=$("#ac").accordion("getSelections");//獲取所有選中的面板 var panel=$("#ac").accordion("getPanel",2);//獲取指定的面板,參數(shù)可以是面板編號和面板tatle var index = $('#ac').accordion('getPanelIndex', selectedPanel);//獲取指定面板在accordion中的索引 ,參數(shù)是某個panel $("#ac").accordion("select",2);//指定被選中的面板 參數(shù)是面板編號或者title $("#ac").accordion("unselect",1);//跟上一個方法相對應(yīng) //添加一個新的面板,為新面板指定屬性 $('#ac').accordion('add', { title: '新標(biāo)題', content: '新內(nèi)容', selected: false }); $("#ac").accordion("remove",1)//移除一個面板,參數(shù)是面板編號或者title }) </script> </head> <body> <div id="ac" > <div title="Title1" iconCls="icon-save" > </div> <div title="Title2" iconCls="icon-reload" split:true " > </div> <div title="Title3" iconCls="icon-edit"> </div> </div> </body> </html>
效果圖:
點(diǎn)此下載源代碼:Accordion可伸縮面板組件
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目:jQueryEasyUIAccordion可伸縮面板組件使用詳解
網(wǎng)頁URL:http://muchs.cn/article30/jpihso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、用戶體驗(yàn)、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)