ionic

一、Ionic介绍

what？
一个强大的H5应用程序开发框架，使用前端技术，构建接近原生体验的移动应用程序。

基于ng和cordova，自己也有一套ui组件。

why？
移动应用程序开发，为了更好的类似原生应用的体验，不仅要能够调用底层的硬件，还要在ui上符合移动应用程序的效果。
ionic、jQueryMobile

特征：
①完美融合ng

②专注开发原生应用程序能够实现的功能，结合cordova来实现
③ui符合移动端的效果
④提高了强大的命令行操作
⑤性能优越，运行速度快


ionicframework.com
http://ionicons.com/

how??
①命令行
http://ionicframework.com/getting-started/
②压缩包


二、使用Ionic

将压缩包中的文件引入到工程中，创建html文件，通过link直接引入css文件，script引入ionic.bundle.js，创建并调用模块，通过指令编写应用程序。


Ionic 颜色：
light\stabel\positive\calm\balanced\energized\assertive\royal\dark

ion-gear-a
ion-ios-flower
ion-no-smoking
ion-person


1、button
button/button-stable/button-positive../button-outline/button-clear/button-large/button-small/icon-left/icon-right/ion-**/button-block/button-bar

2、list

list/item/item-icon-left/item-icon-right/badge/badge-assertive/list-inset(列表具有嵌入效果)/item-thumbnail-left/item-thumbnail-right/item-avator


3、card
card/item/item-divider


4、form
并不是直接调用form标签，而是通过list组织表单内容
list/item/item-input/item-stacked-label/item-floating-label/input-label


form radio：
<ion-list>
<ion-radio> 男</ion-radio>
<ion-radio>女</ion-radio>
</ion-list>

综合示例：

 

  1 <!DOCTYPE html>
  2 <html ng-app="myApp">
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  6     <link rel="stylesheet" href="css/ionic.css"/>
  7     <script src="js/ionic.bundle.js"></script>
  8     <title></title>
  9 </head>
 10 <body>
 11     <ion-header-bar>
 12         <h1 class="title">Header</h1>
 13     </ion-header-bar>
 14     <ion-content>
 15         <p>Form</p>
 16         <div class="list list-inset">
 17             <label class="item item-input">
 18                 <span class="input-label">姓名：</span>
 19                 <input type="text" placeholder="请输入用户名"/>
 20             </label>
 21             <label class="item item-input">
 22                 <span class="input-label">需要查找什么：</span>
 23                     <i class="icon ion-search placeholder-icon"></i>
 24                     <input type="search" placeholder="搜索内容"/>
 25             </label>
 26             <label class="item item-input">
 27                 <span class="input-label">选择日期：</span>
 28                 <input type="date"/>
 29             </label>
 30             <label class="item item-input item-select">
 31                 <div class="input-label">
 32                     选择喜欢的颜色
 33                 </div>
 34                 <select>
 35                     <option value="r">红色</option>
 36                     <option value="g" selected>绿色</option>
 37                     <option value="b">蓝色</option>
 38                     <option value="y">黄色</option>
 39                     <option value="p">紫色</option>
 40                 </select>
 41             </label>
 42             <div class="item item-toggle item-icon-left">
 43                 <li class="icon ion-bluetooth"></li>
 44                 <h2>蓝牙</h2>
 45                 <label class="toggle toggle-assertive">
 46                     <input type="checkbox"/>
 47                     <div class="track">
 48                         <div class="handle"></div>
 49                     </div>
 50                 </label>
 51             </div>
 52             <div class="item item-toggle item-icon-left">
 53                 <i class="icon ion-wifi"></i>
 54                 <h2>WIfi</h2>
 55                 <label class="toggle">
 56                     <input type="checkbox"/>
 57                     <div class="track">
 58                         <div class="handle"></div>
 59                     </div>
 60                 </label>
 61             </div>
 62             选择喜欢的电影
 63             <div class="item item-checkbox">
 64                 <label class="checkbox">
 65                     <input type="checkbox">
 66                 </label>
 67                 钢铁侠
 68             </div>
 69             <div class="item item-checkbox">
 70                 <label class="checkbox">
 71                     <input type="checkbox">
 72                 </label>
 73                 蜘蛛
 74             </div>
 75             <div class="item item-checkbox">
 76                 <label class="checkbox">
 77                     <input type="checkbox">
 78                 </label>
 79                 蝙蝠侠
 80             </div>
 81             <div class="item item-checkbox">
 82                 <label class="checkbox">
 83                     <input type="checkbox">
 84                 </label>
 85                 王八侠
 86             </div>
 87             <div class="item">
 88                 选择喜欢的电影2
 89                 <ion-list>
 90                     <ion-checkbox>蝙蝠侠</ion-checkbox>
 91                     <ion-checkbox>蝙蝠侠</ion-checkbox>
 92                     <ion-checkbox>蝙蝠侠</ion-checkbox>
 93                     <ion-checkbox>蝙蝠侠</ion-checkbox>
 94                 </ion-list>
 95             </div>
 96             <div class="item">
 97                 选择性别
 98                 <ion-list>
 99                     <ion-radio>男</ion-radio>
