在页面更改时动态更改 header 按钮图标,jQuery 移动版 1.4.5
Dynamically change header button icon on page change, jQuery mobile 1.4.5
好的,这应该很简单,但似乎没有任何效果...
<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 移动版页面更改的页面显示、页面创建和页面显示事件之前尝试了以下操作:
$('#leftButton').data("icon", "grid");
$('#leftButton').jqmData("icon", "grid");
$('#leftButton').attr("data-icon", "grid");
None 其中似乎有效。那么如何更改 header 按钮图标以适合每个页面?
jQuery 移动版有一个按钮小部件以及 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-icon):
<input id="btnWidget" type="button" data-icon="gear" data-iconpos="notext" value="Icon only" />
$( "#btnWidget" ).on("click", function(){
$(this).button( "option", "icon", "grid" );
});
Here is a DEMO of both techniques
好的,这应该很简单,但似乎没有任何效果...
<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 移动版页面更改的页面显示、页面创建和页面显示事件之前尝试了以下操作:
$('#leftButton').data("icon", "grid");
$('#leftButton').jqmData("icon", "grid");
$('#leftButton').attr("data-icon", "grid");
None 其中似乎有效。那么如何更改 header 按钮图标以适合每个页面?
jQuery 移动版有一个按钮小部件以及 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-icon):
<input id="btnWidget" type="button" data-icon="gear" data-iconpos="notext" value="Icon only" />
$( "#btnWidget" ).on("click", function(){
$(this).button( "option", "icon", "grid" );
});
Here is a DEMO of both techniques