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)右 ...
随机推荐
- kali2.0 + LAMP
0x01 更新源 leafpad /etc/apt/sources.list #中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-f ...
- Substring （nyoj 308)
练习使用字符串函数了. 1.字串的反转也是它的字串,2.最长,3.最先出现 string: #include<iostream> #include<cstdio> #inclu ...
- udp接收
char receive_buffer[500] = {0}; std::vector<std::string> mysplit(std::string str,std::string p ...
- Xcode打包framework脚本
参考文章: http://www.jianshu.com/p/1cb4c4fe5481 https://gist.github.com/cromandini/1a9c4aeab27ca84f5d79 ...
- angular-ui-bootstrap插件API - Pagination
Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...
- centos安装ganttproject
官网下载 http://www.ganttproject.biz/ 我的JAVA早已经安装了. 问题:root #ganttproject 提示org.bardsoftware.eclipsito.B ...
- android下拉刷新控件 android-pulltorefresh
运行效果: 介绍:ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal)ScrollView.Fragment上下左右拉 ...
- 在虚拟机上配置linux lab的相关经验
最近一直在研究怎样在嵌入式开发板上移植linux嵌入式系统,但是不太想花费太多钱购买开发板.然后在网上搜索相关的arm模拟器.有qemu,skyeye,armulator等,在按照网上教程一步一步实践 ...
- Web前端优质学习网站
* 官方: W3C:http://www.w3.org/ ECMA:http://www.ecmascript.org/ Mozilla:h ...
- Mediawiki随笔
http://www.ibm.com/developerworks/cn/opensource/os-mediawiki/ 定制wiki http://www.zzbaike.com/wiki/Me ...