JQuery Tools Diashow kann nicht zweimal an dasselbe Element angefügt werden?

Ich verwende jQuery Tools (http://flowplayer.org/tools/tabs/), um eine Diashow zu erstellen. Eine Diashow in jQuery Tools ist eine Erweiterung des Tabs-Plugins, also erstellen Sie zuerst Ihre Tabs (auf einem Container-Element, UL # viewtabs) und richten Sie dann eine Diashow auf demselben Element ein. Für ein Projekt, an dem ich gerade arbeite, muss ich irgendwann die Diashow anhalten und das Verhalten der Tabs zerstören (das Element wird immer noch angezeigt, hört aber auf, sich wie Tabs zu verhalten). Dann, weiter, ich muss das Verhalten der Registerkarten wieder an das gleiche Element UL # Viewtabs, dann die Diashow. Es funktioniert gut für die Registerkarten, aber nicht für die Diashow. Ich habe unten einen einfachen Testfall erstellt, um das Problem zu zeigen.JQuery Tools Diashow kann nicht zweimal an dasselbe Element angefügt werden?

Ich würde wirklich Ihre Hilfe zu schätzen wissen!

<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>

Quelle

2011-01-14 ElspethClio

Verwenden Sie die removeData Funktion der bestehenden Diashow zu löschen:

$("#viewtabs").data("slideshow").stop(); // Stop slideshow 
$("#viewtabs").removeData('slideshow');

Quelle

2011-01-14 23:47:27

Es funktioniert. Vielen Dank! – ElspethClio

JQuery Tools Diashow kann nicht zweimal an dasselbe Element angefügt werden?

Antwort

Verwandte Themen