1
我正在與Jquery Mobile第一次設計一個移動Web應用程序。該應用程序有一個頁面，它具有放置在固定位置的頁眉和導航欄。點擊導航欄上的選項卡，頁面將加載到最初留空的div內導航欄下方的同一頁面上。似乎通過ajax在同一頁面上調用新頁面使得Jquery移動效果不起作用。數據主題，數據角色，範圍和其他數據屬性均不起作用。 我想實現一個頁面「日誌」滑塊，但只顯示了一個值的文本框在裏面Jquery Mobile滑塊不工作JQM 1.3.2和Jquery 1.10.2
<div style="float:left" data-role="fieldcontain">
<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" min="0" max="100" data-highlight="true" />
</div>
我使用jQuery Mobile的1.3.2和jQuery 1.10.2！
這是該頁面的html代碼。 一旦我連接到數據庫，你會看到很多重複代碼，因爲它沒有連接到完整的數據庫，所以它不會混亂。
<body>
<link href="css/description.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style (2).css" type="text/css" rel="stylesheet" />
<script src="js/custom.js"></script>
<script src="js/jquery.raty.js"></script>
<script>
$(document).ready(function(e){
$('#star').raty({
cancel : true,
cancelOff: 'images/cancel-off-big.png',
cancelOn : 'images/cancel-on-big.png',
half : true,
size : 30,
starHalf : 'images/star-half-big.png',
starOff : 'images/star-off-big.png',
starOn : 'images/star-on-big.png'
});
$('#add_journal').click(function(e) {
$('#add_journal').hide();
$('#journal_content').show();
});
});
</script>
<style>
#journal_content
{
display:none;
}
</style>
<div data-role="content" data-theme="a">
<div style="text-align:center; margin:10px; margin-bottom:10px;">
<a href="#" data-role="button" id="add_journal" style="text-decoration:none; background-color:#67222e; padding:10px; color:#fff;">New Journal Entry</a>
</div>
<div id="journal_content">
<div class="data">
<h3> My Ratings: </h3>
<div id="star"></div>
</div>
<div class="data">
<div style="float:left">
<h3> Tasting Notes: </h3>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
<div class="data">
<h3> Appearance </h3>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Descriptor words: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Color Match: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
</div>
<div class="data">
<h3> Aroma </h3>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Aroma Wheel: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Descriptor Words: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
</div>
<div class="data">
<h3> Taste: </h3>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Tasting Wheel: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Descriptor Words: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
</div>
<div class="data">
<h3> Body/Structure: </h3>
<hr>
<div class="data_inside">
<div style="float:left">
<h4> Descriptor Words: </h4>
</div>
<div style="float:right; padding-top:20px;">
<a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
</div>
<div style="clear:both" id="notes">
</div>
</div>
<hr>
<div class="data_inside">
<div style="float:left" data-role="fieldcontain">
<h4> Tannis: </h4>
<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" min="0" max="100" data-highlight="true" />
</div>
<div style="clear:both" id="notes">
</div>
</div>
</div>
</div>
</div>
</body>
複製/粘貼代碼到我的項目模板，它也有頁眉/頁腳和它工作得很好原樣是。我正在使用jquery 1.9.1和jqm 1.3.1。你能發佈你的html頁面的全部內容嗎？ – Drew
更新了我的代碼，以便將jquery 1.10.2和jqm 1.3.2與您的操作相匹配並且仍然有效。 – Drew
@德魯：你能告訴我你的頁面如何運作？如在，你怎麼在div的內部調用你的頁面？我調用的頁面只有內容部分通過ajax調用頁面不會加載頭部分。 – Sidharth