0

jQuery ツール ( http://flowplayer.org/tools/tabs/ ) を使用してスライドショーを作成しています。jQuery Tools のスライドショーはタブ プラグインの拡張機能であるため、最初にタブを作成し (コンテナ要素、UL#viewtabs で)、次に同じ要素でスライドショーを設定します。現在取り組んでいるプロジェクトでは、ある時点でスライドショーを停止し、タブの動作を破棄する必要があります (要素は引き続き表示されますが、タブとしての動作を停止します)。次に、タブの動作を同じ要素 UL#viewtabs に再アタッチし、次にスライドショーにアタッチする必要があります。タブでは問題なく機能しますが、スライドショーでは機能しません。問題を示すために、以下の簡単なテスト ケースを作成しました。

よろしくお願いします。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; iso-8859-1" />
    <style type="text/css">
    <!--
    ul {position: absolute; top: 20px; left: 20px; margin: 0; padding: 0; list-style: none;}
    li {float: left; margin: 0 1px 0 0; padding:4px; background-color: #CCC; list-style: none; text-align: center; cursor: pointer;}
    li.current {background-color:#999; }
    #viewpanes {position: absolute; top: 60px; left: 20px; width: 640px; height: 400px; border: solid 1px #000;}
    .viewpane {background-color: #69F; line-height: 400px; text-align: center;}
    -->
    </style>
  </head>
  <body>
    <ul id="viewtabs">
      <li>Tab 0</li>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
      <li>Tab 5</li>
      <li>Tab 6</li>
    </ul>
    <div id="viewpanes">
      <div class="viewpane">Pane 0</div>
      <div class="viewpane">Pane 1</div>
      <div class="viewpane">Pane 2</div>
      <div class="viewpane">Pane 3</div>
      <div class="viewpane">Pane 4</div>
      <div class="viewpane">Pane 5</div>
      <div class="viewpane">Pane 6</div>
    </div>

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
    <script type="text/javascript"">
    //<![CDATA[
    (function($) {
        $(document).ready(function() {
        $("#viewtabs").tabs(".viewpane",{ rotate: true }); // Create tabs
        $("#viewtabs").slideshow({ // Create slideshow and launch
          autoplay: true,
          autopause: false,
          interval: 500,
          onBeforePlay: function() { alert("Start"); }
        });
        // Let the slideshow play for a few seconds then...
        window.setTimeout(function() {
            $("#viewtabs").data("slideshow").stop(); // Stop slideshow
            $("#viewtabs").data("tabs").destroy(); // Destroy tabs

            $("#viewtabs").tabs(".viewpane",{ rotate: true }); // Create tabs again (OK)
          $("#viewtabs").slideshow({ // Create slideshow again and launch... Doesn't work :-(
            autoplay: true,
            autopause: false,
            interval: 250,
            onBeforePlay: function() { alert("Start again"); }
          });
        }, 5000);
      });
    }(jQuery));
    //]]>
    </script>
  </body>
</html>
4

1 に答える 1

0

関数を使用してremoveData、既存のスライドショーをクリアします。

$("#viewtabs").data("slideshow").stop(); // Stop slideshow
$("#viewtabs").removeData('slideshow');
于 2011-01-14T23:47:27.503 に答える