Jquery移动滑块不工作JQM 1.3.2和Jquery 1.10.2
我第一次与Jquery Mobile合作设计一个移动web应用程序。应用程序有一个页面,其中标题和导航栏位于固定位置。单击导航栏上的选项卡后,页面将加载到div内导航栏下方的同一页面上,该导航栏最初为空。似乎通过ajax在同一页面上调用新页面会使Jquery移动效果不起作用。数据主题、数据角色、范围和其他数据属性均无效。 我试图实现一个页面“日志”的滑块,但它只显示一个带有值的文本框Jquery移动滑块不工作JQM 1.3.2和Jquery 1.10.2,jquery,html,jquery-mobile,slider,Jquery,Html,Jquery Mobile,Slider,我第一次与Jquery Mobile合作设计一个移动web应用程序。应用程序有一个页面,其中标题和导航栏位于固定位置。单击导航栏上的选项卡后,页面将加载到div内导航栏下方的同一页面上,该导航栏最初为空。似乎通过ajax在同一页面上调用新页面会使Jquery移动效果不起作用。数据主题、数据角色、范围和其他数据属性均无效。 我试图实现一个页面“日志”的滑块,但它只显示一个带有值的文本框 <div style="float:left" data-role="fieldcontain">
<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>
$(文档).ready(函数(e){
$('星').raty({
取消:对,
cancelOff:'images/cancelOff big.png',
cancelOn:'images/cancel on big.png',
一半:是的,
尺码:30,
starHalf:'images/star-half-big.png',
starOff:'images/starOff big.png',
starOn:'images/star on big.png'
});
$(“#添加#U日记账”)。单击(函数(e){
$(“#添加#日记帐”).hide();
$(“#期刊内容”).show();
});
});
#期刊内容
{
显示:无;
}
我的评级:
品尝说明:
外表
描述词:
配色:
芳香
芳香轮:
描述词:
口味:
品尝轮:
描述词:
车身/结构:
描述词:
坦尼斯:
输入滑块:
我将创建的模型文件副本放在pastebin上供您使用
HTML页面
外部Javascript
我将创建的模型文件的副本放在pastebin上供您使用 HTML页面 外部Javascript
将您的代码复制/粘贴到我的项目模板中,该模板也有页眉/页脚,可以正常工作。我使用的是jQuery1.9.1和jQM1.3.1。你能发布html页面的全部内容吗?更新了我的代码,使jquery 1.10.2和jqm 1.3.2与你的操作相匹配,并且仍然有效。@Drew:你能告诉我你的页面是如何工作的吗?在div中,如何调用您的页面?我调用的页面只有content部分,因为通过ajax调用页面不会加载head部分。上面的页面由主页调用,主页加载了所有依赖项,如jquery、jquery mobile。我无法在此页面中加载依赖项,因为这会导致某种UI错误。我创建了一个答案,其中包含指向我用于测试滑块的代码的链接。我会将代码粘贴到答案中,但它相当长,我似乎最终打破了displaycopy/将您的代码粘贴到我的项目模板中,该模板也有页眉/页脚,并且工作正常。我使用的是jQuery1.9.1和jQM1.3.1。你能发布html页面的全部内容吗?更新了我的代码,使jquery 1.10.2和jqm 1.3.2与你的操作相匹配,并且仍然有效。@Drew:你能告诉我你的页面是如何工作的吗?在div中,如何调用您的页面?我调用的页面只有content部分,因为通过ajax调用页面不会加载head部分。上面的页面由主页调用,主页加载了所有依赖项,如jquery、jquery mobile。我无法在此页面中加载依赖项,因为这会导致某种UI错误。我创建了一个答案,其中包含指向我用于测试滑块的代码的链接。我会将代码粘贴到答案中,但它相当长,我似乎最终破坏了显示