0

何かの助けが必要です。同じページに 3 つまたは 4 つの jScrollPanes があり、次のようなものが作成されます。

@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();

それは機能しますが、最初のリストのみをスクロールし、その後はスクロールしません。

それらすべてを均等にスクロールできるようにしようとしています。これについて何か助けていただければ幸いです。

ありがとう

4

3 に答える 3

1

1）各ペインに個別のIDを追加します

2) すべてのペインを一度に変更する独自の関数 PanesMover(X) を記述します。関数では、各ペインを同じ X (関数の引数として受け取った) に、ID ごとに別々に移動します。

3) ドキュメント PanesMover(X) を呼び出します。ここで、X は移動のパラメーターであり、すべてのペインに適用されます。

于 2012-05-02T00:20:15.120 に答える
1

元のコードが機能しなかった理由は、.data() メソッドがどのように機能するかです。http://api.jquery.com/data/を参照してください:「jQuery コレクションの最初の要素の名前付きデータ ストアで値を返します...」 pane.data('jsp') を呼び出すと、API のみが返されますコレクションの最初の要素 (最初のペインのみがスクロールされるのはそのためです)。コレクション内のすべての要素に対して API でメソッドを実行するには、要素を 1 つずつループする必要があります。.each() を使用してそれを行うことができます

$(".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-02T22:26:01.417 に答える
0

回答＃1に続いて、簡略化した形式で行ったことを次に示します。

まず、同時にスクロールしたいすべての要素に一意の ID を付けましたが、それらはすべて同じクラスを使用しています。

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

次に、前と同じように jScrollPane でペインを初期化しました。

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

次に、次のような配列を使用して、各要素の一意の ID に対して個別の jScrollPane API を初期化しました。

var jspAPI = new Array();

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

それだけです。すべてをスクロールしたいときは、ループですべてを繰り返しました

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

以前にこれをやりたいと思って助けを求めた人を見つけることができなかったことに驚いていますが、これが他の誰かの助けになることを願っています.

于 2012-05-02T20:20:54.467 に答える