2

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

示例按钮为：

<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"

提前致谢。

编辑：下面关于如何指定要影响哪个按钮的后续问题的答案可以在以下位置找到； 如何使用 javascript 更改特定的 JQuery Mobile 按钮图标

4

3 回答 3

8

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。

于 2013-01-18T23:32:35.433 回答
0

只需将值传递给数据函数。请参阅文档

$("#language2").data("icon", "another-flag");
于 2013-01-18T23:30:13.923 回答
0

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

文档

于 2013-01-18T23:31:38.787 回答