jQueryコンテンツフォールディングエフェクトプラグイン使用例分析（デモソースコード付き）

jQueryコンテンツフォールディングエフェクトプラグイン使用例分析（デモソースコード付き）_jquery

WBOY

リリース： 2016-05-16 15:03:17

オリジナル

1406 人が閲覧しました

この記事の例では、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.

ログイン後にコピー

この記事が jQuery プログラミングのすべての人に役立つことを願っています。