//手风琴效果
<div style="overflow:hidden;height:400px;width:948px;">
<div class="J_TWidget" data-widget-config="{&quot;triggerType&quot;:&quot;mouse&quot;,&quot;autoplay&quot;:true,&quot;triggerCls&quot;:&quot;pan_trg&quot;,&quot;panelCls&quot;:&quot;pan_content&quot;,&quot;multiple&quot;:false,&quot;hasTriggers&quot;:true}" data-widget-type="Accordion">
<div style="height:400px;float:left;margin-left:0px;width:950px;">
<div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#0088FF;">
<span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span>
</div>
<div class="pan_content" style="overflow:hidden;height:400px;float:left;display:block;width:830px;">
<a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
</div>
<div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#FF8000;"> <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span> </div>
<div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
<a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
</div>
<div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#008000;"> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </div>
<div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
<a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
</div>
<div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#606060;"> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </div>
<div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
<a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
</div>
</div>
</div>
</div> triggerCls 自定义值 主列表的class值
panelCls 自定义值 列表所对应的内容列表的class值
triggerType mouse/click (默认值:click) 触发方式——
mouse:鼠标经过触发
click:鼠标点击触发 multiple true/false (默认值:false) 是否同时支持多面板展开
hasTriggers true/false (默认值:true) 是否设置触发点

Accordion - 手风琴的更多相关文章

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

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

  2. Jquery UI accordion手风琴菜单

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

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

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

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

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

  5. AngularJs的UI组件ui-Bootstrap分享(三)——Accordion

    Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...

  6. 7.Layout布局(tabs、accordion、layout)

    一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...

  7. easyui---accordion(手风琴)

    首先配置好easyui环境 1.ACCORDION(手风琴) class:class=easyui-accordion, 事件: 查找: function selectPanel(){ //会弹出输入 ...

  8. EasyUI配置和组件

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

  9. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. 8 TIPS TO BECOME A MICROSOFT TECHNICAL EVANGELIST

    8 TIPS TO BECOME A MICROSOFT TECHNICAL EVANGELIST By Thomas Lewis February, 28 2012 I have had a pai ...

  2. UVa 1354 天平难题 Mobile Computing

    整个题考虑起来 最主要要计算的状态 是树的状态 于是要计算出所有可能挂坠可能组成的树的所有形态 tree 用于保存这些状态 考虑不要重复计算,有一个vis 数组 预处理可以先计算出一棵树的重量,简化计 ...

  3. transform初学习

    1.什么是transform? transform主要用于形变,位移和旋转,可用于动画. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: jus ...

  4. 通过dataGridView控件中的checkBox控件对数据库进行批量删除

    string id_s = ""; ; i < dataGridView1.Rows.Count; i++) //遍历所有行 { if (dataGridView1.Rows ...

  5. tcp/ip http socket笔记

    1.TCP/IP协议是传输层协议,主要解决数据如何在网络中传输 HTTP是应用层协议,主要解决如何包装数据 2.TCP连接的三次握手 第一次握手:客户端发送syn包到服务器,并进入SYN_SEND状态 ...

  6. 写出易调试的SQL—西科软件

    1.前言 上篇 写出易调试的SQL , 带来了一些讨论, 暴露了不能重用执行计划和sql注入问题, 十分感谢园友们的建议 . 经过调整后 ,将原来的SQLHelper 抓SQL 用做调试环境用, 发布 ...

  7. vs快捷方式

    项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添加 ...

  8. ANDROID调用webservice带soapheader验证

    最近的一个项目中调用webservice接口,需要验证soapheader,现将解决方法记录如下:(网上资料出处太多,就不做引用,原作者如看到,如有必要添加请通知) 1.先看接口 POST /webs ...

  9. (转载)python2+selenium自动化测试系列(二)

    16.Selenium2+python自动化16-alert\confirm\prompt 17.Selenium2+python自动化17-JS处理滚动条 18.Selenium2+python自动 ...

  10. 数据库事务中的隔离级别和锁+spring Transactional注解

    数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...