1

私は検索しましたが、これを行う例は見つかりませんでした。jQM 用にダイアログ ボックスを開き、1 つのダイアログ ボックス内で段階的なプロセスを実行できるようにしたいと考えています。これには複数のダイアログ ボックスを 1 つのダイアログ ボックスに読み込む必要があると考えていますが、これが可能かどうかはわかりません。jQM で Backbone を使用しており、各ステップのダイアログ ボックスでアンダースコア テンプレートをロードできるようにしたいと考えています。ダイアログボックスで4〜5ステップになると思います。

これは可能ですか？

ありがとうございました。

4

1 に答える 1

1

.show()と を使用した例を次に示し.hide()ます。ここでのコツは、いくつかの div を作成してから、それらを表示/非表示にすることです。

ワーキングデモ

マークアップ

<div data-role="dialog" id="dialog">
 <div data-role="header" data-theme="d">
  <h1>Dialog</h1>
 </div>

<!-- First Page -->
 <div data-role="content" id="page1">
  <h3>Page 1</h3>
  <p>Text for #page1</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

<!-- Second Page -->

<div data-role="content" id="page2">
  <h3>Page 2</h3>
  <p>Text for #page2</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

<!-- Third Page -->
<div data-role="content" id="page3">
  <h3>Page 3</h3>
  <p>Text for #page3</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

</div>

コード

// hide previous button, #page2 and #page3 once opened
$('#dialog').find('#page1 a.prev').hide();
$('#page2, #page3').hide();

// #page1 to #page2
$('#page1 a.next').on('click', function () {
 $('#page1').hide();
 $('#page2').show();
});

// #page2 to #page3
$('#page2 a.next').on('click', function () {
 $('#page1, #page2').hide();
 $('#page3').show();
 $('#dialog').find('#page3 a.next').hide();
});

// #page2 to #page1
$('#page2 a.prev').on('click', function () {
 $('#page2').hide();
 $('#page1').show();
});

// #page3 to #page2
$('#page3 a.prev').on('click', function () {
 $('#page2, #page3').hide();
 $('#page2').show();
});
于 2013-04-09T14:24:44.470 に答える