//手风琴效果

<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. TSkinData 皮肤控件后最大最小提示英文Close的解决方法

    1.D:\soft\控件\VclSkin5.40-D7-D2010 New\source 控件安装位置 2.WinSkinForm.pas 查找Close 3.function TWinSkinFor ...

  2. RTTI 运行时类型识别 及异常处理

    RTTI   运行时类型识别 typeid  ------  dynamic_cast dynamic_cast 注意事项: 1.只能应用于指针和引用之间的转化 2.要转换的类型中必须包含虚函数 3. ...

  3. DB2 runstats、reorgchk、reorg 命令

    runstats.reorgchk.reorg 1.runstats runsats可以搜集表的信息,也可以搜集索引信息.作为runstats本身没有优化的功能,但是它更新了统计信息以后,可以让DB2 ...

  4. CURL详解（转载）

    curl_setop()函数中的参数中文说明 curl_setop()函数中的参数中文说明 curl_setopt()函数将为一个CURL会话设置选项.option参数是你想要的设置,value是这个 ...

  5. nginx + lua +redis环境搭建

    环境搭建,其实主要是lua的环境,这个环境够麻烦的,在网上找了很多前辈的文章,终于完成了 ,安装redis wget http://download.redis.io/releases/redis-3 ...

  6. java解析中国行政区域并在页面显示实现动态逐级筛选

    一.实现目标 首先会有一个存放中国行政区域数据的一个txt文件,用java读取并解析出来,并在页面上通过下拉框的形式展示出来.实现效果如下图,当选择完省份后,在选择该省份下的城市,然后在选择该城市下的 ...

  7. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  8. 关于hibernate的n+1问题以及解决办法

    hibernate的n+1问题已经是一个很常见的问题了. 最近遇到了很多次的n+1问题,总结一下解决办法: 1.ManyToOne中的n+1: 当查询单个的时候,可以使用

  9. Guava学习笔记：Google Guava 类库简介

    http://www.cnblogs.com/peida/tag/Guava/ Guava 是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, cachin ...

  10. git 查看远程分支、本地分支、创建分支、把分支推到远程repository、删除本地分支

    1 查看远程分支 $ git branch -a * br-2.1.2.2 master remotes/origin/HEAD -> origin/master remotes/origin/ ...