jquery 画板折叠
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 折叠面板(Accordion) - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>部分 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>部分 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>部分 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>部分 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
jquery 画板折叠的更多相关文章
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- jQuery实现折叠下拉效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...
- Jquery Accordion 折叠面板
属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
- jquery 展开折叠效果
仅供参考 图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- jquery文本折叠
/** * Created by dongdong on 2015/4/28. */(function($){ var defaults = { height:40, //文本收起后的高度 speed ...
- jquery左右折叠框
网站左右折叠框: <!DOCTYPE html> <html> <style> #Kefclose,#Kefopen{position:absolute;left: ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- CodeVS 3415-最小和
原题 题目描述 Description 小浣熊松松来到文具店,选择了K支自己喜欢的水彩笔,并抄下了它们的价格.可是到结算时,他发现自己抄价格时抄得太密集,以至于所有价格连成了一个数字串(你可 ...
- [MFC美化] SkinSharp使用详解1-使用方法
需要注意的是: 加载换肤后,程序关闭时,无需调用卸载皮肤接口,SkinSharp换肤库会自己完成清理工作.换肤时无需卸载皮肤,直接调用即可. 其DLL使用方法与前面几种皮肤库用法类似.如下: 1. 将 ...
- ios系统视频播放器MPMoviePlayerController应用遇到的坑
最近在做视频播放时应用系统MPMoviePlayerController播放器播放视频,发现点击快进快退会出现黑屏现象,并且点击完成按钮也不会返回,代码以及界面如下所示: NSURL *url=[se ...
- Vim插件之Command-T使用问题
最近在使用vim插件CommandT时出现问题其实就是vim没有支持ruby,不过google之后找到了解决方法,老外的态度还是很让人敬佩的,度娘搜索的结果太让人呕心了.. 贴下,以后再次遇到解决. ...
- The APR based Apache Tomcat Native library tomcat启动错误
The APR based Apache Tomcat Native library which allows optimal performance in production environmen ...
- 今天学习的裸板驱动之存储控制器心得(初始化SDRAM)
CPU只管操作地址,而有些地址代表的是某些存储设备. 但是操作这些存储设备需要很多东西,比如需要制定bank,行/列地址等.所以就有了存储管理器,用来处理这种CPU操作的地址和存储设备间的转换. (1 ...
- linux命令之crontab详解
crontab命令: crontab -l : 显示定时任务列表 crontab -e: 编辑定时任务 crontab -r : 删除所有定时任务 基本格式 : * * * * * command ...
- 在ubuntu下设置eclipse开发STM32等嵌入式设备
之前为了能够让ROS与底层能够顺利通讯,我采用可开源开发板arduino ,因为arduino有ROS的库,能够按照ROS wiki上所给的教程就可以顺利的开发,但由于arduino的局限性,我觉得是 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- 调皮的R文件,卑鄙的空格
毕业快一年了,由于公司业务需要,开发岗的我做了一年测试.最近,终于要开始转开发了.于是和小伙伴们合作,做一个备忘录apk.由于之前是做java的,而且差不多一年没碰代码了(这一年主要做测试,虽然有写自 ...