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();
原文地址：https://www.cnblogs.com/kingboy100/p/10403005.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。