//手风琴效果
<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. win8.1 64位安装DEV C++

    1.首先下载64位版本的DEV C++ http://sourceforge.net/projects/orwelldevcpp/files/Setup%20Releases/ 2.采取默认安装即可, ...

  2. ARCGIS Server 发布服务时出现的问题解决

    target='CFH.ConfigurationFactoryHost'  machine='IBM3850X5'  thread='24072'  elapsed='0.31200'>Ser ...

  3. Linux课程实践二:编译模块实现内核数据操控

    一.内核模块原理 1. Linux内核增加功能 Linux内核整体结构很庞大,包含了很多的组件,现在有两种方法将需要的功能包含进内核当中: - 静态加载:将所有的功能都编译进Linux内核. - 动态 ...

  4. 关于tesseract-ocr3的训练和使用

    众所周知,这是一个出色的字符识别软件.这个开源项目可以在http://code.google.com/p/tesseract-ocr/downloads/list下载. 在使用时,建议使用3而不要使用 ...

  5. python中的时间转换

    Python中的时间相关库有: datetime 和time. 主要形式有: datetime timestamp 相互转换: timestamp->datetime: dt = datetim ...

  6. ios xib或storyBoard的那些小方法

    今天看了一下xib里的一些小技巧,但是百度一搜的话,网上已经有人写过教程了,在这里我也就懒一下,不写那么详细了,就写一些如何百度的方法! 1."通过KVC修改占位文字的颜色" [t ...

  7. 做webapp静态页面的一些积累

    ​1)根据pad,手机不同的版本的屏幕大小设置字体的大小(可以使用此方式根据屏幕的不同进行设置,由于我左边的图片是设置的float='left',使用的是img标签的百分比来显示图片) (使用此方式, ...

  8. python集合(set)操作

    python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...

  9. Java(数组)动手动脑

    1>数组作为方法参数 阅读并运行示例PassArray.java,观察并分析程序输出的结果,小结,然后与下页幻灯片所讲的内容进行对照. 源代码: // PassArray.java // Pas ...

  10. VS2010+C#+在新建类或接口时在文件开头自动生成作者和日期等备注

    今天在公司项目准备开始,为达到项目的规范管理,要求每个文件的标准日期,作者等信息,搜集了百度的资料,新建文件时效果如下: 其实原理很简单,只要修改VS,IDE文件下的类(或接口)模版代码 文件路径:C ...