Объединение нескольких операторов пользовательского интерфейса JQuery для настройки элементов управления Button

Question

Я довольно новичок в JQuery и JQuery-UI, но пока мне это нравится. Однако мои навыки работы с Javascript немного устарели, поэтому некоторые вещи вызывают у меня головную боль.

Я использую Jquery UI для создания темы моего сайта, и у меня есть несколько кнопок, которые я хочу настроить для соответствующей темы. Каждая кнопка имеет свой значок, поэтому я получил несколько утверждений, которые выглядят так:

<script type="text/javascript">
    $(function() {
        $('[id$="butFind"]').button({
            icons: {
                primary: 'ui-icon-search'
            }
        });
    });
    $(function() {
        $('[id$="butUpdate"]').button({
            icons: {
                primary: 'ui-icon-disk'
            }
        });
    });
    $(function() {
        $('[id$="butCancel"]').button({
            icons: {
                primary: 'ui-icon-cancel'
            }
        });
    });
// and so on for several more controls
</script>

Я использую селектор [id $ =] («Идентификатор заканчивается на») в качестве элементов управления, которые я использую, - это ASP.NET LinkButtons на странице содержимого, основанной на главной странице, и они переименовываются при отображается что-то вроде "ctl00_ContentPlaceHolder1_butFindSku". Разметка ASP.NET для кнопок довольно проста и выглядит следующим образом:

<asp:LinkButton ID="butUpdate" runat="server" Text="Update" 
   CommandName="Update"  />
<asp:LinkButton ID="butCancel" runat="server" Text="Cancel" 
   CommandName="Cancel" />

Множество функций, связанных с темами кнопок и назначением соответствующих значков, кажутся мне довольно неудобными. Я продолжаю думать, что смогу либо пройтись по некоторому определенному массиву элементов управления и значков, либо заняться им каким-либо другим способом, который облегчит мне задачу в будущем, особенно когда я добавляю другие элементы управления на страницу.

Предложения по лучшим способам настройки этого приветствуются! Спасибо!

Answer 1

Я бы предложил ассоциировать значки с кнопками с помощью атрибутов HTML5 data-, но поскольку вы используете веб-элементы управления ASP.NET, это будет сложнее, чем стоит.

Вы можете,однако сохраните суффиксы id и соответствующие значки в литерале объекта и используйте $. each () для его итерации:

$.each({
    butFind: "search",
    butUpdate: "disk",
    butCancel: "cancel"
}, function(suffix, icon) {
    $("[id$='" + suffix + "']").button({
        icons: {
            primary: "ui-icon-" + icon
        }
    });
});