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程序设计有所帮助。