结合多个JQuery UI语句来设置按钮控件

我对JQuery和JQuery-UI非常陌生，但到目前为止我都很开心。然而，我的Javascript技能有点生疏，所以有些事情让我头痛。结合多个JQuery UI语句来设置按钮控件

我正在使用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 $ =]（“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" />

多种功能于主题的按钮并指定相应的图标，显得颇为尴尬的我。我一直在想，我应该能够通过一些定义好的控件和图标循环，或者以其他方式解决它，这将使我在未来更加轻松，尤其是当我将其他控件添加到页面时。

有关更好的设置方法的建议值得赞赏！谢谢！

来源

2012-03-02 Hobbes

只需创建一个函数与'id'和'primary'参数？ – Brad 2012-03-02 19:20:52

我会建议将图标与使用HTML5 data-属性的按钮相关联，但由于您使用的是ASP.NET网页控件，因此它会比它的价值更复杂。

你可以，但是，存储id后缀和它们各自的图标对象文本，并使用$.each()遍历它：

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

来源

2012-03-02 19:28:44

这只是我试图围绕我的大脑的结构类型。谢谢！ – Hobbes 2012-03-02 20:10:28

结合多个JQuery UI语句来设置按钮控件

回答

相关问题