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

2024-04-26 13:40:47

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可伸缩面板组件

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

宝塔Linux面板 2.8.9稳定版介绍

暂时只对 CentOS 5.x / 6.x / 7.x 提供支持: 包含软件: Nginx-Tengine-2.2.0 Nginx1.8 - 1.10 Apache2.4.20 PHP5.2 - 7.1(安装时可选,支持多版本共存,除php7.0,php7.1都已包含zendloader) MySQL5.5 - 5.7(安装时可选) Pure-Ftpd phpMyadmin WEB在线面板系统要求: 内存:128M以上,推荐512M以上磁盘:至少4GB可用磁盘空间其它:确保是干净的操作系统
新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板

WDCP也算是国产中颇受大家欢迎的VPS主机面板了,提供了nginx.apache.mysql.php等Web建站环境一键搭建.印象中,国内VPS主机面板也就是WDCP还在坚持着,AMH已经走上了收费的道路(PS:免费版本长年不更新,各种问题和不兼容). 而WDCP实际上也有长达几年的时间没有更新了,mysql.php版本都停留好早以前的版本,新出来的一直都没有更新, 已经不能满足于现在的Wordpress建站需要了,这也是部落为什么要扔掉VPS面板!网站平滑迁移到LNMP或LAMP建站. 好在
jquery滚动条插件jScrollPane的使用介绍

这是一个js的页面滚动条插件使用时引入三个文件:(路径自行填写) 复制代码代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js
Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程

Ajenti是国外一个功能非常强大的轻型的Linux服务器管理面板,采用Python架构,修改扩展非常简单,包含了Apache.计划任务(Cron).文件系统.防火墙.MySQL.Nginx.Munin.Samba.FTP和Squid等多个实用插件,比较适合搭建小型的服务器管理环境. Ajenti V是Ajenti一个虚拟主机管理面板插件,有点类似于Webmin下的Virtualmin,Ajenti V可以用于创建和管理虚拟主机,方便建站,管理网站运维.Ajenti可以添加Widget,方便你快
jQuery EasyUI Panel面板组件使用详解

panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr
宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站

Linux免费开源,建站基本上都是选择Linux系统,而且Linux VPS比Windows VPS要便宜不少,成本大大降低,除非程序有特殊需要,否则还是建议大家使用Linux来当作网站服务器.不过,选择Linux有一个不好的地方就是操作麻烦些. 如果是Linux新手的话,在最开始建站时可以试试使用Linux VPS主机控制面板,只要在你的VPS主机上安装一个主机管理面板,这样你就可以像使用虚拟主机那样去绑定域名和管理MysqL数据库了,而且VPS主机允许你最大化地调整服务器配置参数,折腾过程也
Java常用面板之JScrollPane滚动面板实例详解

在设置界面时,可能会遇到一个较小的容器窗体中显示一个较大部分的内容的情况,这时候可以使用 JScrollPane 面板. JScrollPane 面板是带滚动条的面板,它也是一种容器,但是 JScrollPane 只能放置一个组件,并不可以使用布局管理器.如果需要在 JScrollPane 面板上放置多个组件,需要将多个组件放置在 JPanel 上,然后将 JPanel 面板作为一个整体组件添加在 JScrollPane 组件上.这点大家一定要注意!下面我们通过一个实例来了解下它的使用方法和技巧
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=
jQuery EasyUI之验证框validatebox实例详解

1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方
jQuery Easyui 下拉树组件combotree

jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构. 项目中做角色授权时,需要做一个下拉框带树结构的并且可以多选的组件,就想到了easyui的combotree,有关这个组件的用法废话不多说,直接上代码 $('#bianhao').combotree({ url : urlg2 + '/tbdefaultroll/selectByLevel?belongLevel=' + $('#jibie').comb
JQuery EasyUI的一些常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <
jquery.picsign图片标注组件实例详解

经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle
SSM框架整合JSP中集成easyui前端ui项目开发示例详解

目录前言 EasyUI下载与配置页面美化运行结果总结与问题前言前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j
vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件按钮组件等等,vue三大核心组件路由状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说第一步:构建一个简单的vue项目,老规矩
EasyUI折叠表格层次显示detailview详解及实例

本文目的: 使用easyUi的特殊常用实例,表格层次显示,一层套一层,显示详细数据,嵌套3层应该可以满足所有人的需求了吧.如果你想嵌套4层,有了嵌套3层的案例,4层,5层不是问题吧!!! 本实例的特点: 1.当数据很多的时候,高度不能自动适应,会在表格右侧出现滚动条,想这样嵌套3层的后果,简直不忍直视,本实例高度自适应. 2.选中行后,不能清除选中效果,本实例是可以的. 3.当打开数据展示详情后,再关闭详情页后,不能高度自适应,本实例关闭表格依然自适应. 4.当数据太多,需要出现横向滚动,本实例

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

相关推荐

随机推荐