javascript - 如何使用 javascript 更改 JQuery Mobile 按钮图标

Question

我想要一个根据用户选择更改数据图标类别的按钮

示例按钮为:

<a href="#language2" data-rel="popup" data-role="button" 
                     data-icon="english-flag" data-inline="true" 
                     data-position-to="origin">
    <span id="language3">English</span>
</a>

我想知道我需要实现什么 JavaScript 代码才能将自定义定义的 data-icon="english-flag" 更改为 data-icon= “另一个标志”

提前致谢。

编辑:以下关于如何指定要影响哪个按钮的后续问题的答案可以在以下位置找到: How to change a specific JQuery Mobile button icon with javascript

Answer 1

jQuery Mobile 有一个预定义的函数:

$('a').buttonMarkup({ icon: "star" });

仅更改属性是不够的，最终按钮重新设计必须使用 .buttonMarkup( 函数。

这是官方文档:http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

这是一个示例:http://jsfiddle.net/Gajotres/AmFKa/

此外，由于您正在创建自定义按钮，因此仅更改图标名称是不够的，首先您需要在 CSS 中定义它，如下所示:

<style type="text/css">
    .ui-icon-edit {
       background-image: url(icons-18-white.png); // This should be your picture
       background-repeat: no-repeat;
       background-position: -824px 50%;
    }
</style>

我们将添加这个新图标，如下所示:

$('a').buttonMarkup({ icon: "edit" });

在本例中，我们将添加图片编辑。现在请注意它的 cas 名称 .ui-icon-edit，要添加新的图标类，您需要将 .ui-icon- 字符串与图标名称组合起来。在您的情况下，您的类名称将是 .ui-icon-another-flag。