首先配置好easyui环境

1.ACCORDION(手风琴)

class:class=easyui-accordion,
事件:
查找:
  function selectPanel(){ //会弹出输入框 s为自动获取输入的值
    $.messager.prompt('Prompt','Please enter the panel title:',function(s){
    if (s){
      $('#aa').accordion('select',s); //#aa要操作的大容器
      }
    });
  }
添加:
  var idx = 1;
  function addPanel(){
    $('#aa').accordion('add',{ //#aa要操作的大容器
    title:'Title'+idx,
    content:'<div style="padding:10px">Content'+idx+'</div>' //content添加的内容,title标题
    });
    idx++;
  }
删除:
  function removePanel(){
    var pp = $('#aa').accordion('getSelected'); //pp获取当前选中对象
    if (pp){
      var index = $('#aa').accordion('getPanelIndex',pp); //index获取当前选中对象的索引
      $('#aa').accordion('remove',index);
    }
  }
Ajax嵌套页面:data-options="href:'ajax.html'" //ajax.html页面路径

树状图:

    <ul class="easyui-tree">
      这里面写ul---li
    </ul>
内部 data-options="collapsed:false" //防止折叠

2.例子:

<div style="margin:20px 0 10px 0;">
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
</div>
<div id="aa" data-options="multiple:true" class="easyui-accordion" style="width:500px;height:500px;"><!--data-options="multiple:true"启用多个面板-->

  <div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;"><!--collapsed:false不可折叠-->
    <input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
  </div>
  <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
    <h3 style="color:#0099FF;">Accordion for jQuery</h3>
    <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
  </div>
  <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" >
    <h3>Accordion for jQuery>sd</h3>
    <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
     <div>

     </div>
  </div>
  <div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
  </div>
  <div title="树">
    <ul class="easyui-tree">
      <li>
        <ul>
          <li>666</li>
        </ul>
      </li>
      <li>132</li>
      <li>132</li>
    </ul>
  </div>
  <div title="数据" data-options="
    selected:true,
    tools:[{
    iconCls:'icon-reload',
    handler:function(){
      $('#dg').datagrid('reload');
    }
  }]">
  <table id="dg" class="easyui-datagrid"
    data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
    <thead>
      <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100">Product ID</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
        <th data-options="field:'attr1',width:150">Attribute</th>
        <th data-options="field:'status',width:50,align:'center'">Status</th>
      </tr>
    </thead>
   </table>
  </div>

</div>

<script type="text/javascript">
function selectPanel(){
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
if (s){
$('#aa').accordion('select',s);
}
});
}
var idx = 1;
function addPanel(){
$('#aa').accordion('add',{
title:'Title'+idx,
content:'<div style="padding:10px">Content'+idx+'</div>'
});
idx++;
}
function removePanel(){
var pp = $('#aa').accordion('getSelected');
if (pp){
var index = $('#aa').accordion('getPanelIndex',pp);
$('#aa').accordion('remove',index);
}
}
</script>

启用可多个面板:data-options="multiple:true"

效果图:

  

easyui---accordion(手风琴)的更多相关文章

  1. easyui accordion—手风琴格子始终展开和多个格子展开

    来源:http://www.cnblogs.com/tylerdonet/p/3531844.html 始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html ...

  2. EasyUI Accordion下的Panel面板初始化时全部折叠

    EasyUI Accordion下的Panel面板有一个属性:selected,默认值为:false.初始化时,若设置'selected:true',则面板默认打开,效果如下: <div tit ...

  3. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  4. easyui学习笔记6—基本的Accordion(手风琴)

    手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置. 1.先看看引用的资源 <meta charset="UTF-8" ...

  5. Accordion - 手风琴

    //手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...

  6. Jquery UI accordion手风琴菜单

    最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...

  7. jquery easyui Accordion的使用

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  8. 使用jQuery开发accordion手风琴插件

    一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航

    系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示 先来看原来的效果 改变后的效果,当然我已经做好了 ...

  10. EasyUI配置和组件

    首先在webcontent添加配置文件 新建静态或动态网站,在title的下面加入五个配置文件路径,注意:循序不能乱 <!-- 顺序不可以乱 --> <!-- 1.jQuery的js ...

随机推荐

  1. Spring Boot2.0之热部署原理

    所谓的热部署:比如项目的热部署,就是在应用程序在不停止的情况下,实现新的部署 原理: 实用类加载器(classloader重新读取字节码文件到jvm内存) 如何纯手写一个热部署功能: 1.监听 cla ...

  2. 城市旅游ppt模板

    城市旅游ppt模板,城市,旅游,旅行,休闲. 下载:http://www.huiyi8.com/lvyoumuban/ppt/

  3. Oracle学习笔记_05_ 一个创建表空间、创建用户、授权的完整过程

    一.完整命令 su - oracle sqlplus /nolog conn /as sysdba create tablespace scaninvoice logging datafile '/u ...

  4. codeforces 609D D. Gadgets for dollars and pounds(二分+贪心)

    题目链接: D. Gadgets for dollars and pounds time limit per test 2 seconds memory limit per test 256 mega ...

  5. PS 滤镜— —扇形warp

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  6. Qt之log数据展示模块简要实现

    Log模块主要用于实时测井数据的显示和测后曲线数据的预览和打印,为更好的展示对Qt中相关知识点的应用,特以Log模块为例对其进行简要实现. 内容导图: 一.功能需求 1.界面效果图 Log模块实现曲线 ...

  7. liunx命令之:命令链接ftp服务器

    1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密码 ...

  8. ScikitLearn 学习器类型

    源自在线课程的学习:http://www.studyai.com/course/detail/d086826e9be84b818f9c54893633663d

  9. android TextView selector点击样式改变

    1.selector 从单词的意思来说:选择器,就是对你的目标的控制.selector主要是用在ListView的item单击样式和TextView和Button的点击样式. 2.主要属性介绍: an ...

  10. thinkpad取消fn键功能

    转自:https://bbs.thinkpad.com/thread-1834235-1-1.html 1就是一直觉得fn建自动开启很烦人,于是百度后得到 我们可以 控制面板 -- 键盘--think ...