Latest web development tutorials
×

jQuery UI コース

jQuery UI コース jQuery UI 簡単な紹介 jQuery UI ダウンロード jQuery UI 使用 jQuery UI カスタマイズ jQuery UI ワークス

jQuery UI テーマ

jQuery UI テーマ jQuery UI ThemeRoller jQuery UI CSS フレーム API jQuery UI デザインテーマ

jQuery UI コンポーネントライブラリ

jQuery UI コンポーネントライブラリ jQuery UI 拡張ウィジェット jQuery UI メソッド呼び出しウィジェット jQuery UI なぜウィジェットライブラリを使用 jQuery UI ウィジェットライブラリを使用する方法

jQuery UI リファレンスマニュアル

jQuery UI API ファイル API カテゴリ - 特別に良い効果 API カテゴリ - エフェクトコア API カテゴリ - 交互に API カテゴリ - メソッドのオーバーロード API カテゴリ - ウェイ API カテゴリ - セレクタ API カテゴリ - テーマ API カテゴリ - UI コア API カテゴリ - ユーティリティ API カテゴリ - ウィジェット

jQuery UI 例

jQuery UI 例 ドラッグ 場所 スケーリング 選択します シーケンス 折りたたみパネル オートコンプリート プッシュボタン 日付ピッカー ダイアログ メニュー プログレスバー スライダー 回転子 タブ ツールチップボックス 特別に良い効果 ディスプレイ 隠します 切り替え .addClass() .removeClass() .toggleClass() .switchClass() カラーアニメーション 検索します コンポーネントライブラリ

jQueryのUIの例 - 折りたたみパネル(アコーディオン)

情報コンテンツ折りたたみ可能なパネルを提示するための限られたスペースのディスプレイ内。

アコーディオン部分の詳細については、APIドキュメントを参照してください折りたたみパネル部材(アコーディオンウィジェットを)

デフォルトの機能

拡大して頭の上にクリック/崩壊の内容は同じタブ(タブ)のように、ロジックの様々な部分に分割されます。 マウスがオン/オフ状態のさまざまな部分を開くために切り替えるかどうかを置いたときに必要に応じて設定することができます。

