页面更改时动态更改标题按钮图标，jQuery mobile 1.4.5

Dynamically change header button icon on page change, jQuery mobile 1.4.5

本文关键字：mobile jQuery 按钮 动态 标题 图标      更新时间：2023-11-15

好吧，这应该很简单，但似乎什么都不起作用。。。

 <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1 class="ui-title" id="headertitle"></h1>
        <a class="ui-btn-left ui-nodisc-icon ui-btn-inline ui-mini" id="leftButton" onclick="alert('this');" data-icon="gear" data-iconpos="notext"></a>
 </div>

我在jQuery mobile的页面更改上尝试了以下页面显示、页面创建和页面显示前事件：

$('#leftButton').data("icon", "grid");
$('#leftButton').jqmData("icon", "grid");
$('#leftButton').attr("data-icon", "grid");

这些似乎都不起作用。那么，如何更改标题按钮图标以适应每一页呢？

jQuery mobile有一个按钮小部件以及样式类似按钮的dom元素。在您的情况下，锚点只是样式化的，所以您可以简单地切换类： 
<a id="leftButton" href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
$( "#leftButton" ).on("click", function(){
    $(this).removeClass("ui-icon-gear").addClass("ui-icon-grid");
});

如果你想使用一个小部件，那么你可以在代码中设置图标选项(http://api.jquerymobile.com/button/#option-图标）：

<input id="btnWidget" type="button" data-icon="gear" data-iconpos="notext" value="Icon only" />
$( "#btnWidget" ).on("click", function(){
    $(this).button( "option", "icon", "grid" );
});

这是两种技术的DEMO

相关文章：