搜尋

首頁 >web前端 >js教程 >jQuery內容折疊效果插件用法實例分析(附demo源碼)_jquery

jQuery內容折疊效果插件用法實例分析(附demo源碼)_jquery

WBOY
WBOY原創
2016-05-16 15:03:171408瀏覽

本文實例講述了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 class="brush:php;toolbar:false">
$('#fieldset1').coolfieldset();

Closed at start

If we want the fieldset to be closed or collapsed at start, just add {collapsed:true} as the argument.

$('#fieldset2').coolfieldset({collapsed:true});

Animation Speed

You can also define the animation speed for the fieldset while collapsing or expanding by using speed option. Acceptable values are "fast", "medium", "slow", or a number in millisecond.

$('#fieldset3').coolfieldset({speed:"fast"});

No Animation

If you don't want to use animation effect, please use animation option and fill its value with false.

$('#fieldset4').coolfieldset({animation:false});


Notes :
  • All content inside fieldset (except the legend tag) should be placed inside the div tag.
  • Edit the jquery.coolfieldset.css to change the fieldset style.
<script> $('#fieldset1, #fieldset3').coolfieldset(); $('#fieldset2').coolfieldset({collapsed:true}); $('#fieldset4').coolfieldset({speed:"fast"}); $('#fieldset5').coolfieldset({animation:false}); </script>

完整實例程式碼點擊此處本站下載。

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖曳特效與技巧總結》、 《jQuery擴充技巧摘要》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使用jquery修改css中帶有!important的樣式屬性_jquery下一篇：如何使用jquery修改css中帶有!important的樣式屬性_jquery

相關文章

看更多