基本的なHTMLタグのタイトル(H3タグ)とコンテンツのdivのシリーズなので、コンテンツはJavaScriptを経由せずに使用することができます。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $(関数(){
    $( "#accordion」).accordion();
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <H3>パート1 </ H3>
  <DIV>
    <P>
    Mauris maurisアンティ、blanditら、suscipit eget、QUAMをultrices。整数
    neque UT。VivamusのNiSi metus、molestieのヴェル、condimentum座り込み、中妊婦
    エロスsuscipit AMET、NUNC。ナムNIBH。〜している間。ナムmiです。Proin viverraレオUT
    odio。Curabitur malesuada。前庭velit EUアンティscelerisque vulputate。
    </ P>
  </ DIV>
  <H3>パート2 </ H3>
  <DIV>
    <P>
    sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭はAMET座ります
    プルス。Vivamus hendrerit、aliquetのlaoreetで嘆き、maurisのturpisのporttitor
    velit、faucibus interdum TELLUSリベロ交流フスト。Vivamus非QUAM。で
    faucibus urna suscipit。
    </ P>
  </ DIV>
  <H3>セクション3 </ H3>
  <DIV>
    <P>
    ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。
    Phasellus pellentesqueプルスでpedeでマッサ。Aenean。Phasellus交流リベロ
    交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS
    切れ込みのornareは、QUAMアンティaliquamのNiSiのは、EU iaculisレオプルスは、DUIをvenenatis。
    </ P>
    <UL>
      <李>リスト項目1 </ LI>
      <李>リスト項目2ます。</ li>
      <李>リスト項目3ます。</ li>
    </ UL>
  </ DIV>
  <H3>パート4 </ H3>
  <DIV>
    <P>
    CRAS格言。Pellentesque住人morbusの複数形tristique senectusらnetus
    らmalesuadaのFAME交流turpisの排出物。前庭アンティイプサムprimisで
    faucibus orci luctusらultricesお問い合わせ今cubilia Curae。Aenean切れ込み
    maurisヴェルEST。
    </ P>
    <P>
    Suspendisse EUのnisl。NullamのUTのリベロ。整数dignissim consequat lectus。
    クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、あたり
    inceptosのhimenaeos。
    </ P>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

折りたたみコンテンツ

デフォルトでは、崩壊パネルは常に一部が開放されたまま。 すべての部分が折り畳まれている与えるために、設定することができますcollapsible真のオプションを選択します。 そのコンテンツペインを折りたたむには、現在開いているセクションをクリックします。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - 折りたたみコンテンツ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $(関数(){
    $( "#accordion」).accordion({
      折り畳み式:真
    });
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <H3>パート1 </ H3>
  <DIV>
    <P> Mauris maurisアンティ、blanditら、ultrices、suscipit eget、QUAM。整数UTのneque。VivamusのNiSi metus、molestieのVELは、中、エロスsuscipit AMET、NUNC。ナムNIBH。〜している間に座ってcondimentum妊婦。ナムマイルを。Proin viverraレオUTのodio。Curabiturのmalesuada。前庭velit EUアンティscelerisque vulputateます。</ p>
  </ DIV>
  <H3>パート2 </ H3>
  <DIV>
    <P> sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭AMET座るプルス。Vivamus hendrerit、aliquetのlaoreet、maurisのturpisのporttitorのvelit、faucibus interdum TELLUSリベロ交流フストでの嘆き。Vivamus非QUAM。urna faucibus suscipitで。< / P>
  </ DIV>
  <H3>セクション3 </ H3>
  <DIV>
    <P>ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。Phasellus pellentesqueプルスでマッサ。Aenean pedeインチPhasellus交流リベロ交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS切れ込みornare 、QUAMアンティaliquamのNiSi、EU iaculisレオプルスがvenenatis DUIます。</ p>
    <UL>
      <李>リスト項目1 </ LI>
      <李>リスト項目2ます。</ li>
      <李>リスト項目3ます。</ li>
    </ UL>
  </ DIV>
  <H3>パート4 </ H3>
  <DIV>
    <P> CRAS格言Pellentesque住人morbusの複数形tristique senectusらnetusらmalesuadaのFAME交流turpis性排出物前庭アンティイプサムprimis faucibus orci luctusらultricesお問い合わせ今cubilia Curaeで; .. Aenean切れ込みmauris VEL ESTます。</ p> <p> Suspendisse EUのnisl。 。NullamのUTのリベロ。整数dignissim consequat lectus。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたります。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

カスタムアイコン

介して、 iconsタイトルのアイコンをカスタマイズするためのオプション、 iconsデフォルトのタイトルを受け入れ、活性化するためのオプション(オープン)状態クラス。 任意のクラスのUI CSSフレームワークを使用するか、背景画像を使用するカスタムクラスを作成します。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - カスタムアイコン</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $(関数(){
    VARアイコン= {
      ヘッダー:「UI-アイコン-円矢印-E」、
      activeHeader:「UI-アイコン-円矢印-S」
    };
    $( "#accordion」).accordion({
      アイコン:アイコン
    });
    $( "#toggle」).button()。をクリックします(関数(){
      場合($( "#accordion」).accordion("オプション "、"アイコン ")){
        $( "#accordion」).accordion(「オプション」、「アイコン」は、null);
      }エルス{
        $( "#accordion」).accordion(「オプション」、「アイコン」アイコン)。
      }
    });
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <H3>パート1 </ H3>
  <DIV>
    <P> Mauris maurisアンティ、blanditら、ultrices、suscipit eget、QUAM。整数UTのneque。VivamusのNiSi metus、molestieのVELは、中、エロスsuscipit AMET、NUNC。ナムNIBH。〜している間に座ってcondimentum妊婦。ナムマイルを。Proin viverraレオUTのodio。Curabiturのmalesuada。前庭velit EUアンティscelerisque vulputateます。</ p>
  </ DIV>
  <H3>パート2 </ H3>
  <DIV>
    <P> sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭AMET座るプルス。Vivamus hendrerit、aliquetのlaoreet、maurisのturpisのporttitorのvelit、faucibus interdum TELLUSリベロ交流フストでの嘆き。Vivamus非QUAM。urna faucibus suscipitで。< / P>
  </ DIV>
  <H3>セクション3 </ H3>
  <DIV>
    <P>ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。Phasellus pellentesqueプルスでマッサ。Aenean pedeインチPhasellus交流リベロ交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS切れ込みornare 、QUAMアンティaliquamのNiSi、EU iaculisレオプルスがvenenatis DUIます。</ p>
    <UL>
      <李>リスト項目1 </ LI>
      <李>リスト項目2ます。</ li>
      <李>リスト項目3ます。</ li>
    </ UL>
  </ DIV>
  <H3>パート4 </ H3>
  <DIV>
    <P> CRAS格言Pellentesque住人morbusの複数形tristique senectusらnetusらmalesuadaのFAME交流turpis性排出物前庭アンティイプサムprimis faucibus orci luctusらultricesお問い合わせ今cubilia Curaeで; .. Aenean切れ込みmauris VEL ESTます。</ p> <p> Suspendisse EUのnisl。 。NullamのUTのリベロ。整数dignissim consequat lectus。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたります。</ p>
  </ DIV>
</ DIV>
 
<ボタンのid = "トグル">トグルアイコン</ button>の
 
 
</ BODY>
</ HTML>

充填空間

折り畳みパネルので、ブロック・レベルの要素で構成され、デフォルトで、その幅は、利用可能な水平方向のスペースを埋めます。 コンテナによって割り当てられた垂直方向のスペースを埋めるために、設定heightStyleオプションは、 "fill" 、スクリプトは自動的に親コンテナの折りたたみパネルサイズの高さを設定します。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) -  </タイトル>スペースを埋めます
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #アコーディオン、リサイザ{
    パディング:10pxの;
    幅:350px;
    高さ:220px;
  }
  </スタイル>
  <スクリプト>
  $(関数(){
    $( "#accordion」).accordion({
      heightStyle: "埋めます"
    });
  });
  $(関数(){
    $( "#アコーディオン-リサイザ」).resizable({
      minHeight:140、
      minWidth:200、
      サイズ変更:関数(){
        $( "#accordion」).accordion(「リフレッシュ」)。
      }
    });
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<H3クラス= "ドキュメント">外容器を再調整:</ H3>
 
<DIVのID = "アコーディオンリサイザ"クラス= "UIウィジェットコンテンツ」>
  <DIVのID = "アコーディオン">
    <H3>パート1 </ H3>
    <DIV>
      <P> Mauris maurisアンティ、blanditら、ultrices、suscipit eget、QUAM。整数UTのneque。VivamusのNiSi metus、molestieのVELは、中、エロスsuscipit AMET、NUNC。ナムNIBH。〜している間に座ってcondimentum妊婦。ナムマイルを。Proin viverraレオUTのodio。Curabiturのmalesuada。前庭velit EUアンティscelerisque vulputateます。</ p>
    </ DIV>
    <H3>パート2 </ H3>
    <DIV>
      <P> sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭AMET座るプルス。Vivamus hendrerit、aliquetのlaoreet、maurisのturpisのporttitorのvelit、faucibus interdum TELLUSリベロ交流フストでの嘆き。Vivamus非QUAM。urna faucibus suscipitで。< / P>
    </ DIV>
    <H3>セクション3 </ H3>
    <DIV>
      <P>ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。Phasellus pellentesqueプルスでマッサ。Aenean pedeインチPhasellus交流リベロ交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS切れ込みornare 、QUAMアンティaliquamのNiSi、EU iaculisレオプルスがvenenatis DUIます。</ p>
      <UL>
        <李>リスト項目1 </ LI>
        <李>リスト項目2ます。</ li>
        <李>リスト項目3ます。</ li>
      </ UL>
    </ DIV>
    <H3>パート4 </ H3>
    <DIV>
      <P> CRAS格言Pellentesque住人morbusの複数形tristique senectusらnetusらmalesuadaのFAME交流turpis性排出物前庭アンティイプサムprimis faucibus orci luctusらultricesお問い合わせ今cubilia Curaeで; .. Aenean切れ込みmauris VEL ESTます。</ p> <p> Suspendisse EUのnisl。 。NullamのUTのリベロ。整数dignissim consequat lectus。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたります。</ p>
    </ DIV>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

非自動高さ

設定heightStyle: "content" 、折り畳まれたパネルは、元の高さを維持するようにします。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - 非自動高さ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $(関数(){
    $( "#accordion」).accordion({
      heightStyle: "コンテンツ"
    });
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <H3>パート1 </ H3>
  <DIV>
    <P> Mauris maurisアンティ、blanditら、susceros。ナムmiです。Proin viverraレオUTのodioをultrices。Curabiturのmalesuada。前庭velit EUアンティscelerisque vulputate。</ P>
  </ DIV>
  <H3>パート2 </ H3>
  <DIV>
    <P> sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭AMET座るプルス。Vivamus hendrerit、aliquetのlaoreet、maurisのturpisのporttitorのvelit、faucibus interdum TELLUSリベロ交流フストでの嘆き。Vivamus非QUAM。urna faucibus suscipitで。< / P>
  </ DIV>
  <H3>セクション3 </ H3>
  <DIV>
    <P>ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。Phasellus pellentesqueプルスでマッサ。Aenean pedeインチPhasellus交流リベロ交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS切れ込みornare 、QUAMアンティaliquamのNiSi、EU iaculisレオプルスがvenenatis DUIます。</ p>
    <UL>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
      <李>リスト項目ます。</ li>
    </ UL>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

ときにオープンホバー

拡大して頭の上にクリック/崩壊の内容は同じタブ(タブ)のように、ロジックの様々な部分に分割されます。 マウスがオン/オフ状態のさまざまな部分を開くために切り替えるかどうかを置いたときに必要に応じて設定することができます。

基本的なHTMLタグのタイトル(H3タグ)とコンテンツのdivのシリーズなので、コンテンツはJavaScriptを経由せずに使用することができます。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - ホバリングすると、オープン</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $(関数(){
    $( "#accordion」).accordion({
      イベント:「hoverintentをクリックします」
    });
  });
 
  / *
   * HoverIntent |著作権2011ブライアンCherne
   * Http://cherne.net/brian/resources/jquery.hoverIntent.html
   * jQueryのUIチームによって変更されました
   * /
  $ .event.special.hoverintent = {
    セットアップ:関数(){
      $(この).bind(「マウスオーバー」、jQuery.event.special.hoverintent.handler)。
    }、
    ティアダウン:関数(){
      $(この).unbind(「マウスオーバー」、jQuery.event.special.hoverintent.handler)。
    }、
    ハンドラ:関数(イベント){
      VAR currentX、currentY、タイムアウト、
        引数=引数、
        ターゲット= $(event.target)、
        previousX = event.pageX、
        previousY = event.pageY。
 
      機能トラック(イベント){
        currentX = event.pageX。
        currentY = event.pageY。
      };
 
      クリア機能(){
        ターゲット
          .unbind( "のMouseMove」、トラック)
          .unbind(「マウスアウト」、クリア)。
        clearTimeout(タイムアウト)。
      }
 
      関数ハンドラ(){
        varの各小道具、
          ORIG =イベント。
 
        + currentX) - ((Math.abs(previousX場合
            Math.abs(previousY  -  currentY))<7){
          クリア();
 
          イベント= $ .Event(「hoverintent ");
          {(ORIGに支柱)のために
            場合{(!()イベントで支えます)
              イベント[プロパ] = origが[支柱];
            }
          }
          //新しいイベントが非同期的にトリガされますので、元のイベントへのアクセスを防ぐ、古いイベントは(#6028)が利用できなくなりました
          event.originalEventを削除します。
 
          target.trigger(イベント);
        }エルス{
          previousX = currentX。
          previousY = currentY。
          タイムアウト= setTimeoutメソッド(ハンドラ、100);
        }
      }
 
      タイムアウト= setTimeoutメソッド(ハンドラ、100);
      target.bind({
        MouseMove:トラック、
        マウスアウト:明確な
      });
    }
  };
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <H3>パート1 </ H3>
  <DIV>
    <P>
    Mauris maurisアンティ、blanditら、suscipit eget、QUAMをultrices。整数
    neque UT。VivamusのNiSi metus、molestieのヴェル、condimentum座り込み、中妊婦
    エロスsuscipit AMET、NUNC。ナムNIBH。〜している間。ナムmiです。Proin viverraレオUT
    odio。Curabitur malesuada。前庭velit EUアンティscelerisque vulputate。
    </ P>
  </ DIV>
  <H3>パート2 </ H3>
  <DIV>
    <P>
    sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭はAMET座ります
    プルス。Vivamus hendrerit、aliquetのlaoreetで嘆き、maurisのturpisのporttitor
    velit、faucibus interdum TELLUSリベロ交流フスト。Vivamus非QUAM。で
    faucibus urna suscipit。
    </ P>
  </ DIV>
  <H3>セクション3 </ H3>
  <DIV>
    <P>
    ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。
    Phasellus pellentesqueプルスでpedeでマッサ。Aenean。Phasellus交流リベロ
    交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS
    切れ込みのornareは、QUAMアンティaliquamのNiSiのは、EU iaculisレオプルスは、DUIをvenenatis。
    </ P>
    <UL>
      <李>リスト項目1 </ LI>
      <李>リスト項目2ます。</ li>
      <李>リスト項目3ます。</ li>
    </ UL>
  </ DIV>
  <H3>パート4 </ H3>
  <DIV>
    <P>
    CRAS格言。Pellentesque住人morbusの複数形tristique senectusらnetus
    らmalesuadaのFAME交流turpisの排出物。前庭アンティイプサムprimisで
    faucibus orci luctusらultricesお問い合わせ今cubilia Curae。Aenean切れ込み
    maurisヴェルEST。
    </ P>
    <P>
    Suspendisse EUのnisl。NullamのUTのリベロ。整数dignissim consequat lectus。
    クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、あたり
    inceptosのhimenaeos。
    </ P>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

並び替え(ソート可能)

並べ替えパネルにタイトルをドラッグします。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのアコーディオン(アコーディオン) - 並べ替え(ソート可能)</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  / *注文、* / IEのレイアウトの問題(#5413を参照)があります
  .group {ズーム:1}
  </スタイル>
  <スクリプト>
  $(関数(){
    $( "#accordion」)
      .accordion({
        ヘッダー: "> div>のH3」
      })
      .sortable({
        軸:「Y」、
        ハンドル:「H3」を、
        停止:機能(イベント、UI){
          //ハンドラfocusoutトリガが.ui-状態フォーカスを削除するように並べ替え、IEは、ぼやけを登録することができない場合には
          ui.item.children(「H3」).triggerHandler(「focusout ");
        }
      });
  });
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "アコーディオン">
  <DIVクラス= "グループ">
    <H3>パート1 </ H3>
    <DIV>
      <P> Mauris maurisアンティ、blanditら、ultrices、suscipit eget、QUAM。整数UTのneque。VivamusのNiSi metus、molestieのVELは、中、エロスsuscipit AMET、NUNC。ナムNIBH。〜している間に座ってcondimentum妊婦。ナムマイルを。Proin viverraレオUTのodio。Curabiturのmalesuada。前庭velit EUアンティscelerisque vulputateます。</ p>
    </ DIV>
  </ DIV>
  <DIVクラス= "グループ">
    <H3>パート2 </ H3>
    <DIV>
      <P> sedの非urna。〜している間らアンティ。Phasellus EU小舌。前庭AMET座るプルス。Vivamus hendrerit、aliquetのlaoreet、maurisのturpisのporttitorのvelit、faucibus interdum TELLUSリベロ交流フストでの嘆き。Vivamus非QUAM。urna faucibus suscipitで。< / P>
    </ DIV>
  </ DIV>
  <DIVクラス= "グループ">
    <H3>セクション3 </ H3>
    <DIV>
      <P>ナムenimの笑い、molestieら、ポルタ・交流、aliquam交流、笑い。Quisqueのlobortis。Phasellus pellentesqueプルスでマッサ。Aenean pedeインチPhasellus交流リベロ交流TELLUS pellentesqueゼンパー。セッド交流フェリス。セッドのcommodo、マグナQUIS切れ込みornare 、QUAMアンティaliquamのNiSi、EU iaculisレオプルスがvenenatis DUIます。</ p>
      <UL>
        <李>リスト項目1 </ LI>
        <李>リスト項目2ます。</ li>
        <李>リスト項目3ます。</ li>
      </ UL>
    </ DIV>
  </ DIV>
  <DIVクラス= "グループ">
    <H3>パート4 </ H3>
    <DIV>
      <P> CRAS格言Pellentesque住人morbusの複数形tristique senectusらnetusらmalesuadaのFAME交流turpis性排出物前庭アンティイプサムprimis faucibus orci luctusらultricesお問い合わせ今cubilia Curaeで; .. Aenean切れ込みmauris VEL ESTます。</ p> <p> Suspendisse EUのnisl。 。NullamのUTのリベロ。整数dignissim consequat lectus。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたります。</ p>
    </ DIV>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>