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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
JS二分查找算法详解
Nov 01 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP类的反射用法实例
2014/11/03 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python基于socket实现网络广播的方法
2015/04/29 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
谈谈python中GUI的选择
2018/03/01 Python
python 产生token及token验证的方法
2018/12/26 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
详解Python 最短匹配模式
2020/07/29 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
高中生评语大全
2014/04/25 职场文书
主题教育活动总结
2014/05/05 职场文书
公司经理任命书
2014/06/05 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
婚姻出轨保证书
2015/05/08 职场文书
新郎接新娘保证书
2015/05/08 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python