jQuery モバイル フレームワークを使用する Web アプリ プロジェクト用に、1 つの CSS スタイルシート (1 つの HTML に複数のページ div セクションではない) を共有する複数の HTML ドキュメントがあります。すべての HTML ドキュメントは個別に正常に機能しますが、あるページが別のページのリンクから開くと、すべてのスクリプトとスタイルが適用されなくなります。リンクされるたびに各 html ページを最新の状態に保つ方法はありますか? タグを試してみdata-ajax="false"ましrel="external"た<a>が、うまくいきませんでした。あなたの助けに感謝します!
はい、各 html の head タグにプラグイン リンクがあります。
<link rel="stylesheet" href="style/custom.css">
<link rel="stylesheet" href="style/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
//custom script in each html
});
また、html はタグ内のタグでリンクされています。
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
<a href="page3.html">page 3</a>
リンクは機能しますが、前のページから新しい html を開くと、カスタム スタイルシートとスクリプトが適用されなくなります。タグに data-ajax="false" または rel="external" を追加すると、リンクも機能しなくなります。
コードを調べていただきありがとうございます。
PS。申し訳ありませんが、私は jsfiddle に慣れておらず、コードを 2 つの別々の html ファイルにコピーしました。最初に page2.html を開くと、スライダーは正常に動作します。しかし、page1.html のメニューから開くと、スライダーが機能しません。
これは page1.html です:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
</style>
<body>
<div data-role="page">
<div id="page1">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page1 <br> click anywhere</p>
</div>
</div>
</body>
</html>
これは page2.html です:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
$('.slider').change(function(){
var wid= $(this).val() + "px";
$('#box').css("width", wid);
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
#box{
width:10px;
height:30px;
margin: 0px 50px;
background:#000;
}
</style>
<body>
<div data-role="page">
<div id="page2">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page2 <br>adjust box width with slider </p>
<div id="box"></div>
<input type="range" class="slider" min="5" max="600" step="1" value="10"/>
</div>
</div>
</body>
</html>