Question

我有以下代码，或者你可以在jsfiddle（http://jsfiddle.net/HzGDm/）查看我不确定我做错了什么。如果单击链接＃1，然后单击＃2和＃3，则链接＃2和＃3都将成为对话框。

<div data-role="page" id="page1">
    <div data-role="header"><h1>Page 1</h1></div>
    <div data-role="content">
        <h2>
            <a href="#page2" data-rel="dialog" >1. Click this link first: Display Dialog</a></h2>

        <h2>Then let's try some transitions!</h2>
        <p>2. <a href="#page2" data-transition="fade">Fade to second page</a></p>
        <p>3. <a href="#page2" data-transition="flip">Flip to second page</a></p>
    </div>
    <div data-role="footer"><h1>footer</h1></div>
</div>


<div id="page2" data-role="page">
    <div data-role="header"><h1>page 2</h1></div>
    <div data-role="content">
        <p>This is page 2</p>
        <p><a href="#page1">Go back to first page</a></p>
    </div>
    <div data-role="footer">Page Transitions</div>
</div>

Answer 1

当jQuery Mobile初始化伪页面时，它会添加特定于伪页面显示方式的类（伪页面为data-role="page"和data-role="dialog"元素）。因此，如果您初始化为对话框，那么它将获得对话框类，对于常规页面也是如此。

但是，您可以通过手动更改伪页面的类来解决此问题。例如：

//wait for first page to initialize to bind to its links
$(document).delegate('#page1', 'pageinit', function () {

    //find links in the first page and bind a click event handler to them
    $(this).find('a').bind('click', function () {

        //this link is opening a regular page
        if ($(this).attr('data-rel') !== 'dialog') {

            //update the necessary attributes/classes to show a regular page
            $('#page2').attr('data-role', 'page').removeClass('ui-dialog')
                       .find('.ui-header').removeClass('ui-corner-top')
                       .end().find('.ui-footer').removeClass('ui-corner-bottom')
                       .end().find('.ui-dialog-contain').children().unwrap();
        } else {

            //this link is opening a dialog
            $('#page2').attr('data-role', 'dialog').addClass('ui-dialog')
                       .find('.ui-header').addClass('ui-corner-top')
                       .end().find('.ui-footer').addClass('ui-corner-bottom')
                       .end().children().wrapAll('<div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow" />');
        }
    });
});

以下是演示：http://jsfiddle.net/jasper/HzGDm/9/

这不是一个完整的解决方案。您会注意到，如果您将第二页打开为常规页面然后将其作为对话框打开，它将显示为非常类似于对话框，但它不会有“X”图标来关闭对话框。这本身并不是一个障碍，但你可能遇到其他问题。

Answer 2

另一种解决方案是通过多页文档，将单个page.html拆分为两个页面并为每个导航重新加载页面。通过重新加载页面，页面将再次使用新属性进行增强。

<!------ page1.html -------->

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo</title>  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>    
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">        
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>        
    <script>

var pageChange =  function(event){
    var target = event.target;
    var transition = $(target).jqmData( "transition" ) || $.mobile.defaultPageTransition;
    var role = $(target).jqmData( "rel" );
    $.mobile.changePage('page2.html', {reloadPage:true, transition:transition, role:role});
}

$(document).delegate('#page1 #fadeAnchor', 'click', pageChange);
$(document).delegate('#page1 #flipAnchor', 'click', pageChange);
$(document).delegate('#page1 #dialogAnchor', 'click', pageChange);

    </script>
</head>

<body>
<div data-role="page" id="page1">
    <div data-role="header"><h1>Page 1</h1></div>
    <div data-role="content">
             <h2><a id="dialogAnchor" href="javascript:void(0);" data-rel="dialog" >Click this link first: Display Dialog</a></h2>

        <div style="margin-top:2em"></div>

            <h2>Then let's try some transitions!</h2>
            <p><a id="fadeAnchor" href="javascript:void(0);" data-transition="fade">Fade to second page</a></p>
            <p><a id="flipAnchor" href="javascript:void(0);" data-transition="flip">Flip to second page</a></p>


    </div>
    <div data-role="footer"><h1>footer</h1></div>
</div>
</body></html>



<!--------------------page2.html ------------------>

<div id="page2" data-role="page">
    <div data-role="header"><h1>page 2</h1></div>
    <div data-role="content">
        <p>This is page 2</p>
        <p><a href="page1.html">Go back to first page</a></p>
    </div>
    <div data-role="footer">Page Transitions</div>
</div>

jquery链接@ data-rel并链接@ data-transition指向同一页面

2 个答案: