jQuery内容折叠效果插件用法实例分析(附demo源码)


Posted in Javascript onApril 28, 2016

本文实例讲述了jQuery内容折叠效果插件用法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>jQuery Collapsible Fieldset</title>
  <script src="js/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="js/jquery.coolfieldset.js"></script>
  <link rel="stylesheet" type="text/css" href="css/jquery.coolfieldset.css" />
</head>
<body>
  <h1>jQuery Collapsible Fieldset</h1>
  <br/>
  <fieldset id="fieldset1" class="coolfieldset">
    <legend>Default</legend>
    <div>
      <p>By default the <b>fieldset</b> is opened or expanded at start. Click on its <b>legend</b> to close or collapse it.</p>
      <p>The code is simply like below</p>
<pre>
$('#fieldset1').coolfieldset();
</pre>
    </div>
  </fieldset>
  <br/>
  <fieldset id="fieldset2" class="coolfieldset">
    <legend>Closed at start</legend>
    <div>
      <p>If we want the fieldset to be closed or collapsed at start, just add <b>{collapsed:true}</b> as the argument.</p>
<pre>
$('#fieldset2').coolfieldset({collapsed:true});
</pre>
    </div>
  </fieldset>
  <br/>
  <fieldset id="fieldset4" class="coolfieldset">
    <legend>Animation Speed</legend>
    <div>
      <p>You can also define the animation speed for the fieldset while collapsing or expanding by using <b>speed</b> option. Acceptable values are "<b>fast</b>", "<b>medium</b>", "<b>slow</b>", or a number in millisecond.</p>
<pre>
$('#fieldset3').coolfieldset({speed:"fast"});
</pre>
    </div>
  </fieldset>
  <br/>
  <fieldset id="fieldset5" class="coolfieldset">
    <legend>No Animation</legend>
    <div>
      <p>If you don't want to use animation effect, please use <b>animation</b> option and fill its value with <b>false</b>.</p>
<pre>
$('#fieldset4').coolfieldset({animation:false});
</pre>
    </div>
  </fieldset>
  <br/><br/>
  <fieldset id="fieldset3" class="coolfieldset">
    <legend>Notes :</legend>
    <div>
      <ul>
        <li>All content inside fieldset (except the <b>legend</b> tag) should be placed inside the <b>div</b> tag.</li>
        <li>Edit the <b>jquery.coolfieldset.css</b> to change the fieldset style.</li>
      </ul>
    </div>
  </fieldset>
  <script>
    $('#fieldset1, #fieldset3').coolfieldset();
    $('#fieldset2').coolfieldset({collapsed:true});
    $('#fieldset4').coolfieldset({speed:"fast"});
    $('#fieldset5').coolfieldset({animation:false});
  </script>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
location.hash保存页面状态的技巧
Apr 28 #Javascript
字符串反转_JavaScript
Apr 28 #Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
基于BootStarp的Dailog
Apr 28 #Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 #Javascript
JavaScript 消息框效果【实现代码】
Apr 27 #Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 #Javascript
You might like
十天学会php之第七天
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
JS动画效果代码3
2008/04/03 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
大学军训自我鉴定
2013/12/15 职场文书
小学音乐教学反思
2014/02/05 职场文书
房屋所有权证明
2014/10/20 职场文书
windows安装python超详细图文教程
2021/05/21 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL