欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery EasyUI Accordion可伸縮面板組件使用詳解

 更新時(shí)間：2017年02月28日 16:01:28   作者：hai_cheng001  
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Accordion可伸縮面板組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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" 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, //定義展開和折疊的時(shí)候是否顯示動(dòng)畫效果 
    width:600,  //面板寬度 
    height:200,  //面板高度 
    fit :false,  //自適應(yīng)父容器 默認(rèn)false 在此例中就是瀏覽器，設(shè)置為true面板會(huì)鋪滿瀏覽器 
    border:true, //是否顯示邊框 
    multiple:false, //是否可以同時(shí)展示多個(gè)面板1.3.5可用 
    selected:0,  //設(shè)置默認(rèn)展開的順序號 
 
    //面板操作觸發(fā)事件 
     
    //面板被選中時(shí)觸發(fā)事件 
    onSelect:function(title,index){ 
     //alert(title+':'+index) 
    } 
    //onUnselect 
    //onAdd 
    //onBeforeRemove 
    //onRemove 
 
    //組件的方法 
 
 
   }); 
 
   /**下面是accordion組件提供的一系列可調(diào)用的方法*/ 
   //alert($("ac").accordion("options").width)//獲取組件對象的某個(gè)屬性 
   var panels = $("#ac").accordion("panels");//返回的是panel數(shù)組,即每一個(gè)單獨(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ù)是某個(gè)panel 
 
   $("#ac").accordion("select",2);//指定被選中的面板 參數(shù)是面板編號或者title 
   $("#ac").accordion("unselect",1);//跟上一個(gè)方法相對應(yīng) 
    
   //添加一個(gè)新的面板,為新面板指定屬性 
   $('#ac').accordion('add', { 
    title: '新標(biāo)題', 
    content: '新內(nèi)容', 
    selected: false 
   }); 
    
   $("#ac").accordion("remove",1)//移除一個(gè)面板，參數(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>

效果圖：

點(diǎn)此下載源代碼：Accordion可伸縮面板組件

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox

    javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox

    jQuery的表格懸停變色 恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
    2008-08-08
  • Jquery中給animation加更多的運(yùn)作效果實(shí)例

    Jquery中給animation加更多的運(yùn)作效果實(shí)例

    這篇文章介紹了Jquery中給animation加更多的運(yùn)作效果實(shí)例，有需要的朋友可以參考一下
    2013-09-09
  • jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果

    jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果

    在之前做項(xiàng)目的時(shí)候經(jīng)常會(huì)在主頁面上點(diǎn)擊某個(gè)按鈕，右側(cè)彈出一個(gè)div輸出對應(yīng)內(nèi)容的詳細(xì)信息，怎么實(shí)現(xiàn)的呢，今天小編給大家分享通過jquery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果，感興趣的朋友一起看看吧
    2016-10-10
  • 事件委托與阻止冒泡阻止其父元素事件觸發(fā)

    事件委托與阻止冒泡阻止其父元素事件觸發(fā)

    當(dāng)點(diǎn)擊具體的li元素時(shí)，發(fā)現(xiàn)ul的事件也被觸發(fā)了，這是我們不想看到的，解決方法就是加一句阻止冒泡即可
    2014-09-09

    • 最新評論