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库与其他JS库冲突的解决办法
Feb 07 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
Node.js实现数据推送
Apr 14 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python编程实现希尔排序
2017/04/13 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python中class的定义及使用教程
2019/09/18 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
请假条标准格式规范
2014/04/10 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015年测量员工作总结
2015/05/23 职场文书
如何写好开幕词?
2019/06/24 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js