Question

我动态地动态更改按钮的主题有点麻烦。从我学会使用的另一篇文章：

<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>

从技术上讲，这是有效的，直到我鼠标悬停 - 然后按钮回到数据主题“c”。有没有更好的方法来动态更改主题？

Answer 1

如果您使用下面的按钮

 <a href="#" id="my-button2" data-role="button" data-theme="e">Save2</a>

您可以更改主题，如下所示

$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");

在这里查看实时小提琴http://jsfiddle.net/mayooresan/jfDLU/

Answer 2

我试图找到这个问题的答案，但在研究了DOM结构后想出了这个解决方案。我创建了以下功能，用于在单击按钮时切换主题。只有在更改您单击的同一按钮的主题时才需要处理悬停类。这些似乎适用于输入类型按钮元素。（jqm版本1.3.2）

function changeButtonTheme(buttonSelector,toTheme){
    var currentTheme  = $(buttonSelector).attr('data-theme');
    var parent  = $(buttonSelector).parent();
    $(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
    parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
    //parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}

在JQueryMobile中动态更改按钮数据主题

2 个答案: