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


Posted in Javascript onFebruary 28, 2017

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>

效果图:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 #Javascript
简单实现AngularJS轮播图效果
Apr 10 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
session 的生命周期是多长
2006/10/09 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
javascript实现留言板功能
2020/02/08 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Python多线程原理与用法详解
2018/08/20 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
作风转变心得体会
2014/09/02 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript