Question

我有一个多页html（使用“div data-role =”page“），显示4页文档，可左右滑动以在页面之间来回移动。

我有一个警告，我只想在页面首次加载时弹出（告诉用户他们可以滑动以在页面之间来回移动）。

我的问题是，每次刷新新页面时它都会再次弹出，我只希望它在页面加载时提醒他们。

我已经尝试将脚本从头部移动到元素内部，并且我已经尝试将它绑定到所有不同的pagecreate，pagebeforecreate，pageinit等事件，并且似乎无法弄明白。

我感谢任何建议或指示。

以下是刷卡时每个页面上显示的警报代码：

<script type="text/javascript"> 
 $('div').live("pagecreate",function(event){
alert('Swipe left and right to move between the 5 pages of this lead sheet');
});
</script>

Answer 1

直播示例：

http://jsfiddle.net/FcjNR/1/

JS

var $alerted = false;

$('div').live('pageshow',function(event, ui) {
    // Check for secure token here
    if($alerted == false) {
        $alerted = true;
        alert('Can you see me now?');
    }
});

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Alert once</li>
            <li><a href="#alert">Alert Page</a></li>
        </ul>
    </div>
</div>

<div data-role="page" id="alert">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">The Alert</li>
            <li><a href="#home">Home</a></li>
        </ul>
    </div>
</div>

Answer 2

您可以绑定到页面DIV的ID（例如：div＃home）。

<script type="text/javascript">
    $('div#home').live("pagecreate", function (event) {
        alert('Swipe left and right to move between the 5 pages of this lead sheet');
    });
</script>

...

<div data-role="page" id="home">

如何获得警报仅在jQuery Mobile多页面html中出现一次

2 个答案: