这里我将分享我学到的几种ionic登陆界面

在index.html文件里的内容是

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  6.     <title></title>  
  7.   
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">  
  9.     <link href="css/style.css" rel="stylesheet">  
  10.   
  11.     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above  
  12.     <link href="css/ionic.app.css" rel="stylesheet">  
  13.     -->  
  14.   
  15.     <!-- ionic/angularjs js -->  
  16.     <script src="lib/ionic/js/ionic.bundle.js"></script>  
  17.   
  18.     <!-- cordova script (this will be a 404 during development) -->  
  19.     <script src="cordova.js"></script>  
  20.   
  21.     <!-- your app's js -->  
  22.     <script src="js/app.js"></script>  
  23.     <script src="js/controllers.js"></script>  
  24.     <script src="js/services.js"></script>  
  25.   </head>  
  26.   <body ng-app="starter">  
  27.     <!-- 
  28.       The nav bar that will be updated as we navigate between views. 
  29.     -->  
  30.   
  31.     <ion-nav-bar class="bar-stable">  
  32.       <ion-nav-back-button>  
  33.       </ion-nav-back-button>  
  34.     </ion-nav-bar>  
  35.   
  36.     <!--  
  37.       The views will be rendered in the <ion-nav-view> directive below  
  38.       Templates are in the /templates folder (but you could also  
  39.       have templates inline in this html file if you'd like).  
  40.     -->  
  41.     <ion-nav-view></ion-nav-view>  
  42.   </body>  
  43. </html>  



在 controller.js 文件的代码：

angular.module('starter.controllers', [])

.controller('LogonCtrl',function($scope,$state){
    $scope.back = function(){
        $state.go('carousel');
    }
});
  



在app.js文件的代码：

[javascript] view plain copy
 
  1. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])  
  2.   
  3. .run(function($ionicPlatform) {  
  4.   $ionicPlatform.ready(function() {  
  5.    
  6.     if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {  
  7.         cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);  
  8.         cordova.plugins.Keyboard.disableScroll(true);  
  9.   
  10.     }  
  11.     if (window.StatusBar) {  
  12.       StatusBar.styleLightContent();  
  13.     }  
  14.   });  
  15. })  
  16.   
  17. .config(function($stateProvider, $urlRouterProvider) {  
  18.   
  19.   $stateProvider  
  20.   
  21.  .state('logon',{  
  22.         url:'/logon',  
  23.         templateUrl:'templates/logon.html',  
  24.         controller:'LogonCtrl'  
  25.       });  
  26.   
  27.   // if none of the above states are matched, use this as the fallback  
  28.   $urlRouterProvider.otherwise('/logon');  
  29.   
  30. });  


在这里，我新建了一个空白html文件，定义名称为logon.html

第一种是placeholder（占位符）模拟输入，当用户输入时，占位符将会隐藏


在logon.html里的代码如下：

