2011-12-14 8 views
2

メインページの<div data-role="page">要素の外に少しのHTMLを含めたいと思います。このHTMLは、新しいページがvia ajaxに読み込まれたときには置き換えられません。jQuery Mobile Pages以外の永続的なHTML

このサンプルアプリケーションでは、AJAX呼び出しに関連するエラーやアプリケーションのステータスの更新時にのみ表示される、右上に小さな絶対配置されたdivが表示されます。

index.htmlページの本文にHTMLを含めると、すぐにjQuery Mobileに置き換えられます。私はそれぞれのページにこのdivを含める必要はありません。

アイデア?

+1

あなたが問題を示していますあなたの質問にいくつかの要約HTMLとJSのサンプルコードを追加することはできますか?何が起こっているのかを正確に理解することが容易になります。体とJSだけで大丈夫です。デモがjsfiddle.net(jQueryモバイルサンプルについてはわかりません)でreproした場合、さらにフィドルへのリンクを提供することができます。 –

+0

マイクは、新しいHTMLコードをdivの外に置くのではなく、2つの "メイン" divを使用して、あなたのajax stuffとjQueryのマジックを実行し、jQuery経由で新しいHTMLをロードし、同じ。それでも問題についての詳しい情報が必要です。 – ricardordz

答えて

1

私はdivが取り替えられるとは思わない。たとえば、これが一番上に最初に目に見えないdivをもたらす:

http://jsfiddle.net/RQkrj/2/

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
<style> 
.top { 
    z-index: 999; 
} 
</style> 
<script> 
$('div#page').live('pageshow', function(event, ui) { 
    $('div#doesNotGetRemoved').addClass("top"); 
}); 
</script> 
</head> 
<body> 

<div id="doesNotGetRemoved" style="background: red; position: absolute;">This is a div</div> 

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

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content">  
     <p>Hello world</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html> 
+0

JQuery Mobileではページが置き換えられません。彼らはJQTouchと一緒です。私はあなたのdivを余分なページにすることができる/そうすべきだと思います。以前はHTMLにdivを追加していましたが(ページではありません)、JQMobileの新しいバージョンに更新したときに奇妙なレンダリングが発生しました。私は最新のものを試していない。 – Dessus

関連する問題