//手风琴效果
<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. MediaBrowserService 音乐播放项目

    MediaBrowserService 音乐播放项目,本项目主要有如下功能: (1):支持播放在线音乐 (2):按住home键退出页面后显示通知栏部分播放提示,  (3) : 支持切换上下首歌曲 本项 ...

  2. 三张图片详解Asp.Net 全生命周期

    用三张图片详解Asp.Net 全生命周期 下面我们使用三张图片解析ASP.net的整个生命周期,我总感觉使用图片更加的清楚的说明这种问题,所以使用的这样方式 说明: 1  第一张图片从全局说明从客户端 ...

  3. libpng安装与配置(Win7+VS2010)

    一.下载 libpng:http://libmng.com/pub/png/libpng.html zlib:http://www.zlib.net/ IDE:VS2010 二.编译 将下载的两个zi ...

  4. iOS开发:开发证书知识点总结

    1. Error: An App ID with identifier "*" is not avaliable. Please enter a different string. ...

  5. java 缓冲

    缓存主要可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map ...

  6. 使用id名称和name直接获取元素

    我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...

  7. js面向对象编程:if中可以使用那些作为判断条件呢?

    作者来源http://www.2cto.com/kf/201407/314978.html搬运 在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何 ...

  8. 利用命令行将项目传到github上的简单操作

    (1)安装git后,打开cmd,进入要上传的文件夹中: (2)输入git init初始化本地git仓库: (3)git add .将所有文件提交到暂存区: (4)git commit -m'说明文字' ...

  9. java.lang.OutOfMemoryError: Java heap space的解决方法

    windows->preferences->Java->Installed JRES->edit->Default VM Arguments添加-Xms256m -Xmx ...

  10. 去空格 whitespaceAndNewlineCharacterSet和过滤字符串

    一.过滤字符串 可以使用stringByTrimmingCharactersInSet函数过滤字符串中的特殊符号 首先自己定义一个NSCharacterSet, 包含需要去除的特殊符号 NSChara ...