jQuery内容折叠效果插件用法实例分析(附demo源码)
本文实例讲述了jQuery内容折叠效果插件用法。分享给大家供大家参考，具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQueryCollapsibleFieldset</title>
<scriptsrc="js/jquery.min.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="js/jquery.coolfieldset.js"></script>
<linkrel="stylesheet"type="text/css"href="css/jquery.coolfieldset.css"/>
</head>
<body>
<h1>jQueryCollapsibleFieldset</h1>
<br/>
<fieldsetid="fieldset1"class="coolfieldset">
<legend>Default</legend>
<div>
<p>Bydefaultthe<b>fieldset</b>isopenedorexpandedatstart.Clickonits<b>legend</b>tocloseorcollapseit.</p>
<p>Thecodeissimplylikebelow</p>
<pre>
$('#fieldset1').coolfieldset();
</pre>
</div>
</fieldset>
<br/>
<fieldsetid="fieldset2"class="coolfieldset">
<legend>Closedatstart</legend>
<div>
<p>Ifwewantthefieldsettobeclosedorcollapsedatstart,justadd<b>{collapsed:true}</b>astheargument.</p>
<pre>
$('#fieldset2').coolfieldset({collapsed:true});
</pre>
</div>
</fieldset>
<br/>
<fieldsetid="fieldset4"class="coolfieldset">
<legend>AnimationSpeed</legend>
<div>
<p>Youcanalsodefinetheanimationspeedforthefieldsetwhilecollapsingorexpandingbyusing<b>speed</b>option.Acceptablevaluesare"<b>fast</b>","<b>medium</b>","<b>slow</b>",oranumberinmillisecond.</p>
<pre>
$('#fieldset3').coolfieldset({speed:"fast"});
</pre>
</div>
</fieldset>
<br/>
<fieldsetid="fieldset5"class="coolfieldset">
<legend>NoAnimation</legend>
<div>
<p>Ifyoudon'twanttouseanimationeffect,pleaseuse<b>animation</b>optionandfillitsvaluewith<b>false</b>.</p>
<pre>
$('#fieldset4').coolfieldset({animation:false});
</pre>
</div>
</fieldset>
<br/><br/>
<fieldsetid="fieldset3"class="coolfieldset">
<legend>Notes:</legend>
<div>
<ul>
<li>Allcontentinsidefieldset(exceptthe<b>legend</b>tag)shouldbeplacedinsidethe<b>div</b>tag.</li>
<li>Editthe<b>jquery.coolfieldset.css</b>tochangethefieldsetstyle.</li>
</ul>
</div>
</fieldset>
<script>
$('#fieldset1,#fieldset3').coolfieldset();
$('#fieldset2').coolfieldset({collapsed:true});
$('#fieldset4').coolfieldset({speed:"fast"});
$('#fieldset5').coolfieldset({animation:false});
</script>
</body>
</html>
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。