內容面板切換及SwipeJS

Question

我試圖用一個內容面板開關（http://code.google.com/p/jquery-content-panel-switcher/）和Swipejs（http://swipejs.com/）在一起。我能夠讓這兩個獨立工作，但是當我將swipejs代碼放入其中一個內容面板時，代碼會中斷。我假設必須與jQuery產生衝突，但我對jQuery相當陌生，而且我一直在試圖調試問題。以下是我目前的代碼。謝謝你的幫助。

<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.content-panel-switcher.js'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
    jcps.fader(300, '#switcher-panel', '.set1'); 
    jcps.slider(500, '#switcher-panel2', '.set2'); 
}); 
</script> 

<table> 
<tr> 
<td> 
<div class="block mid margin_auto"> 
    <div class="header"> 
     <div class="nav_buttons"> 
      <a id="set1panel1" class="switcher set1">Home</a> 
      <a id="set1panel2" class="switcher set1">Photography</a> 
      <a id="set1panel3" class="switcher set1">Design</a> 
     </div> 
    </div> 
     <div id="switcher-panel"></div> 

     <!-- Dummy Data --> 
     <div id="set1panel1-content" class="switcher-content set1 show"> 
      <h2>Set 1 Panel 1</h2> 
      Set 1 Panel 1 content goes here..... 
      <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> 
       <div class='swipe-wrap'> 
        <div><b>0</b></div> 
        <div><b>1</b></div> 
        <div><b>2</b></div> 
        <div><b>3</b></div> 
        <div><b>4</b></div> 
        <div><b>5</b></div> 
       </div> 
      </div> 
      <div style='text-align:center;padding-top:20px;'> 
       <button onclick='mySwipe.prev()'>prev</button> 
       <button onclick='mySwipe.next()'>next</button> 
      </div> 
     </div> 
     <div id="set1panel2-content" class="switcher-content set1"> 
     <h2>Set 1 Panel 2</h2> 
      Set 1 Panel 2 content goes here..... 
     </div> 
     <div id="set1panel3-content" class="switcher-content set1"> 
     <h2>Set 1 Panel 3</h2> 
      Set 1 Panel 3 content goes here..... 
     </div> 
</div> 
</td> 
<td> 
<div class="block mid margin_auto"> 
    <div class="header"> 
     <div class="nav_buttons"> 
      <a id="set2panel1" class="switcher set2">Experience</a> 
      <a id="set2panel2" class="switcher set2">Sports</a> 
      <a id="set2panel3" class="switcher set2">Hobbies</a> 
     </div> 
    </div> 
     <div id="switcher-panel2"></div> 

     <!-- Dummy Data --> 
     <div id="set2panel1-content" class="switcher-content set2 show"> 
     <h2>Set 2 Panel 1</h2> 
     Set 2 Panel 1 content goes here..... 
      <div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'> 
       <div class='swipe-wrap'> 
        <div><b>A</b></div> 
        <div><b>B</b></div> 
        <div><b>C</b></div> 
        <div><b>D</b></div> 
        <div><b>E</b></div> 
       </div> 
      </div> 
      <div style='text-align:center;padding-top:20px;'> 
       <button onclick='mySwipe.prev()'>prev</button> 
       <button onclick='mySwipe.next()'>next</button> 
      </div> 
     </div> 
     <div id="set2panel2-content" class="switcher-content set2"> 
     <h2>Set 2 Panel 2</h2> 
     Set 2 Panel 2 content goes here..... 
     </div> 
     <div id="set2panel3-content" class="switcher-content set2"> 
     <h2>Set 2 Panel 3</h2> 
     Set 2 Panel 3 content goes here..... 
     </div> 
</div> 
</td> 
</tr> 
</table> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src='js/swipe.js'></script> 
<script> 
// pure JS 
var elem = document.getElementById('mySwipe'); 
window.mySwipe = Swipe(elem, { 
    startSlide: 0, 
    // auto: 3000, 
    // continuous: true, 
    // disableScroll: true, 
    // stopPropagation: true, 
    // callback: function(index, element) {}, 
    // transitionEnd: function(index, element) {} 
}); 
// with jQuery 
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe'); 
</script> 
<script> 
// pure JS 
var elem = document.getElementById('mySwipe2'); 
window.mySwipe2 = Swipe(elem, { 
    startSlide: 0, 
    // auto: 3000, 
    // continuous: true, 
    // disableScroll: true, 
    // stopPropagation: true, 
    // callback: function(index, element) {}, 
    // transitionEnd: function(index, element) {} 
}); 
// with jQuery 
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe'); 
</script> 

Answer 1

這兩個插件的技術之間的衝突，而不是jQuery中的任何東西。

兩個大問題：

1）元素的div＃mySwipe（2）必須在網頁上顯示時，他們設置（）函數被調用。滑動需要這個，所以它可以計算幻燈片的寬度。刷新開始時會調用setup（），當您切換瀏覽器選項卡時，它也會在頁面大小調整和某些瀏覽器中觸發。你也可以把它自己mySwipe.setup（）

內容面板的CSS，隱藏.switcher內容內的一切。這兩個滑動div都在這樣一個班級。

您可以通過內容面板後初始化刷卡解決這個問題，這將是一個短期修復儘管如此，由於問題的兩種。

2）內容面板似乎由具有顯示器的div，並根據需要複製來自切換內容的div內容工作。如果內容面板初始化後輕掃你實際上將初始化刷卡面板上覆制，一旦你離開導航到不同的面板此副本會丟失，當您導航回到你將再次獲得一個破刷卡。

需要發生的是：

1. 刷卡時呼籲建立最初它需要在可見的div
2. 修改swipe.js使頁面調整大小事件調用如果，檢查包裝函數滑動div是可見的，如果不是，則什麼都不做。
3. 理想的呼叫建立的每次刷卡面板可見

這三個任務需要改變你所選擇的插件的代碼。

要調試我推薦的各種瀏覽器開發工具的問題。使用inspect元素工具可以讓你看到插件生成的html，也就是說，你會看到swipe將寬度設置爲0而不是3000，當它是一個隱藏的div。使用Javascript調試可以讓您刷新滑動代碼的設置方法並查看原因。