jScrollPane（jQuery）同時滾動內容窗格API中的所有項目

我需要一些幫助。我有在同一頁上3個或4 jScrollPanes，像這樣創建它們：jScrollPane（jQuery）同時滾動內容窗格API中的所有項目

@foreach (var thing in Model.things) 
{ 
    <div class="scrollPanes"> 
     <ul> 
      <li>Model.Item</li> 
     </ul> 
    </div> 
}

我的CSS像（這些窗格水平滾動條）：

.scrollPanes 
{ 
    overflow: auto; 
    width: 100%; 
} 

ul 
{ 
    list-style: none; 
    height: 50px; 
    width: 1000px; 
    margin: 0; 
    padding: 0; 
}

這裏是我如何初始化JScrollPane的

var settings = { hideFocus: true }; 
// Notice how all the elements with class "scrollPane" become a jscrollpane 
var pane = $('.scrollPanes').jScrollPane(settings); 
var api = pane.data('jsp'); 
api.reinitialise();

因此，這使得每一個scrollPane，他們都工作得很好，因爲我期望他們。

我想要做的是使用jScrollPane().scrollToX(xxx);或jScrollPane().scrollByX(xxx);

滾動一個等號增量元素的所有當我調用該方法：

api.scrollByX(200); api.reinitialise();

這樣的作品，但只有它滾動第一個列表，之後沒有任何列表。

我試圖讓它滾動所有他們平等，我真的很感激任何幫助。

感謝

來源

2012-05-01 bbedward

原始代碼無法工作的原因是由於.data（）方法的工作原理。請參閱http://api.jquery.com/data/：「返回jQuery集合中第一個元素的指定數據存儲處的值...」調用窗格時。數據（'jsp'），它只返回集合中第一個元素的API（這就是爲什麼只有第一個窗格爲你滾動）。要爲集合中的每個元素在API上運行方法，您需要逐個遍歷元素。你可以通過使用。每（）

$(".jpanes").each(function() { 
    $(this).data("jsp").scrollByX(200); 
});

或者，如果您打算重複調用的API，你可以得到的API的數組，當您需要調用，然後用一個for循環。

// Store an array of APIs for each element 
var apis = $(".jpanes").map(function() { 
    return $(this).data("jsp"); 
}).get(); 

// Call an API method for each element 
for (var i = 0, api; api = apis[i]; i++) { 
    api.scrollByX(200); 
}

來源

2012-05-02 22:26:01 thirdender

謝謝，不得不接受你的答案，因爲它是最正確和最好的答案。我沒有創建所有的api對象，而是採用了你的第一個建議，因爲它更適合我的需求，並且非常感謝。我想象得更清潔，可能也更高效。 – bbedward

1）添加到每個窗格單獨的ID

2）寫自己的函數PanesMover（X）在一次改變所有窗格。在函數中移動每個窗格在同一個X（recived作爲函數參數），分隔它的ID

3）調用文檔PanesMover（X），其中X是移動的參數，將應用於所有窗格。

來源

2012-05-02 00:20:15 DaneSoul

謝謝，這是我做的，但我會寫我自己的答案也一樣，我還沒有發現ANYBODY談論這樣暢遊網絡上的其他人。 – bbedward

以下是答案＃1所做的簡化形式。

首先，我在所有我想同時滾動的元素上附加了唯一的ID，但它們都使用相同的類。

@{ int paneID = 0; } 
@foreach (var thing in Model.things) 
{ 
    <div id="@paneID" class="jpanes"> 
     <ul> 
      <li>Item</li> 
     </ul> 
    </div> 
    paneID++; 
}

然後我初始化JScrollPane的窗格如前：

var jspAPI = new Array(); 

$('.jpanes').each(function(index) { 
    jspAPI[index] = $('#'+$(this).attr('id')).data('jsp'); 
}

：

$('.jpanes').jScrollPane();

然後，我使用陣列，像這樣初始化爲每個元素的唯一ID的單獨JScrollPane的API

就是這樣，當我想要滾動它們時，我全部遍歷所有循環

for (var i=0; i < jspAPI.length; i++) { 
    jspAPI[i].scrollByX(10); 
}

我很驚訝我找不到任何人曾經想要這樣做，並尋求幫助，但希望這可以幫助別人。

來源

2012-05-02 20:20:54 bbedward

jScrollPane（jQuery）同時滾動內容窗格API中的所有項目

回答

相關問題