Accordion - 手风琴
//手风琴效果
<div style="overflow:hidden;height:400px;width:948px;">
<div class="J_TWidget" data-widget-config="{"triggerType":"mouse","autoplay":true,"triggerCls":"pan_trg","panelCls":"pan_content","multiple":false,"hasTriggers":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 - 手风琴的更多相关文章
- easyui accordion—手风琴格子始终展开和多个格子展开
来源:http://www.cnblogs.com/tylerdonet/p/3531844.html 始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html ...
- Jquery UI accordion手风琴菜单
最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...
- easyui学习笔记6—基本的Accordion(手风琴)
手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置. 1.先看看引用的资源 <meta charset="UTF-8" ...
- 使用jQuery开发accordion手风琴插件
一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...
- AngularJs的UI组件ui-Bootstrap分享(三)——Accordion
Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...
- 7.Layout布局(tabs、accordion、layout)
一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...
- easyui---accordion(手风琴)
首先配置好easyui环境 1.ACCORDION(手风琴) class:class=easyui-accordion, 事件: 查找: function selectPanel(){ //会弹出输入 ...
- EasyUI配置和组件
首先在webcontent添加配置文件 新建静态或动态网站,在title的下面加入五个配置文件路径,注意:循序不能乱 <!-- 顺序不可以乱 --> <!-- 1.jQuery的js ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
随机推荐
- List<Object> to JSONArray一
package com.beijxing.TestMain; import java.util.ArrayList; import java.util.List; import com.beijxin ...
- 循序渐进Python3(八) -- 1 -- socket进阶
IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. Linux中的 select,poll,epoll 都 ...
- Appium学习路—脚本篇(启动app)
启动之前的准备 1.脚本执行前,需要先启动appium的server端, 启动server方法: 打开appium客户端,点击右上角的Launch 2.iOS的测试只能在mac本上做 ...
- IntelliJ设置鼠标悬浮提示和修改快捷键
IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck
- UIWebView显示乱码问题
今天有人问Swift中UIWebView加载页面出来的是乱码,问知道怎么解决么? OC我知道肯定不会有乱码问题,Swift就不知道了,因为没有试过.....于是...我自己动手试试啦... OC和Sw ...
- MVC将服务器端的物理路径转换为服务器路径
以图片为例 后台Controller.cs public FileResult ImageUrl(string file) { return File("物理路径"+file, & ...
- iOS工作笔记(十五)
1.使用MJRefresh上拉加载的小细节 MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingB ...
- 匿名函数 lambda表达式(lambda expression)
阅读g2log时,发现有两行代码居然看不懂. 1. auto bg_call = [this, log_directory]() {return pimpl_->backgroundChang ...
- maven仓库使用
maven镜像仓库 1.国内maven镜像仓库 阿里云镜像 <mirrors> <mirror> <id>aliyun</id> <name> ...
- Java Reflection
Java语言的反射机制 1. Java反射的含义:获取应用中正在运行的Java对象. 2. Java反射机制: 在运行的程序中,对于任意的类,都可以知道这个类的属性.方法以及构造函数,对于任意对象都可 ...