1 <style>
3 body{
4 background-color:#fff;
5 }
6 .auth-tab-wrapper{
7 height:70px;
8 }
9 #sms-tab,#boarding-tab{
10 float:left;
11 height:60px;
12 padding-top:10px;
13 width:50%;
14 background-color:#fff;
15 text-align:center;
16 font-family:'微软雅黑';
17 }
18 #boarding-tab{
19 background-color:#5fd7f6;
20 }
21 .phoneBox{
22 margin:10px 0 0 10%;
23 height:40px;
24 width:80%;
25 }
26 #phoneNumID{
27 height:40px;
28 width:60%;
29 }
30 .sms-btn{
31 height:40px;
32 width:35%;
33 }
34 #passwordID{
35 margin:10px 10% 0 10%;
36 height:40px;
37 width:80%;
38 }
39 .sms-sub{
40 margin:10px 10% 0 10%;
41 width:80%;
42 height:40px;
43 }
44 .auth-content-wrapper{
45 padding-top:10px;
46 }
47
48 #boarding-content{
49 display:none;
50 }
51 table,tr,td{
52 border:0;
53 }
54 #boarding-content table{
55 width:90%;
56 margin:0 auto;
57 font-family:'微软雅黑';
58 font-size:12px;
59 }
60 #boarding-content input[type=text]{
61 margin:3px 0;
62 height:40px;
63 width:100%;
64 }
65 #boarding-content input[type=button]{
66 margin-top:3px;
67 height:40px;
68 width:100%;
69 }
70 #second-page{
71 display:none;
72 }
73
74
75 </style>
76
77
78 <div id="first-page">
79
80 <!--滚动图片需要按照下面的html代码构建-->
81 <div id="html-slider" class="swipe">
82 <div class="swipe-wrap">
83 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226800258.jpg" /></div>
84 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226803744.jpg" /></div>
85 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226825527.jpg" /></div>
86 </div>
87 </div>
88
89
90 <div class="auth-box">
91 <div class="auth-tab-wrapper">
92 <div id="sms-tab" onclick="showAuthContent('sms')">短信认证<br/>SMS Auth</div>
93 <div id="boarding-tab" onclick="showAuthContent('boarding')">登机牌认证<br/>Bording Pass Auth</div>
94 </div>
95 <div class="auth-content-wrapper">
96 <div id="sms-content">
97 <div class='phoneBox'>
98 <input id="phoneNumID" type="text" placeholder='请输入手机号' />
99 <input class="sms-btn" type="button" onclick="sendMessage()" value="获取验证码" />
100 </div>
101 <input id="passwordID" type="password" placeholder='请输入验证码'/><br/>
102 <input class="sms-sub" type="button" onclick="authOnline(1)" value="认证上网" />
103 </div>
104 <div id="boarding-content">
105 <table>
106 <tr><td>证件号/POSSPORT：</td>
107 <td><input type="text"id="boarding-certificateNo" /></td></tr>
108 <tr><td>航班号/FLIGHT：</td>
109 <td> <input type="text" id="boarding-flyNo"/></td></tr>
110 <tr><td> 座位号/SEAT：</td>
111 <td><input type="text" id="boarding-userName"/></td></tr>
112 <tr><td colspan='2'>
113 <input type="button" value="登机牌认证/Bording Pass Auth" onclick="authOnline(7)"/></td></tr>
114 </table>
115
116 </div>
117 </div>
118 </div>
119 </div>
120
121 <div id="second-page">
122 <img src="http://172.24.128.187/ngProxy//imagesuqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150519/1432029502296.jpg" width="100%"/>
123
124 </div>
125
126
127 <script>
128
129 function showAuthContent(type){
130 if('sms'==type){
131 $('#sms-tab').css('background-color','#fff');
132 $('#boarding-tab').css('background-color','#5fd7f6');
133 $('#sms-content').show();
134 $('#boarding-content').hide();
135 }else if('boarding'==type){
136 $('#sms-tab').css('background-color','#5fd7f6');
137 $('#boarding-tab').css('background-color','#fff');
138 $('#sms-content').hide();
139 $('#boarding-content').show();
140 }
141 }
142
143
144 function sendMessage(){
145 var result = sendSMS("#phoneNumID");
146 if(result=='succ'){
147 alert("短信发送成功！");
148 }else if(result=='fail'){
149 alert("短信发送失败！");
150 }
151 }
152
153 //认证上网函数
154 function authOnline(type){
155 var result;
156 if(1==type){
157 //短信认证
158 result = authenticate(1, '#phoneNumID', '#passwordID');
159 }else if(7==type){
160 //登机牌认证
161 result = authenticate(7,'#boarding-userName','#boarding-certificateNo','#boarding-flyNo');
162 }else{
163 //这个判断分支必须存在，不能删除
164 result = authenticate();
165 }
166 if(result == 'succ'){
167 //这里可以编写任意认证上网成功的页面效果，例如：
168 $('#first-page').hide();
169 $('#second-page').show();
170 }else if(result == 'fail'){
171 //这里可以编写任意认证上网失败的页面效果，例如：
172 alert("用户名和密码错误");
173 }
174 }
175
176 </script>
