我在下面写下脚本以将页面滑动到下一页或上一页。但滑动页面与滑动控件的滑动有冲突。
$(document).on('pageinit', function () {
$('img').on('dragstart', function (event) { event.preventDefault(); });
function navnext(next) {
//$(":mobile-pagecontainer").pagecontainer("change", next + ".html", {
// transition: "slide"
//});
$.mobile.changePage(next + ".html", { transition: "slide",reverse: false });
}
// Handler for navigating to the previous page
function navprev(prev) {
//$(":mobile-pagecontainer").pagecontainer("change", prev + ".html", {
// transition: "slide"
//});
$.mobile.changePage(prev + ".html", { transition: "slide", reverse: true });
}
// Navigate to the next page on swipeleft
$(document).on("swipeleft", ".ui-page:not(.ui-slider)", function (event) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $(this).jqmData("next");
// Check if there is a next page and
// swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if (next && !$(this).hasClass("ui-slider")) {
navnext(next);
}
});
$(document).on("swiperight", ".ui-page:not(.ui-slider)", function (event) {
var prev = $(this).jqmData("prev");
if (prev && !$(this).hasClass("ui-slider")) {
navprev(prev);
}
});
});
当我滑动滑块控件时，我希望更改滑块值，但页面滑动而不是滑块。 我该如何解决这个问题？除了用户在该元素上滑动时滑动页面中某些页面元素（如滑块），我该怎么办。
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- /header -->
<div data-role="page" id="relay" class="demo-page" data-title="Buenos Aires" data-dom-cache="true" data-prev="Index">
<div id="mainContent" role="main" class="ui-content">
<link href="css/smarthome.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<script src="js/swipe.js"></script>
<div id="header" data-role="header" data-id="header" data-tap-toggle="false">
<div data-role="navbar" id="navbar">
<ul>
<li>
<a href="#Index" data-rel="external" data-transition="slide">
<img src="images/home.png" />
</a>
</li>
<li><a href="#relay" class="ui-btn-active"><img src="images/relaynumber.png" /></a></li>
<li><a href="#sensor" data-transition="slide"><img src="images/sensor.png" /></a></li>
<li><a href="#setting" data-transition="slide"><img src="images/setting.png" /></a></li>
</ul>
</div>
</div>
<div class="row" id="relayDetail">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 padding30">
<div class="relayNumber">
<div class="relay"></div>
رله شماره 1
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 padding30">
<div class="connected">
<div class="connect"></div>
جریان متصل است
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12">
<div class="relayName ui-field-contain">
<label class="label" for="relayname">نام رله:</label>
<input type="text" id="relayname" name="relayname" />
</div>
<div class="clearfix"></div>
</div>
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
<div class="fuzeNumber ui-field-contain">
<label class="label" for="fuzenumber">شماره فیوز :</label>
<input type="number" id="fuzenumber" name="fuzenumber" />
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="border"></div>
</div>
<fieldset data-role="controlgroup" class="parameters">
<legend>پارامترهای رله:</legend>
<div class="controlgroup">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="voltage">
<label class="label" for="topvoltage">حد بالای ولتاژ مجاز</label>
<input type="range" name="slider-1" value="230" min="0" max="250" data-highlight="true" />
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="voltage">
<label class="label" for="topvoltage"> حد پایین ولتاژ مجاز</label>
<input type="range" name="slider-2" value="210" min="0" max="250" data-highlight="true" />
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="voltage">
<label class="label" for="topvoltage">زمان تاخیر (ثانیه)</label>
<input type="range" name="slider-3" value="120" min="0" max="2000" data-highlight="true" />
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="protect">
<label class="label">
درگاه محافظت :
</label>
<div class="relayDetail switch">
<select data-role="slider">
<option value="on">NC</option>
<option value="off">NO</option>
</select>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="protect">
<label class="label">
حفاظت :
</label>
<div class="relayDetail switch">
<select data-role="slider">
<option value="on">روشن</option>
<option value="off">خاموش</option>
</select>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</fieldset>
</div>
</div><!-- /content -->
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-l"></a>
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-r"></a>
</div>
</div><!-- /page -->
</body>
</html>