[英]How to change a JQuery Mobile button icon with javascript
I would like to have a button that changes data-icon class depending upon user selections 我想有一个按钮,根据用户选择更改数据图标类
Example button would be: 示例按钮将是:
<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>
I'd like to know what javascript code I would need to implement in order to change the custom defined data-icon="english-flag"
to be instead data-icon="another-flag"
我想知道我需要实现哪些javascript代码才能将自定义定义的
data-icon="english-flag"
更改为data-icon="another-flag"
Thanks in advance. 提前致谢。
Edit: The answer to my followup questions below on how to specify which button to affect can be found at; 编辑:下面关于如何指定影响哪个按钮的后续问题的答案可以在以下位置找到; How to change a specific JQuery Mobile button icon with javascript
如何使用javascript更改特定的JQuery Mobile按钮图标
jQuery Mobile has a predefined function: jQuery Mobile有一个预定义的功能:
$('a').buttonMarkup({ icon: "star" });
It is not enough to change an attribute, final button restyling must be done with .buttonMarkup( function. 仅更改属性是不够的,最终按钮重新定位必须使用.buttonMarkup(函数)完成。
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html 这是官方文档: http : //jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html
And here's an example: http://jsfiddle.net/Gajotres/AmFKa/ 这是一个例子: http : //jsfiddle.net/Gajotres/AmFKa/
Also, because you are creating a custom button it wont be enough just to change icon name, first you need to define it in your css like this: 此外,因为您正在创建自定义按钮,仅仅更改图标名称是不够的,首先您需要在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>
We would add this new icon like this: 我们会像这样添加这个新图标:
$('a').buttonMarkup({ icon: "edit" });
In this case we are adding picture edit . 在这种情况下,我们正在添加图片编辑 。 Now notice its cass name .ui-icon-edit , to add a new icon class you need to combine a .ui-icon- string with a icon name.
现在请注意它的cass名称.ui-icon-edit ,要添加一个新的图标类,您需要将.ui-icon-字符串与图标名称组合在一起。 In your case your class name would be .ui-icon-another-flag .
在您的情况下,您的班级名称将是.ui-icon-another-flag 。
Just pass in the value to the data function. 只需将值传递给数据函数即可。 See the documentation
请参阅文档
$("#language2").data("icon", "another-flag");
You can use $('selector').attr('data-icon', 'newValue')
to change the attribute. 您可以使用
$('selector').attr('data-icon', 'newValue')
来更改属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.