jquery - JQueryアコーディオン:ダイアログボックスに埋め込む方法は?

Question

3 つのセクションを持つアコーディオンを含むダイアログ ボックスをデザインしたいのですが、これを実現する方法を知っている人はいますか? 私はJQueryアコーディオンの例を試していますが、まだ成功していません。これに関するあなたのアイデアに感謝します。

Answer 1

ポップアップボックスに埋め込もうとしている場合は、それをalert()行うことはできません。最善の策は、独自のモーダルポップアップを作成することです。

jQuery UIのダイアログhttp://jqueryui.com/demos/dialog/を使用することは、多くのオンラインドキュメントと使用法を備えた優れたベースですが、自分でオーバーレイを作成することもできます。これは、jQueryを使用して、他のすべての上に絶対に配置するDIVを作成することを意味します。

$("body").append("<div id='modal'>All of your markup</div>");

スタイルシートのモーダルウィンドウにCSSを使用すると、次のようになります。

#modal {
  position:absolute; /* could be 'fixed', but then you have to deal with browsers */
  top:10%;
  left:25%;
  width:50%;
  height:500px;
  overflow:auto;
}

等々。

Answer 2

簡単な方法

$('#someDiv').accordion().dialog();

3項目セクションの場合

<div id="someDiv">
  <h3><a href="#">Section 1</a></h3>
  <div>Section 1 content</div>
  <h3><a href="#">Section 2</a></h3>
  <div>Section 2 content</div>
  <h3><a href="#">Section 3</a></h3>
  <div>Section 3 content</div>
</div>

カスタマイズしたくなるはずです。

$('#someDiv')
  .accordion({
    active: 2,
    collapsible: true
  })
  .dialog({
    width: 500,
    height: 350,
    title: 'Some title'
  });

幸運を！

Answer 3

このリンクをチェックしてください。ページの約半分が良い例です