100                     <ion-radio>女</ion-radio>
101                 </ion-list>
102             </div>
103         </div>
104     </ion-content>
105     <ion-footer-bar>
106         <h1 class="title">Footer</h1>
107     </ion-footer-bar>
108 <script>
109     var app = angular.module('myApp', ['ionic']);
110 </script>
111 </body>
112 </html>
View Code

 

效果如下图：

 

5、tabs标签页
tabs/tab-item/tabs-icon-only/left/top


6、grid
row/col/col-10/20/25../col-offset-10/20..
col-center/top/bottom

 

ionic示例
通过grid的row和col来实现一个类似相册的展示效果

分析：
①控制器中模拟一些数据：对象数组，对象包含图片路径、名称、价格
②通过row和col去展示数据
遍历数组，通过ngRepeat，遍历的是行，行要显示4列

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <link rel="stylesheet" href="css/bootstrap.css"/>
 8     <script src="js/ionic.bundle.js"></script>
 9     <title></title>
10     <style>
11         .syen{
12             color:#e4393c;
13             font-size: 1.2em;
14         }
15     </style>
16 </head>
17 <body>
18     <ion-header-bar>
19         <h1 class="title">Header</h1>
20     </ion-header-bar>
21     <ion-content>
22         <h1 class="text-center">菜品列表</h1>
23         <div ng-controller="myModule">
24             <div class="list list-inset">
25                     <div class="row item" ng-repeat="obj in foodData" ng-if="$index%4==0">
26                         <div class="col">
27                             <img class="img-rounded" src="img/{{foodData[$index].img}}" alt=""/>
28                             <h3>{{foodData[$index].name}}</h3>
29                             <p><span class="syen">￥</span>{{foodData[$index].price}}</p>
30                         </div>
31                         <div class="col">
32                             <img class="img-rounded" src="img/{{foodData[$index+1].img}}" alt=""/>
33                             <h3>{{foodData[$index+1].name}}</h3>
34                             <p><span class="syen">￥</span>{{foodData[$index+1].price}}</p>
35                         </div>
36                         <div class="col">
37                             <img class="img-rounded" src="img/{{foodData[$index+2].img}}" alt=""/>
38                             <h3>{{foodData[$index+2].name}}</h3>
39                             <p><span class="syen">￥</span>{{foodData[$index+2].price}}</p>
40                         </div>
41                         <div class="col">
42                             <img class="img-rounded" src="img/{{foodData[$index+3].img}}" alt=""/>
43                             <h3>{{foodData[$index+3].name}}</h3>
44                             <p><span class="syen">￥</span>{{foodData[$index+3].price}}</p>
45                         </div>
46                     </div>
47             </div>
48         </div>
49     </ion-content>
50     <ion-footer-bar>
51         <h1 class="title">Footer</h1>
52     </ion-footer-bar>
53 <script>
54     var app = angular.module('myApp', ['ionic']);
55     app.controller('myModule',['$scope',function($scope){
56         $scope.foodData = [
57             {img:'p0281.jpg',name:'京酱肉丝1',price:'28'},
58             {img:'p2679.jpg',name:'京酱肉丝2',price:'28'},
59             {img:'p0281.jpg',name:'京酱肉丝3',price:'28'},
60             {img:'p4788.jpg',name:'京酱肉丝4',price:'28'},
61             {img:'p6611.jpg',name:'京酱肉丝5',price:'28'},
62             {img:'p7818.jpg',name:'京酱肉丝6',price:'28'},
63             {img:'p7933.jpg',name:'京酱肉丝7',price:'28'},
64             {img:'p8489.jpg',name:'京酱肉丝8',price:'28'},
65             {img:'p0281.jpg',name:'京酱肉丝9',price:'28'},
66             {img:'p9138.jpg',name:'京酱肉丝10',price:'28'},
67             {img:'p0281.jpg',name:'京酱肉丝11',price:'28'},
68             {img:'p9210.jpg',name:'京酱肉丝12',price:'28'},
69             {img:'p0281.jpg',name:'京酱肉丝13',price:'28'},
70             {img:'p9210.jpg',name:'京酱肉丝14',price:'28'}
71         ];
72     }]);
73 </script>
74 </body>
75 </html>

以上示例代码效果图如下：

posted @ 2017-01-07 11:25  时间脱臼  阅读(396)  评论(0)    收藏  举报