Question

我希望在JQueryUI小部件（First，Prev，Next，Last）中创建4个分页按钮，尽可能少重复代码。我有一个像这样的工作示例（在widget工厂插件的函数中）：

    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。

注意：有些要点需要注意：

当然，警报将被更有用的功能所取代。
名称和标签分开。
我查看了jqGrid和datatables。我想要更简单的东西（只是ajax，分页，排序），这对我来说是一个学习练习（它不适合工作）。我不需要第三方JQuery库的建议。
请在上面的代码段中指出我提交的任何异端。

UPDATE 好吧，我研究了如何从循环中获取事件声明：

        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”的方式（即使用一些适用于所有选定元素的聪明函数。

Answer 1

很难说完全正确，因为没有确切的情况所以我只是在写我会做什么。

首先，你的代码对我来说很好看。 here is jsFiddle

您可以看到我已将event.target更改为event.currentTarget，因为currentTarget是您创建的按钮，target是为显示精美按钮而创建的span $ UI。

我的第一个Html布局将在

之下

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

你在一个页面中使用in-depended多列表的原因。在按钮事件中，您可以通过$（event.currentTarget）.parent（“div.data”）到达主div，并根据currentPage和currentData，您可以请求任何您想要的当前数据我将使用URL和发布请求我会发送页面数据。但你只需使用枚举类别的简单文本并将其作为参数发送。你也可以在数据中保留一个JSON对象，这取决于你。

要使用当前页面和数据获取数据，您可以获得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

如果语言由后端确定，则只需渲染它。

希望这会有所帮助。

如何使用JQuery创建多个（类似）按钮

1 个答案: