【问题标题】:How to load Dialog or Popup before page load using jquery mobile如何在使用 jquery mobile 加载页面之前加载对话框或弹出窗口
【发布时间】:2013-05-08 12:42:20
【问题描述】:

是否有任何方法可以在使用 jquery Mobile 加载页面之前调用/显示对话框或弹出窗口?

我想在页面加载之前获取一些输入,然后根据该输入加载下一页

【问题讨论】:

标签: jquery jquery-mobile jquery-mobile-popup jquery-mobile-dialog


【解决方案1】:

要在显示页面之前加载对话框或弹出窗口,您需要使用seTimeout。如果您立即调用它,它将立即打开和关闭。

$(document).on('pagebeforeshow', '#pageID', function() {
 setTimeout(function () {
  $('#popupID').popup('open');
 }, 100); // delay above zero
});

Similar issue.

【讨论】:

    【解决方案2】:

    您的问题有一个非常简单的解决方案,您只需要做的就是让您的第一页成为一个对话框。

    工作示例:http://jsfiddle.net/Gajotres/dj3UP/1/

    正如您在我的示例中看到的,这是一个纯 HTML 解决方案。首页 data-role 属性已更改为 dialog

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <div data-role="dialog" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
            </div>
    
            <div data-role="content">
                <input type="text" value="" id="some-input"/>
                <a data-role="button" id="some-button" href="#second">Next page</a>
            </div>
    
            <div data-theme="a" data-role="footer" data-position="fixed">
    
            </div>
        </div> 
        <div data-role="page" id="second">
            <div data-theme="a" data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>
    
            <div data-role="content">
    
            </div>
    
            <div data-theme="a" data-role="footer" data-position="fixed">
    
            </div>
        </div>    
    </body>
    </html>   
    

    【讨论】:

      【解决方案3】:

      尝试关注:

      $.mobile.loading( 'show', {
          text: 'foo',
          textVisible: true,
          theme: 'z',
          html: ""
      });
      

      参考链接:

      http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-07-21
        • 2014-03-07
        • 1970-01-01
        • 1970-01-01
        • 2017-03-03
        • 2020-06-26
        • 1970-01-01
        相关资源
        最近更新 更多