zoukankan      html  css  js  c++  java

  • 这里我将分享我学到的几种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>  
    
   


    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  洛咕11月月赛部分题解 By cellur925
                    
    POJ 2411 Mondriaan's Dream 【状压Dp】 By cellur925
                    
    Luogu P1637 三元上升子序列【权值线段树】By cellur925
                    
    Luogu P1438无聊的序列【线段树/差分】By cellur925
                    
    Luogu P1558 色板游戏【线段树/状态压缩】By cellur925
                    
    Luogu P4403 [BJWC2008]秦腾与教学评估【二分答案】By cellur925
                    
    Luogu P3941 入阵曲【前缀和】By cellur925
                    
    查询事件状态，mysql查看事件是否开启，设置启动时自动开启方法
                    
    Logback详细整理，基于springboot的日志配置
                    
    使用release自动打包发布正式版详细教程
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/Anzhongliu/p/6091754.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看