jquery鏈接@ data-rel和@數據轉換鏈接指向同一頁

我有下面的代碼，或者你可以檢查jsfiddle（http://jsfiddle.net/HzGDm/）我不知道我做錯了什麼。如果你點擊鏈接＃1，然後點擊＃2，＃3，然後路段＃2，＃3都成爲對話框。jquery鏈接@ data-rel和@數據轉換鏈接指向同一頁

<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>

來源

2012-07-06 jjennifer

這個問題是jquery mobile正在啓動頁面作爲對話框並應用樣式。如果首先執行頁面鏈接，則對話鏈接會彈出窗口，但仍然看起來像一個頁面。如何防止這一點，尚不確定。 – 2012-07-06 16:34:40

甚至沒有去上我的解決方案發表意見？ – Jasper 2012-07-06 20:47:35

另一種解決方案是通過多頁文檔，拆單page.html中爲兩個頁面並重新加載頁面的每個navigation.By重新加載頁面，頁面與新屬性再次增強。

<!------ 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>

來源

2012-07-06 19:35:34

當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」圖標關閉對話框。這本身並沒有太大的障礙，但你可能會遇到類似的其他問題。

來源

2012-07-06 18:33:08 Jasper

jquery鏈接@ data-rel和@數據轉換鏈接指向同一頁

回答

相關問題