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="another-flag"

提前致谢。

编辑：以下关于如何指定影响哪个按钮的后续问题的答案可以在以下位置找到; 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" });

在这种情况下，我们正在添加图片修改。现在请注意其cass名称 .ui-icon-edit ，添加一个新的图标类，您需要将 .ui-icon - 字符串与图标名称相结合。在您的情况下，您的班级名称将是 .ui-icon-another-flag 。

Answer 2

只需将值传递给数据函数即可。 See the documentation

$("#language2").data("icon", "another-flag");

Answer 3

您可以使用$('selector').attr('data-icon', 'newValue')更改属性。

The documentation

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

3 个答案: