jQuery jFlow插件。我如何在單個頁面上使用多個頁面？

Question

我使用了一個名爲jFlow的非常可愛又簡單的插件，它爲我提供了一個基本的內容滑塊等。但是，我沒有看到任何文檔或有關如何在同一時間單獨工作兩個（或更多）從另一個。

目前，如果我設置了兩個，它們幾乎組合爲一個，儘管彼此具有不同的配置。

任何幫助將是偉大的，謝謝。 Michael。

Answer 1

問題是，它沒有設置爲多個。

你不能有相同的ID兩個元素，所以儘量將事情哪裏找呢，使用類在可能的情況（

$(function() { 
    $("div#controller").jFlow({ 
     slides: "#slides", <-- try this as .slides 
     width: "980px", 
     height: "313px" 
    }); 
}); 

有許多很好的替代品這個腳本，它可能是值得。考慮的jCarousel，一個

http://sorgalla.com/jcarousel/

Answer 2

我剛纔作戰這個和蒂姆說，他們關鍵是使用類，獨立的ID和jFlow的每個實例定義的一切，就像這樣：

$(function() { 
     $("#controller1").jFlow({ 
      controller: ".jFlowControl1", 
      slides: "#slides1", 
      slideWrapper : "#jFlowSlide1", 
      width: "300px", 
      height: "280px", 
      prev: ".jFlowPrev1", 
      next: ".jFlowNext1" 
     }); 
     $("#controller2").jFlow({ 
      controller: ".jFlowControl2", 
      slides: "#slides2", 
      slideWrapper : "#jFlowSlide2", 
      width: "300px", 
      height: "280px", 
      prev: ".jFlowPrev2", 
      next: ".jFlowNext2" 
     }); 
     $("#controller3").jFlow({ 
      controller: ".jFlowControl3", 
      slides: "#slides3", 
      slideWrapper : "#jFlowSlide3", 
      width: "300px", 
      height: "280px", 
      prev: ".jFlowPrev3", 
      next: ".jFlowNext3" 
     }); 
    }); 

而且滑塊是這個樣子：

<div id="controller1" class="hidden"> 
    <span class="jFlowControl1">No 1</span> 
    <span class="jFlowControl1">No 2</span> 
    <span class="jFlowControl1">No 3</span> 
</div> 
<div id="slides1"> 
     <img src="images/1.jpg" /> 
     <img src="images/2.jpg" /> 
     <img src="images/3.jpg" /> 
</div> 

<!-- second controller and slides --> 
<div id="controller2" class="hidden"> 
    <span class="jFlowControl2">No 1</span> 
    <span class="jFlowControl2">No 2</span> 
    <span class="jFlowControl2">No 3</span> 
</div> 
<div id="slides2"> 
    <img src="images/1.jpg" /> 
    <img src="images/2.jpg" /> 
    <img src="images/3.jpg" /> 
</div> 

<!-- third controller and slides --> 
<div id="controller3" class="hidden"> 
    <span class="jFlowControl3">No 1</span> 
    <span class="jFlowControl3">No 2</span> 
    <span class="jFlowControl3">No 3</span> 
</div> 
<div id="slides3"> 
    <img src="images/1.jpg" /> 
    <img src="images/2.jpg" /> 
    <img src="images/3.jpg" /> 
</div> 

所以幾乎所有有你想後1，2或3，或者然而，許多jFlow滑塊。

如果你想在前面和後面的這些會以同樣的方式進行定義的工作，像這樣：

<!-- first slider --> 
<span class="jFlowPrev1">&lt;</span> 
<span class="jFlowNext1">&gt;</span> 

<!-- second slider --> 
<span class="jFlowPrev2">&lt;</span> 
<span class="jFlowNext2">&gt;</span> 

<!-- third slider --> 
<span class="jFlowPrev3">&lt;</span> 
<span class="jFlowNext3">&gt;</span> 

Answer 3

我所做的就是創建另一個jquery.flow2.1.2文件，把它放在頭部分：

並修改了必要的。下面是該腳本：

