Слайд-шоу JQuery Tools нельзя дважды прикрепить к одному и тому же элементу?

Я использую инструменты 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>

javascript jquery jquery-tools
person ElspethClio    schedule 14.01.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Используйте функцию removeData, чтобы очистить существующее слайд-шоу:

$("#viewtabs").data("slideshow").stop(); // Stop slideshow
$("#viewtabs").removeData('slideshow');
person The Scrum Meister    schedule 14.01.2011