登机牌认证Demo

  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>