0

Cycle2 ( http://jquery.malsup.com/cycle2/ ) を使用して、Web サイトでウィザードのようなナビゲーションを作成しています。次のスライドに移行する前に、次のボタンをクリックしているときに現在のスライドを検証したいと考えています。

イベントを発生させて条件を実行しようとしましたcycle-beforeが、実際に遷移を停止する方法がわかりません。発砲時に次のようなコマンドが.cycle('stop')機能しないようですcycle-before- 次のスライドに進みます。

[次へ] ボタンの使用を許可する前に、スライドのいくつかの入力フィールドを検証する必要があります。

現在のセットアップは次のとおりです。

<div id="questions" class="cycle-slideshow"
         data-allow-wrap="false"
         data-cycle-caption="#question-progress"
         data-cycle-caption-template="Question {{slideNum}} of {{slideCount}}"
         data-cycle-slides="div.question"
         data-cycle-fx="scrollHorz"
         data-cycle-timeout="0"
         data-cycle-next="#next-question">

         <div class="question"> ... </div>
         <div class="question"> ... </div>
         <div class="question"> ... </div>

</div>

<a id="next-question" href="#">Next question</a>

何か案は?

4

1 に答える 1

1

data-cycle-next="#next-question"これを行う方法は、スライドショーの定義からを削除し、代わりにNext Questionボタンに独自のクリック ハンドラーを記述することです。そうすれば、データが有効であることがわかるまで移行を開始しません。

$('#next-question').click(function(){
  //Do validation

  //If valid, go to next slide
      $('.cycle-slideshow').cycle('next');
});
于 2014-03-10T20:39:49.163 に答える