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? 提供了强大的功能函数解决浏览器 ...
随机推荐
- sqllite
public static void tt() { int ID = 0; while(true) { stri ...
- WCF服务一:WCF服务简介
一.回顾开发历史: 软件架构的设计经历了:从面向对象程序,到面向组件程序设计,再到面向服务程序设计.这三种方式都致力于同一个目标:封装和重用. 面向对象程序设计:类封装功能并提供代码重用. 面向组件程 ...
- Struts2 的 值栈和ActionContext
1.ValueStack 和 ActionContext 的关系与区别: -- 相同点:它们都是在一次HTTP请求的范围内使用的,它们的生命周期都是一次请求 -- 不同点:ValueStack 分为对 ...
- npm -v 一直闪
一直闪一般是配置搞错了 参考: windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应啊 就光标一直闪 node是正常的 或者 https://segmentfault.co ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- HTTP Error 503. The service is unavailable
网站运行一段时间后,突然所有的页面都报告以下错误: HTTP Error 503. The service is unavailable 经检查,应用程序池自动停止,可能是工作进程抛出的异常数超出限制 ...
- dg
package excel; import java.util.Scanner; public class doExcel { public static void main(String args[ ...
- Spring MVC @Transactional注解方式事务失效的解决办法
在springMVC类上绑定@Transactional的注解,但是访问数据库时,总是报 can't localtion to current JTA Transactional. 后来发现sprin ...
- 转载:shell脚本之sed使用----替换、变量、转义字符
sed替换的基本语法为:----s后面跟的是分隔符,原字符串可使用.*这种正则表达式进行整行替换 代码如下: sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式, ...
- Python SQLAlchemy --1
本文為 Python SQLAlchemy ORM 一系列教學文: SQLAlchemy 大概是目前 Python 最完整的資料庫操作的套件了,不過最令人垢病的是它的文件真的很難閱讀,如果不搭配個實例 ...