Javascript JQM翻转切换开关提交功能
我喜欢使用jQuery mobile flip-toggle开关提交两个状态信息来控制relais的两个状态Javascript JQM翻转切换开关提交功能,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我喜欢使用jQuery mobile flip-toggle开关提交两个状态信息来控制relais的两个状态 <form> <label for="flip-1">Flip toggle switch:</label> <select name="flip-1" id="flip-1" data-role="slider"> <option value="off">Off</option> <optio
<form>
<label for="flip-1">Flip toggle switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
而不是使用:
<input class="scene_btn" type="submit" onClick="request('key=1')" value="on" data-theme="d"</input>
<input class="scene_btn" type="submit" onClick="request('key=2')" value="off" data-theme="d"</input>
工作示例:
HTML:
你可以在这里找到解决方案
有一个关于“方法”和“事件”的规范,因此,它可能对您有所帮助
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css"/>
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<form id="test-form">
<label for="flip-1">Flip toggle switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
$(document).on('pageinit', '#index', function(){
$(document).on( "slidestop", "#flip-1" ,function( event, ui ) {
console.log($("#flip-1").val());
$('#test-form').submit();
});
});