3

我在动态更改按钮主题时遇到了一些麻烦。从另一篇文章我学会了使用：

<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”。有没有更好的方法来动态改变主题？

4

2 回答 2

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/

于 2013-03-29T08:47:45.650 回答
0

我试图找到这个问题的答案，但在研究了 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);
}
于 2013-09-02T16:15:02.443 回答