//手风琴效果

<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. 在android开发中使用multdex的方法-IT蓝豹为你整理

    Android系统在安装应用时,往往需要优化Dex,而由于处理工具DexOpt对id数目的限制,导致其处理的数目不能超过65536个,因此在Android开发中,需要使用到MultiDex来解决这个问 ...

  2. [Docker] docker 基础学习笔记3（共6篇）

    首先我们安装好了ssh server之后, 我们需要将这个容器commit,然后启动这个被commit的image. 启动方式: docker run -d -p 2222:22 /usr/sbin/ ...

  3. LDAP与SSH

    一般情况下,客户端配置好之后,ssh是可以直接用的,若不能,则需手动配置 1:vim /etc/ssh/sshd_config 把UsePAM改成yes 2:在vim /etc/pam.d/sshd添 ...

  4. linux 账号管理与ACL权限设定

    此文涉及命令:useradd.usermod.userdel.passwd.chage.setfacl.getfacl.su.sudo.fingr.chfn.chsh.id.groupadd.grou ...

  5. Mac OS X的空间去哪儿了

    记得有事儿没事儿看下,/cores/目录的大小. cores目录是存放程序dump的数据,对于绝大部分人时是没有用的.可以删除.如果遇到坑爹的程序,一直生成dump文件,硬盘瞬间就爆满了. 典型:An ...

  6. design philosophy

  7. Java（类与对象）

    1>对象判等 请输入并运行以下代码,得到什么结果? public class Test { public static void main(String[] args) { // TODO Au ...

  8. selenium2（WebDriver）环境搭建

    1.安装jdk并配置环境变量: jdk安装jdk下载地址: http://www.oracle.com/technetwork/java/javase/downloads/index.html环境变量 ...

  9. java多线程详解(5)-Threadlocal用法

    ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类可以很简洁 ...

  10. 利用PHP取二进制文件头判断文件类型

    <?php $files = array('D:\no.jpg', 'D:\no.png','D:\no2.JPEG','D:\no.BMP'); $fileTypes = array( 779 ...