jQuery Mobile添加后退按钮

最新推荐文章于 2017-08-10 15:15:32 发布

原创最新推荐文章于 2017-08-10 15:15:32 发布 · 1.4w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery mobile #html #data-add-back-btn

WEB 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在jQuery Mobile中实现后退按钮功能。详细解释了不同版本中添加后退按钮的方法变化，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们页面是jQuery Mobile的主要单位。一个典型的页面可以分为页头、内容、页脚。

接下来我们就看看如何在jQuery Mobile页面中添加后退按钮

在稍微早一些的版本中，我们在page中添加data-add-back-btn="true"即可添加后退按钮

<body>
<!-- -->
<div data-role="page" data-add-back-btn="true">
    <div data-role="header"><h1>header</h1></div>
    <div data-role="content">
        content
    </div>
    <div data-role="footer"><h4>footer</h4></div>
</div>
</body>

新手们可能会疑惑，怎么添加之后没有出现后退按钮？？？

这是因为你还没有触发它，于是我们再添加另外一个页面

<body>
<!-- -->
<div id="home" data-role="page" data-add-back-btn="true">
    <div data-role="header"><h1>header</h1></div>
    <div data-role="content">
        content <a href="#page2">page2</a>
    </div>
    <div data-role="footer"><h4>footer</h4></div>
</div>
<div id="page2" data-role="page" data-add-back-btn="true">
    <div data-role="header"><h1>Page 2</h1></div>
    <div data-role="content">Back-button visible</div>
<pre name="code" class="html">    <div data-role="footer"><h4>footer</h4></div>

</div></body>

还是没有触发么？？？

在1.4版本之后data-add-back-btn属性需要添加在header中而不是page里

<body>
<!-- -->
<div id="home" data-role="page">
    <div data-role="header"  data-add-back-btn="true"><h1>header</h1></div>
    <div data-role="content">
        content <a href="#page2">page2</a>
    </div>
    <div data-role="footer"><h4>footer</h4></div>
</div>
<div id="page2" data-role="page">
    <div data-role="header" data-add-back-btn="true"><h1>Page 2</h1></div>
    <div data-role="content">Back-button visible</div>

    <div data-role="footer"><h4>footer</h4></div>

</div>
</body>

此时是不是成功的出现后退按钮了？

我们还可以通过data-back-btn-text更改按钮的文本，data-back-btn-theme更改按钮的主题