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 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
ES6基础之默认参数值
Feb 21 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
JS加载解析Markdown文档过程详解
May 19 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
杏林同学录(一)
2006/10/09 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
js实现无缝滚动图
2017/02/22 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
探究python中open函数的使用
2016/03/01 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
社区创先争优承诺书
2014/08/30 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
返乡农民工证明
2015/06/24 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js