[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list">  
  4.             <label class="item item-input">  
  5.                 <input type="text" placeholder="First Name">  
  6.             </label>  
  7.             <label class="item item-input">  
  8.                 <input type="text" placeholder="Last Name">  
  9.             </label>  
  10.             <label class="item item-input">  
  11.                 <input type="text" placeholder="password">  
  12.             </label>  
  13.         </div>  
  14.         <button class="button button-full">登陆</button>  
  15.     </ion-content>  
  16. </ion-view>  

接下来，第二个是内联标签，使用输入标签将标签放在输入元素的左边，当用户输入内容时标签不隐藏





在logon.html里的代码：
[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list">  
  4.             <label class="item item-input">  
  5.                 <span class="input-label">Username</span>  
  6.                  <input type="text">  
  7.             </label>  
  8.             <label class="item item-input">  
  9.                 <span class="input-label">Password</span>  
  10.                 <input type="password">  
  11.             </label>  
  12.         </div>  
  13.         <button class="button button-full">登陆</button>  
  14.     </ion-content>  
  15. </ion-view>  


第三个是堆叠标签，既使用占位符标签，也使用内联标签，当然，主要是它自身的堆叠效果（stacked）


在logon.html里的代码如下：

[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list">  
  4.             <label class="item item-input item-stacked-label">  
  5.                 <span class="input-label">Username</span>  
  6.                 <input type="text" placeholder="Mary">  
  7.             </label>  
  8.             <label class="item item-input item-stacked-label">  
  9.                 <span class="input-label">Password</span>  
  10.                 <input type="password"placeholder="Password">  
  11.             </label>  
  12.         </div>  
  13.         <button class="button button-full">登陆</button>  
  14.     </ion-content>  
  15. </ion-view>  





第四种是浮动标签


在logon.html里的代码如下：
[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list">  
  4.             <label class="item item-input item-floating-label">  
  5.                 <span class="input-label">Username</span>  
  6.                 <input type="text" placeholder="Username">  
  7.             </label>  
  8.             <label class="item item-input item-floating-label">  
  9.                 <span class="input-label">Password</span>  
  10.                 <input type="password" placeholder="Password">  
  11.             </label>  
  12.         </div>  
  13.         <button class="button button-full">登陆</button>  
  14.     </ion-content>  
  15. </ion-view>  



第五种 插图的形式







在logon.html里的代码如下：






[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list list-inset">  
  4.             <label class="item item-input">  
  5.                 <input type="text"placeholder="Username">  
  6.             </label>  
  7.             <label class="item item-input">  
  8.                 <input type="password" placeholder="Password">  
  9.             </label>  
  10.         </div>  
  11.         <button class="button button-full">登陆</button>  
  12.     </ion-content>  
  13. </ion-view>  












第六种  插入输入









在logon.html里的代码如下：






[html] view plain copy
 
  1. <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list">  
  4.             <div class="item-input-inset">  
  5.             <label class="item-input-wrapper">  
  6.                 <input type="text"placeholder="Username">  
  7.             </label>  
  8.             </div>  
  9.              <div class="item-input-inset">  
  10.              <label class="item-input-wrapper">  
  11.                 <input type="password" placeholder="Password">  
  12.              </label>  
  13.             </div>  
  14.          </div>  
  15.          <button class="button button-full">登陆</button>  
  16.      </ion-content>  
  17.  </ion-view>  












第七种  输入图标









在logon.html里的代码如下：






[html] view plain copy
 
  1.   <ion-view title="登陆页面">  
  2.     <ion-content>  
  3.         <div class="list list-inset">  
  4.             <label class="item item-input">  
  5.                 <i class="icon ion-person"></i>  
  6.                 <input type="text" placeholder="Username">  
  7.             </label>  
  8.             <label class="item item-input">  
  9.                 <i class="icon ion-locked"></i>  
  10.                 <input type="password"placeholder="Password">  
  11.             </label>  
  12.         </div>  
  13.         <button class="button button-full">登陆</button>  
  14.     </ion-content>  
  15. </ion-view>  
























第八种





















代码：












[html] view plain copy
 
  1. <ion-view>  
  2.     <div class="bar bar-header">  
  3.         <div class="title">登陆</div>  
  4.     </div>  
  5.     <ion-view>  
  6.         <ion-content style="margin-top: 40px">  
  7.             <div class="list item-input-inset">  
  8.                 <h4>Username：</h4>  
  9.                 <label class="item item-input">  
  10.                     <input type="text">  
  11.                 </label>  
  12.             </div>  
  13.             <div class="list item-input-inset">  
  14.                 <h4>Password：</h4>  
  15.                 <label class="item item-input">  
  16.                     <input type="tel">  
  17.                 </label>  
  18.             </div>  
  19.             <div class="list item-input-inset">  
  20.                 <h4>Email：</h4>  
  21.                 <label class="item item-input">  
  22.                     <input type="email">  
  23.                 </label>  
  24.             </div>  
  25.         </ion-content>  
  26.     </ion-view>  
  27. </ion-view>  

   






            

            
posted @ 
2016-09-19 17:38 
Anzhongliu 
阅读(195) 
评论(0) 
编辑 
收藏 
举报