hello index.html 1 ! DOCTYPE html 2 html 3 head 4 meta charset ="utf-8" 5 title 我的App / title 6 meta name ="format-detection" content ="telephone=no" 7 meta name ="msapplication-tap-highlight" content ="no" 8 meta name ="viewport" conte
hello
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>我的App</title> 6 <meta name="format-detection" content="telephone=no"> 7 <meta name="msapplication-tap-highlight" content="no"> 8 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 9 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 10 <script src="js/jquery-2.1.3.min.js"></script> 11 <script> 12 $(document).on(‘mobileinit‘, function() { 13 $.mobile.pushStateEnabled = false; 14 }); 15 </script> 16 <script src="js/jquery.mobile-1.4.5.min.js"></script> 17 </head> 18 <body> 19 <div data-role="page" id="p1"> 20 <div data-role="header"> 21 <h1>第 1 页</h1> 22 </div> 23 <div data-role="content"> 24 <ul data-role="listview"> 25 <li><a href="#p2">第 2 页</a></li> 26 <li><a href="#p3">第 3 页</a></li> 27 </ul> 28 </div> 29 <div data-role="footer" data-position="fixed"> 30 <h4>页脚</h4> 31 </div> 32 </div> 33 34 <div data-role="page" id="p2"> 35 <div data-role="header"> 36 <h1>第 2 页</h1> 37 </div> 38 <div data-role="content"> 39 内容 40 </div> 41 <div data-role="footer" data-position="fixed"> 42 <h4>页脚</h4> 43 </div> 44 </div> 45 46 <div data-role="page" id="p3"> 47 <div data-role="header"> 48 <h1>第 3 页</h1> 49 </div> 50 <div data-role="content"> 51 内容 52 </div> 53 <div data-role="footer" data-position="fixed"> 54 <h4>页脚</h4> 55 </div> 56 </div> 57 58 </body> 59 </html>
hello_back
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>我的App</title> 6 <meta name="format-detection" content="telephone=no"> 7 <meta name="msapplication-tap-highlight" content="no"> 8 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 9 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 10 <script src="js/jquery-2.1.3.min.js"></script> 11 <script> 12 $(document).on(‘mobileinit‘, function() { 13 $.mobile.pushStateEnabled = false; 14 }); 15 </script> 16 <script src="js/jquery.mobile-1.4.5.min.js"></script> 17 </head> 18 <body> 19 <div data-role="page" id="p1"> 20 <div data-role="header"> 21 <h1>第 1 页</h1> 22 </div> 23 <div data-role="content"> 24 <ul data-role="listview"> 25 <li><a href="#p2">第 2 页</a></li> 26 <li><a href="#p3">第 3 页</a></li> 27 </ul> 28 <br> 29 <a href="#popAbout" data-rel="popup" data-role="button">App简介</a> 30 <div data-role="popup" id="popAbout" class="ui-content"> 31 <h2>App简介</h2> 32 <p>这是用jQuery Mobile打造的App接口</p> 33 </div> 34 </div> 35 <div data-role="footer" data-position="fixed"> 36 <h4>页脚</h4> 37 </div> 38 </div> 39 40 <div data-role="page" id="p2"> 41 <div data-role="header"> 42 <h1>第 2 页</h1> 43 </div> 44 <div data-role="content"> 45 <a href="#" data-role="button" data-inline="true" data-rel="back">上一页</a> 46 <br> 47 <a href="faq.html" data-role="button" rel="external">开启FAQ</a> 48 </div> 49 <div data-role="footer" data-position="fixed"> 50 <h4>页脚</h4> 51 </div> 52 </div> 53 54 <div data-role="page" id="p3"> 55 <div data-role="header"> 56 <h1>第 3 页</h1> 57 </div> 58 <div data-role="content"> 59 <a href="#" data-role="button" data-inline="true" data-rel="back">上一页</a> 60 </div> 61 <div data-role="footer" data-position="fixed"> 62 <h4>页脚</h4> 63 </div> 64 </div> 65 66 </body> 67 </html>
wifiBot
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>灯光控制器</title> 6 <meta name="format-detection" content="telephone=no"> 7 <meta name="msapplication-tap-highlight" content="no"> 8 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 9 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 10 <script src="cordova.js"></script> 11 <script src="js/jquery-2.1.3.min.js"></script> 12 <script> 13 $(document).on(‘mobileinit‘, function() { 14 $.mobile.pushStateEnabled = false; 15 }); 16 </script> 17 <script src="js/jquery.mobile-1.4.5.min.js"></script> 18 <script src="js/index.js"></script> 19 <style type="text/css"> 20 #splashPage { 21 background-color:#fac800; 22 text-align: center; 23 } 24 #splashPage div h1 { 25 border-radius: 10px; 26 padding:10px 30px; 27 display:inline-block; 28 background-color:#fff; 29 margin-bottom:30px; 30 } 31 </style> 32 </head> 33 <body> 34 <!-- 起始画面 --> 35 <div data-role="page" id="splashPage"> 36 <div role="main" class="ui-content"> 37 <h1>网络灯光控制器</h1> 38 <img src="images/app_logo.svg" width="300" height="300"> 39 </div> 40 </div> 41 42 <!-- 主控画面 ---> 43 <div data-role="page" id="ctrlPage" data-theme="a"> 44 <div data-role="header"> 45 <h1>灯光控制器</h1> 46 <a href="#netPage" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">网络设置</a> 47 </div> 48 49 <div role="main" class="ui-content"> 50 <div class="ui-field-contain"> 51 <label for="ledSw">壁灯</label> 52 <select name="ledSw" id="ledSw" data-role="slider" data-mini="true"> 53 <option value="0">关</option> 54 <option value="1">开</option> 55 </select> 56 </div> 57 <div class="ui-field-contain"> 58 <label for="pwmSlider">台灯</label> 59 <input type="range" name="pwmSlider" id="pwmSlider" value="25" min="0" max="100" data-highlight="true"> 60 </div> 61 <div id="msg"></div> 62 </div> 63 64 <div data-role="footer" data-position="fixed"> 65 © 2016 swf.com.tw 66 </div> 67 </div> 68 69 <!-- "WiFi设置画面" --> 70 <div data-role="page" id="netPage" data-theme="a"> 71 <div data-role="header"> 72 <h1>网络链接设置</h1> 73 </div> 74 75 <div role="main" class="ui-content"> 76 <form> 77 <label for="deviceIP">设备IP地址或网域名</label> 78 <input type="text" name="deviceIP" id="deviceIP" value="" placeholder="jarvis.local" data-clear-btn="true"> 79 <label for="devicePort">设备端口号</label> 80 <input type="number" name="devicePort" id="devicePort" value="80" data-clear-btn="true"> 81 </form> 82 <p><a href="#" id="saveBtn" class="ui-btn ui-corner-all ui-btn-b ui-btn-icon-left ui-icon-refresh ui-shadow-icon">保存设置</a></p> 83 <p><a href="#ctrlPage" class="ui-btn ui-shadow ui-corner-all ui-btn-b">回主控画面</a></p> 84 85 </div> 86 <div data-role="footer" data-position="fixed"> 87 © 2016 swf.com.tw 88 </div> 89 </div> 90 </body> 91 </html>
index.js
1 var app = { 2 nextPage:"", 3 host:"", 4 port:80, 5 splashTime:3000, 6 init: function() { 7 $(document).on(‘deviceready‘, app.onDeviceReady); 8 }, 9 onDeviceReady: function() { 10 $("#ledSw").on("change", function(e){ 11 var val = $(this).val(); 12 var swData = {"pin":13, "sw":val}; 13 // 向第13脚送出开关信号 14 $.ajax({ 15 url: "http://" + app.host + ":" + app.port + "/sw", 16 data: swData, 17 success: function( d ) { 18 app.showMsg("收到服务器回应：" + d ); 19 } 20 }); 21 }); 22 23 $(‘#saveBtn‘).on(‘tap‘, function(){ 24 app.host = $("#deviceIP").val(); 25 app.port = $("#devicePort").val(); 26 localStorage.setItem(‘deviceIP‘, app.host); 27 localStorage.setItem(‘devicePort‘, app.port); 28 location.hash = ‘ctrlPage‘; 29 }); 30 }, 31 timeoutId: 0, 32 showMsg: function(msg) { 33 if (app.timeoutId) { 34 clearTimeout(app.timeoutId); 35 } 36 $(‘#msg‘).text(msg); 37 app.timeoutId = setTimeout(function() { $(‘#msg‘).text(""); }, 4000); 38 }, 39 splashTimer : function(){ 40 setTimeout(function() { 41 // 进入下一页 42 location.hash = app.nextPage; 43 }, app.splashTime); 44 } 45 }; 46 47 $(document).on("pageshow", "#ctrlPage", pageEvt); 48 function pageEvt (e) { 49 $( "#pwmSlider" ).on( "slidestop", function( e ) { 50 var pwm = Math.ceil($(this).val() * 2.55); 51 var pwmData = {"pin":9, "pwm":pwm}; 52 // 向第9脚送出PWM信号 53 $.ajax({ 54 url: "http://" + app.host + ":" + app.port + "/pwm", 55 data: pwmData, 56 success: function( d ) { 57 app.showMsg("收到服务器回应：" + d ); 58 } 59 }); 60 }); 61 62 $(document).off("pageshow", "#ctrlPage", pageEvt); 63 } 64 65 $(document).on("pageshow", "#splashPage", function( e ) { 66 var host = localStorage.getItem(‘deviceIP‘); 67 if (host === null) { 68 app.nextPage = "netPage"; 69 } else { 70 app.host = host; 71 app.port = localStorage.getItem(‘devicePort‘); 72 $("#deviceIP").val(app.host); 73 $("#devicePort").val(app.port); 74 app.nextPage = "ctrlPage"; 75 } 76 // 启动计时器 77 app.splashTimer(); 78 }); 79 80 app.init();