jQuery EasyUI Accordion可伸缩面板组件使用详解

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, //定义展开和折叠的时候是否显示动画效果 
    width:600,  //面板宽度 
    height:200,  //面板高度 
    fit :false,  //自适应父容器 默认false 在此例中就是浏览器，设置为true面板会铺满浏览器 
    border:true, //是否显示边框 
    multiple:false, //是否可以同时展示多个面板1.3.5可用 
    selected:0,  //设置默认展开的顺序号 
 
    //面板操作触发事件 
     
    //面板被选中时触发事件 
    onSelect:function(title,index){ 
     //alert(title+':'+index) 
    } 
    //onUnselect 
    //onAdd 
    //onBeforeRemove 
    //onRemove 
 
    //组件的方法 
 
 
   }); 
 
   /**下面是accordion组件提供的一系列可调用的方法*/ 
   //alert($("ac").accordion("options").width)//获取组件对象的某个属性 
   var panels = $("#ac").accordion("panels");//返回的是panel数组,即每一个单独面板,可以应用panel的属性 
   //alert(panels[0].panel('options').width); 
   $("#ac").accordion("resize"); //调整面板大小 
   var selectedPanel=$("#ac").accordion("getSelected");//获取选中的面板 
   var selectedPanels=$("#ac").accordion("getSelections");//获取所有选中的面板 
   var panel=$("#ac").accordion("getPanel",2);//获取指定的面板，参数可以是面板编号和面板tatle 
    
    
   var index = $('#ac').accordion('getPanelIndex', selectedPanel);//获取指定面板在accordion中的索引 ，参数是某个panel 
 
   $("#ac").accordion("select",2);//指定被选中的面板 参数是面板编号或者title 
   $("#ac").accordion("unselect",1);//跟上一个方法相对应 
    
   //添加一个新的面板,为新面板指定属性 
   $('#ac').accordion('add', { 
    title: '新标题', 
    content: '新内容', 
    selected: false 
   }); 
    
   $("#ac").accordion("remove",1)//移除一个面板，参数是面板编号或者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>

效果图：

点此下载源代码：Accordion可伸缩面板组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery # EasyUI # Accordion # 伸缩面板 # jquery滚动条插件jScrollPane的使用介绍 # Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程 # 新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板 # 宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站 # 宝塔Linux面板 2.8.9稳定版介绍 # jQuery EasyUI Panel面板组件使用详解 # Java常用面板之JScrollPane滚动面板实例详解 # 的是 # 多个 # 点此 # 设置为 # 相对应 # 源代码 # 大家多多 # 移除 # 自适应 # 铺满 # 此例 # themes # href # bootstrap # stylesheet # external # link # zh_CN # rel # css

返回目录在线咨询

上一篇：租用一台网站服务器每月需要多少钱？如何选择合适的方案？
下一篇：网站制作素材边框图片,视频相框怎么弄？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery EasyUI Accordion可伸缩面板组件使用详解

您的项目需求