Question

我想从动态生成的后退按钮（例如，嵌套列表）中删除文本，以实现类似此静态标题的内容（仅显示箭头）：

<header data-role="header">
    <h1>Header</h1>
    <a data-rel="back" data-iconpos="notext" data-icon="arrow-l">Back</a>
</header>

由于此解决方案无法正常工作，因此

$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = "";
}

我已尝试过这个，但它不能正常工作：

$(document).bind('pagebeforecreate', function(){ 
    $("a:jqmData(rel='back')").jqmData("iconpos", "notext");
});

错误在哪里？

修改
为了简化问题，我想删除嵌套列表中按钮的文本，例如：http://jsfiddle.net/GV2wN/

Answer 1

如果您要配置后退按钮文字，可以使用   data-back-btn-text =＆＃34; previous＆＃34;您的页面元素上的属性，或   通过页面插件的选项以编程方式设置它。

来源：http://jquerymobile.com/test/docs/toolbars/docs-headers.html

$.mobile.page.prototype.options.backBtnText = "Previous";

（替换＆＃34;之前的＃34;以及您希望显示的任何文字。

或者，您可以在逐页的基础上执行此操作，在data-back-btn-text="Previous" div上添加data-role="page"，如下所示：

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">

更新（1）

抱歉，我想你已经尝试了上述方法。

解决方案：在data-iconpos="notext"链接上插入data-role="button"，它会生成没有按钮文字的图标，如下所示：

<a href="index.html" data-icon="arrow-l" data-role="button" data-iconpos="notext">Back</a>

这是一个有效的jsFiddle示例，将按钮放在Header元素中：http://jsfiddle.net/3q28f/

Answer 2

它不是很干净，因为它在渲染后修改了按钮的css，但添加它似乎可以解决这个问题：

$(document).on('pagechange', function () {
    $.mobile.activePage.find(".ui-header a.ui-btn-left").addClass("ui-btn-icon-notext");
    $.mobile.activePage.find(".ui-header a.ui-btn-left").removeClass("ui-btn-icon-left");
});

Here's your updated fiddle.

在呈现的按钮和更改标记之间有时会出现延迟，因此您可能希望查找要绑定的更好的事件，可能是单击事件？

JQuery Mobile删除文本以动态生成后退按钮

2 个答案: