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

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

时间: 2017-02-25

宝塔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 EasyUI Panel面板组件使用详解

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

Java常用面板之JScrollPane滚动面板实例详解

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

宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站

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

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,方便你快

LuManager Linux/Unix服务器管理面板推荐之国产面板

国外VPS 大多数是 Linux /Unix平台,Linux/Unix平台的优点也很多,重点是它还是免费的,(用过美国VPS 的朋友都知道国外IDC 装Windows是需要版权费的)国内大型网站几乎都是用Linux/Unix平台.其优点是负载性能强,安全性稳定性比Windows Server 2003/2008 要高很多.一般一台VPS 或服务器 半年不重启是很常见的.但Linux/Unix系统通常是很难使用的,那些烦琐而难记的命令很多新手朋友无法入手,服务器一般都不装桌面系统,操作没有wind

BT宝塔Linux服务器管理助手架设VPS面板(安装及初始设置应用)

老左初次看到宝塔服务器管理助手软件的信息应该是上周在小夜博客那边看到广告的,从这款软件介绍应该是在这两年逐步在更新.升级,目前拥有Linux和Windows环境版本,其中我们大部分用户需要的Linux系统版本处于内侧版本,但是功能对于普通的建站需求应该是比较齐全的. 从用户需求角度看,目前国内的Linux服务器管理面板虽然大大小小有很多个,但是要么是开始付费,要么版本过老很久不更新,包括老左在之前有介绍的AppNode面板也是收费版本,但是BT宝塔面板是免费的,虽然目前处于测试版本,我还是准备体

免费常用Linux VPS管理面板/一键包介绍和安装方法

我们选择VPS.服务器主机一般会用来搭建网站使用的,既然要搭建网站那肯定需要安装网站环境.这一点与我们常用的虚拟主机不同,虚拟主机一般商家都提供cPanel或者DA面板直接添加站点建站使用,而VPS则需要我们自己安装Linux VPS管理面板(Windows系统则安装对应的)或者采用一键包编译安装. 在这篇文章中,麦子是准备收集国内.国外VPS管理面板的,如果真要每个都收集至少可以找到几十个,但是我们常用的也就这么几个.对于我们用户而言,熟悉1-2个也足以,毕竟我们是要实现环境,并不是深入研究,

linux安装全中文管理面板教程(php+mysql)

本教程适用电信通和息壤的云主机 1.查看数据盘 在没有分区和格式化数据盘之前,使用 "df –h"命令,是无法看到数据盘的,可以使用"fdisk -l"命令查看 将未使用的磁盘进行格式化,操作数据盘符前,请自行确认磁盘是否有使用过,如有重要数据请谨慎操作,以免导致数据丢失,带来不必要的麻烦.具体格式化命令为: mkfs.ext3 /dev/vdb ,即为正在格式化中.这个时候请耐心等待格式化完毕(时间较久). 将格式化完的磁盘进行挂载,挂载前,先在服务器上创建一个需

linux主机AMH管理面板安装教程及建站使用方法(图文)

(AMH为独立的一套LNMP/Nginx虚拟主机面板,安装请使用纯净系统.不要安装其它的环境包.) (需要使用AMH,请先检查你的系统是否支持,AMH面板已支持Centos.Debian.Ubuntu所有的系统版本环境中安装.) 首先进行AMH管理面板的安装 第一步: 登陆你的linux服务器.登陆成功后可以看到如下界面. 第二步: 执行安装脚本,命令如下: wget http://amysql.com/file/AMH/4.2/amh.sh; chmod 775 amh.sh; ./amh.s

基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面. Bootstrap Metro Dashboard介绍  Bootstrap Metro Dashboard使用了以下jQuery插件:  fullcalendar.min.js jquery.chosen.min.js jquery

云服务器宝塔面板的安装图文教程详解

0x01.安装宝塔面板 宝塔面板是一个非常简单易用的服务器运维面板,可视化面板,减弱了新手在应对命令式操作Linux服务器时的恐惧感.在安装该面板后,不需要再在服务器上用命令行手动安装.配置Nginx 服务器这些必须的环境配置软件,只需要一键即可完成环境配置.软件安装,对新手以及想快速开发的人员特别友好! 系统要求(来自官方) 内存:512M以上,推荐768M以上(纯面板约占系统的60M内存) 硬盘:100M以上可用的硬盘空间(纯面板占约20M的磁盘空间) 系统:CentOS 7.1+(Ubun

Redis教程(十二):服务器管理命令总结

一.概述: Redis在设计之初就被定义为长时间不间断运行的服务进程,因此大多数系统配置参数都可以在不重新启动进程的情况下立即生效.即便是将当前的持久化模式从AOF切换到RDB也无需重启.     在Redis中,提供了一组和服务器管理相关的命令,其中就包含和参数设置有关的CONFIG SET/GET command. 二.相关命令列表: 命令原型 时间复杂度 命令描述 返回值 CONFIGGETparameter    主要用于读取服务器的运行时参数,但是并不是所有的配置参数都可以通过该命令进