0

JQueryUI ウィジェット内に 4 つのページング ボタン (First、Prev、Next、Last) を作成し、コードの繰り返しをできるだけ少なくしたいと考えています。次のような実例があります (ウィジェット ファクトリ プラグインの関数内):

    var pager = document.createElement( 'span' );

    var names = ['start','prev','next','end'];
    var labels = ['First','Prev','Next','Last'];

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
        this._on(pagerButton, {
            click: function(event) {
                alert('You clicked ' + event.target.name);
            }
        });  
    }
    this.element.find('.pager').empty().append(pager);

これには私が必要とする機能がありますが、JQuery でこれを行うにはもっと簡潔な方法が必要だと思います。

注意: 注意すべき点:

  1. 当然、アラートはより便利な機能に置き換えられます。
  2. 多言語が必要な場合に備えて、名前とラベルを分けてください。
  3. jqGrid と datatables を見てきました。もっと単純なもの (ajax、ページング、ソートのみ) が必要ですが、これは私にとって学習課題です (仕事用ではありません)。サードパーティの JQuery ライブラリの推奨事項は必要ありません。
  4. 上記のコード スニペットで犯した異端を遠慮なく指摘してください。

更新 さて、私はイベント宣言をループから抜け出す方法を考え出しました:

        this._on(pager, {
            'click button': function(event) {
                alert('You clicked ' + event.currentTarget.name);
            }
        });

(currentTarget は提案どおりに使用されます)。

それは私に残します:

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
    }

これはおそらく問題ありません。「よりjquery」な方法があるかもしれないと思っただけです（つまり、選択したすべての要素に適用される巧妙な関数のいくつかを使用します.

4

1 に答える 1

1

正確なシナリオがないので正確に言うのは難しいので、私がやろうとしていることを書いているだけです.

まず第一に、あなたのコードは私にとって見栄えがします。ここにjsFiddleがあります

ご覧のとおり、 currentTarget は作成したボタンであり、 target は派手なボタンを表示するために作成されたスパン $UI であるため、event.targetに変更しました。event.currentTarget

私のHtmlレイアウトの最初は以下になります

<div class="data" data-currentPage="0" data-currentData="/personal">
   <div class="list"></div>
   <div class="pager">Where your buttons will be</div> 
</div>

その理由は、1 つのページで独立した複数のリストを使用するためです。ボタン イベントでは、$(event.currentTarget).parent("div.data") でメインの div に到達でき、currentPage と currentData に従って、現在のデータに必要なものを要求できます。URL とポスト リクエストを使用します。ページデータを送ります。ただし、列挙型カテゴリの単純なテキストを使用して、パラメーターとして送信するだけです。また、JSON オブジェクトをデータに保持することもできるので、それはあなた次第です。

current-page と data を使用してデータを取得するには、div.list の完全な html を取得して直接バインドするか、JSON リスト オブジェクトを返して JS ループでバインドします。たとえば、MVC Web API を既に持っている場合は、それを使用してデータを取得するだけです。

多言語サポートのために、私はそのようなことを開発したことはありませんが、以下は私のコードです。

言語を維持するには

var labelsData = {};
labelsData["en"] = ['First','Prev','Next','Last'];
labelsData["fr"] = ['le First','le Prev','le Next','le Last'];

クライアント言語を見つけるには、次のコードを使用できます

//jQuery probably have something short for the below line but logic is the same
//just find out en-US or just en
var language = window.navigator.userLanguage || window.navigator.language;
language = language.split("-")[0];
var labels = labelsData[language]; // labels so you can use your code
if (!labels)
    labels = labelsData["en"]; //Default

言語がバックエンドによって決定される場合は、代わりにレンダリングするだけです。

お役に立てれば。

于 2013-06-17T00:54:24.050 に答える