javascript - 是否可以通过 jQuery 代码激活 data-add-back-button？

Question

我正在使用 jQuery 1.9.1 和 jQuery Mobile 1.3.1，并且我有几个页面定义如下:

<div id="q1" data-role="page" data-add-back-btn="false" data-back-btn-text="Home">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
         <h1><Title</h1>
    </div>
    <div class="info-wrapper"></div>
    <div data-role="content"></div>
</div>

重点是，稍后我想激活设置为 false 的后退按钮，并更改设置为 Home 的按钮文本。我想通过 jQuery 代码来完成它们。可能吗？

Answer 1

不能用这种方式完成，因为按钮应该在pagecreate期间创建。

您有两个选择:

1. 创建按钮并隐藏它。当您需要时显示它。

   /* hide it */
   $.mobile.activePage.find(".ui-header [data-rel=back]")
       .addClass("ui-screen-hidden");
   
   /* show it */
   $.mobile.activePage.find(".ui-header [data-rel=back]")
       .removeClass("ui-screen-hidden");
   

2. 将按钮动态添加到您想要的页面。

   $(document).on('pageinit', "#home", function () {
       $(".foo").on("click", function () { /* you can use any other method */
           /* button */
           var backbtn = '<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back">Back</a>';
           /* add it to active page */
           $.mobile.activePage.find(".ui-header")
               .append(backbtn)
               .end()
               .trigger('pagecreate'); /* button won't be created without this */
       });
   });
   

   Demo