/*版權所有（C）2008基恩龍譚http://www.gimiti.com/kltan *麻省理工學院（http://www.opensource.org/licenses/mit-license.php） * jFlow 下許可*版本：1.2（2008年7月7日） *需要：jQuery的1.2+ */

（函數（$）{

$.fn.jFlow2 = function(options) { 
    var opts = $.extend({}, $.fn.jFlow2.defaults, options); 
    var randNum = Math.floor(Math.random()*11); 
    var jFC = opts.controller2; 
    var jFS = opts.slideWrapper2; 
    var jSel = opts.selectedWrapper2; 

    var cur = 0; 
    var maxi = $(jFC).length; 
    // sliding function 
    var slide = function (dur, i) { 
     $(opts.slides2).children().css({ 
      overflow:"hidden" 
     }); 
     $(opts.slides2 + " iframe").hide().addClass("temp_hide"); 
     $(opts.slides2).animate({ 
      marginLeft: "-" + (i * $(opts.slides2).find(":first-child").width() + "px")}, 
      opts.duration*(dur), 
      opts.easing, 
      function(){ 
       $(opts.slides2).children().css({ 
        overflow:"auto" 
       }); 
       $(".temp_hide").show(); 
      } 
     ); 

    } 
    $(this).find(jFC).each(function(i){ 
     $(this).click(function(){ 
      if ($(opts.slides2).is(":not(:animated)")) { 
       $(jFC).removeClass(jSel); 
       $(this).addClass(jSel); 
       var dur = Math.abs(cur-i); 
       slide(dur,i); 
       cur = i; 
      } 
     }); 
    }); 

    $(opts.slides2).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS); 

    $(opts.slides2).find("div").each(function(){ 
     $(this).before('<div class="jFlowSlideContainer2"></div>').appendTo($(this).prev()); 
    }); 

    //initialize the controller 
    $(jFC).eq(cur).addClass(jSel); 

    var resize = function (x){ 
     $(jFS).css({ 
      position:"relative", 
      width: opts.width, 
      height: opts.height, 
      overflow: "hidden" 
     }); 
     //opts.slides or #mySlides container 
     $(opts.slides2).css({ 
      position:"relative", 
      width: $(jFS).width()*$(jFC).length+"px", 
      height: $(jFS).height()+"px", 
      overflow: "hidden" 
     }); 
     // jFlowSlideContainer 
     $(opts.slides2).children().css({ 
      position:"relative", 
      width: $(jFS).width()+"px", 
      height: $(jFS).height()+"px", 
      "float":"left", 
      overflow:"auto" 
     }); 

     $(opts.slides2).css({ 
      marginLeft: "-" + (cur * $(opts.slides2).find(":eq(0)").width() + "px") 
     }); 
    } 

    // sets initial size 
    resize(); 

    // resets size 
    $(window).resize(function(){ 
     resize();       
    }); 

    $(opts.prev2).click(function(){ 
     if ($(opts.slides2).is(":not(:animated)")) { 
      var dur = 1; 
      if (cur > 0) 
       cur--; 
      else { 
       cur = maxi -1; 
       dur = cur; 
      } 
      $(jFC).removeClass(jSel); 
      slide(dur,cur); 
      $(jFC).eq(cur).addClass(jSel); 
     } 
    }); 

    $(opts.next2).click(function(){ 
     if ($(opts.slides2).is(":not(:animated)")) { 
      var dur = 1; 
      if (cur < maxi - 1) 
       cur++; 
      else { 
       cur = 0; 
       dur = maxi -1; 
      } 
      $(jFC).removeClass(jSel); 
      slide(dur, cur); 
      $(jFC).eq(cur).addClass(jSel); 
     } 
    }); 
}; 

$.fn.jFlow2.defaults = { 
    controller2: ".jFlowControl2", // must be class, use . sign 
    slideWrapper2 : "#jFlowSlide2", // must be id, use # sign 
    selectedWrapper2: "jFlowSelected2", // just pure text, no sign 
    easing: "swing", 
    duration: 400, 
    width: "100%", 
    prev2: ".jFlowPrev2", // must be class, use . sign 
    next2: ".jFlowNext2" // must be class, use . sign 
}; 
})(jQuery); 

它的工作，你有一個單頁:)在儘可能多的滑塊