jQuery Easy UI Accordion(可伸缩的面板)包
生活随笔
收集整理的這篇文章主要介紹了
jQuery Easy UI Accordion(可伸缩的面板)包
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Accordion 可伸縮的面板組件。基于panel,示為以下的比率：
<!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" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><title>Document</title><script>$(function(){$('#ac').accordion({//面板屬性animate:true, //定義展開和折疊的時候是否顯示動畫效果width:600, //面板寬度height:200, //面板高度fit :false, //自適應(yīng)父容器 默認false 在此例中就是瀏覽器。設(shè)置為true面板會鋪滿瀏覽器border:true, //是否顯示邊框multiple:false, //能否夠同一時候展示多個面板1.3.5可用selected:0, //設(shè)置默認展開的順序號//面板操作觸發(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ù)組,即每個單獨面板,能夠應(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ù)能夠是面板編號和面板tatlevar index = $('#ac').accordion('getPanelIndex', selectedPanel);//獲取指定面板在accordion中的索引 ，參數(shù)是某個panel$("#ac").accordion("select",2);//指定被選中的面板 參數(shù)是面板編號或者title$("#ac").accordion("unselect",1);//跟上一個方法相相應(yīng)//加入一個新的面板,為新面板指定屬性$('#ac').accordion('add', {title: '新標題',content: '新內(nèi)容',selected: false});$("#ac").accordion("remove",1)//移除一個面板，參數(shù)是面板編號或者title})</script></head><body> <div id="ac" ><div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;"></div><div title="Title2" iconCls="icon-reload" split:true " style="padding:10px;"></div><div title="Title3" iconCls="icon-edit"></div> </div></body> </html>
點擊這里下載源代碼
版權(quán)聲明：本文博客原創(chuàng)文章，博客，未經(jīng)同意，不得轉(zhuǎn)載。
轉(zhuǎn)載于:https://www.cnblogs.com/mfrbuaa/p/4639229.html
總結(jié)
以上是生活随笔為你收集整理的jQuery Easy UI Accordion(可伸缩的面板)包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux笔记-硬链接和符号链接
- 下一篇： 证明积分