整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
下實例中，通過切換不同開關(guān) checked 顯示不同的值，true 為打開，false 為關(guān)閉。
HTML 代碼
<ion-header-bar class="bar-positive">
<h1 class="title">開關(guān)切換</h1></ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">
Settings </div>
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked"
ng-checked="item.checked">
{{ item.text }} </ion-toggle>
<div class="item">
<!-- 使用 pre 標(biāo)簽展示效果更美觀 -->
<div ng-bind="settingsList | json"></div>
</div>
<div class="item item-divider">
Notifications </div>
<ion-toggle ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
Push Notifications </ion-toggle>
<div class="item">
<!-- 使用 pre 標(biāo)簽展示效果更美觀 -->
<div ng-bind="pushNotification | json"></div>
</div>
<ion-toggle toggle-class="toggle-assertive"
ng-model="emailNotification"
ng-true-value="'Subscribed'"
ng-false-value="'Unubscribed'">
Newsletter </ion-toggle>
<div class="item">
<!-- 使用 pre 標(biāo)簽展示效果更美觀 -->
<div ng-bind="emailNotification | json"></div>
</div>
</div>
</ion-content>由于pre標(biāo)簽沖突，實例中的 pre 已替換為 div標(biāo)簽，具體可以在"嘗試一下"中查看。
JavaScript 代碼
angular.module('ionicApp', ['ionic']).controller('MainCtrl', function($scope) {
$scope.settingsList=[
{ text: "Wireless", checked: true },
{ text: "GPS", checked: false },
{ text: "Bluetooth", checked: false }
];
$scope.pushNotificationChange=function() {
console.log('Push Notification Change', $scope.pushNotification.checked);
};
$scope.pushNotification={ checked: true };
$scope.emailNotification='Subscribed';
});css 代碼：
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;}效果如下所示：
ionic 單選框操作
ionic 手勢事件
ionic 是一個強(qiáng)大的 HTML5 應(yīng)用程序開發(fā)框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和 Javascript 構(gòu)建接近原生體驗的移動應(yīng)用程序。
ionic 主要關(guān)注外觀和體驗，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應(yīng)用程序開發(fā)。
ionic是一個輕量的手機(jī)UI庫，具有速度快，界面現(xiàn)代化、美觀等特點(diǎn)。為了解決其他一些UI庫在手機(jī)上運(yùn)行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。
ionic 特點(diǎn)
1.ionic 基于Angular語法，簡單易學(xué)。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護(hù)。
4.ionic 提供了漂亮的設(shè)計，通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。
5.ionic 專注原生，讓你看不出混合應(yīng)用和原生的區(qū)別
6.ionic 提供了強(qiáng)大的命令行工具。
7.ionic 性能優(yōu)越，運(yùn)行速度快。
學(xué)習(xí)前你需要了解？
學(xué)習(xí)前你需要了解以下基礎(chǔ)知識：
HTML
CSS
Javascript
Angular
著 HTML5 在 2014 年的推出，HTML 已經(jīng)確定了它的地位。Ionic Framework 的開發(fā)者馬上就認(rèn)識到，這是將 HTML5 用于原生和混合應(yīng)用開發(fā)平臺的好時機(jī)。他們的口號是“構(gòu)建一次，在任何地方運(yùn)行”。
使用一個開源的 SDK，開發(fā)者可以為 iOS 和 Android（是的，還包括 Blackberry）創(chuàng)建 Ionic Framework app。而且，Kumulos Cordova SDK 現(xiàn)在已與 Ionic 框架集成，因此不應(yīng)再為制作“劣質(zhì)”的 app 找借口。
下面將介紹 5 個使用 Ionic 框架構(gòu)建優(yōu)秀 app 的技巧。
1、使用 Creator
為什么要讓事情變得更加困難？不想屈服于編寫臟代碼？你是否更像一個可視化開發(fā)者？那么，Ionic Creator 就是為你而生的。Ionic Creator 是一個拖放的界面工具，只需點(diǎn)擊幾下鼠標(biāo)，便可將你的想法應(yīng)用到 app。
通過 Creator，Ionic 為開發(fā)者提供了一個現(xiàn)成的組件庫，開發(fā)者可以盡情使用他們。app 設(shè)計完成后，可將它分享給同事以交流意見和建議。除此之外，還可以輕松導(dǎo)出你的 Creator 項目至原生 IPA 和 APK 文件，以直接安裝在設(shè)備上。
創(chuàng)作者還可以通過應(yīng)用程序的想法，更容易地銷售您的客戶端 - 使用內(nèi)置的功能，如“添加朋友”，讓客戶（或潛在的客戶端）檢查應(yīng)用程序，同時仍在開發(fā)中提供其輸入。 更不用說比嘗試讓非技術(shù)人員使用Testflight更容易了。
Creator 還可以讓你在 app 中更容易向別人展示 app —— 使用內(nèi)置的功能，如“添加好友”，即使 app 仍在開發(fā)期間，也可以讓客戶（或潛在的客戶）查看 app 并提供輸入功能。這比讓非技術(shù)人員使用 Testflight 更容易。
2、使用文檔
每個人都會和你說 RTFM(Read The Fucking Manual)。但是，在 Ionic 中卻從不會出現(xiàn)這種情況。為什么？因為Ionic 的文檔確實很好。事實上，你可以復(fù)制文檔中的部分代碼，并將其直接用于你的 app。為什么當(dāng)有現(xiàn)成的代碼在你面前時，還要花時間為頭像編寫一個顯示列表？當(dāng)然，你可能需要修改代碼，但這是快速開發(fā)的好方法。
3、自定義組件
Ionic 中的組件庫是一個真正節(jié)省時間的利器。然而，它也是一把雙刃劍 —— 因為 Ionic 組件是如此容易使用，每個人都可以使用它，這就使得你的 app 看起來會和其他人的是如此相似。但是可以通過引入一些自定義的 CSS 并調(diào)整一些 Ionic 預(yù)定義類以創(chuàng)建自己的樣式來避免此問題。
4、讓 Ionic 接手“控制權(quán)”
使用 Ionic 框架開發(fā) app，最好的地方是你不需要每一件事都親自去做。
針對 iOS 和 Android（和 Blackberry），制作多種不同格式的啟動頁可能會十分痛苦。使用 Ionic，只需要設(shè)計合適的 app 圖標(biāo)即可，有更多的重要的事需要去做。不用擔(dān)心，它的使用很簡單，通過使用 Ionic CLI，只需在平臺目錄中放置合適的文件即可（Ionic 可與 .png, Photoshop, 和 Illustrator 格式兼容），這樣就可以輕松為 iOS 和 Android 生成 app 圖標(biāo)和啟動頁界面。
5、朝著原生的方向
將 app 無縫集成到操作系統(tǒng)中，是為用戶提供優(yōu)秀體驗的最好辦法之一。通過使用 Platform Device Class，Ionic 變得更易執(zhí)行此操作。iOS, Windows Phone, iPad, 和 Android 都有它們自己的特定類，以便在 app 運(yùn)行時給予 Ionic app 原生的外觀和感覺。這些類可以在不同操作系統(tǒng)版本之間的 iOS 和 Android 上進(jìn)一步細(xì)分。
這并不是全部
當(dāng)然，上面提到的亮點(diǎn)并不是 Ionic 內(nèi)置的所有優(yōu)秀特性。正如開發(fā)者喜歡在文檔中說的，“使用 Ionic 的可能性是永無止境的”，但我希望至少能給大家提供幾個關(guān)于如何構(gòu)建優(yōu)秀的 Ionic Framework app 的想法。
譯自：https://dzone.com/
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
