如何使用JavaScript更改JQuery Mobile按钮图标 [英] How to change a JQuery Mobile button icon with javascript

问题描述

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

示例按钮为:

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

我想知道为了将自定义定义的data-icon="english-flag"改为data-icon="another-flag"

，我需要实现哪些javascript代码

谢谢.

以下有关如何指定要影响哪个按钮的后续问题的答案可在以下位置找到: 如何使用javascript

解决方案

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 .

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"

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

解决方案

jQuery Mobile has a predefined function:

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

It is not enough to change an attribute, final button restyling must be done with .buttonMarkup( function.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

And here's an example: 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:

<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. In your case your class name would be .ui-icon-another-flag.

这篇关于如何使用JavaScript更改JQuery Mobile按钮图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！