16091四、ionic指令簡單佈局

時間  2019-11-11
標籤 ionic 指令 簡單 佈局 简体版
原文   原文鏈接 
1)   添加引用類庫(ionic樣式和ionic js文件)

2)   標題欄，頁腳欄，內容區

3)   Js引入ionic類庫，添加頁面操做方法和對象

4)   數據初始化

5)   Html頁面綁定方法和對象

<!DOCTYPE html>

<html ng-app="myApp">

<head>

       <meta charset="UTF-8">

         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

         <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">

    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

</head>

<body ng-controller="myCtrl">

         <ion-header-bar align-title="center" class="bar-positive">                         1. 標題欄

           <div class="buttons">

             <button class="button">Left Button</button>

           </div>                  

                     <h1 class="title">ion-header-bar</h1> 

                     <a class="button button-clear icon ion-cloud"></a>

         </ion-header-bar>

         <ion-content class="has-header" overflow-scroll="true">             3. 內容區 

<!--Form對象 -->                                

                     <div class='list card' ng-controller="contr-2">

                       <h3> 控制器</h3>

                       <label class="item item-input">

                               <span class="input-label">First Name：</span>

                          <input type="text" ng-model="firstName" placeholder="First Name">

                       </label>

                       <label class="item item-input">

                               <span class="input-label">Last Name：</span>

                          <input type="text" ng-model="lastName" placeholder="Last Name">

                       </label>

                       <label class="item"> Full Name : <span ng-bind="firstName + ',' + lastName"></span></label> 

                      <button class="button button-calm button-block"  ng-click="hello()">button-light</button>

                     </div>                      

<!--列表對象 -->

                     <ul class="list card" ng-init="number=[1,2,2,3,4]" >

                                <li class="item" ng-repeat="x in number track by $index"> 遍歷重複集合

                                           <span ng-bind="$index"></span>  : {{x}} 索引號

                                </li>

                     </ul> 

                     <ul class="list">

                                 <li class="item" ng-repeat="item in items">

                                            <span ng-bind="$index"></span>  :{{item}}

                                 </li>

                     </ul>                                    

         </ion-content>       

         <ion-footer-bar align-title="left" class="dark-bg">                    2. 頁腳欄

                     <div class="buttons">                     按鈕

                         <button class="button" ng-click="doSomething()">Left Button</button>

                     </div>                                                                                 

              <h1 class="title light">ion-footer-bar</h1>    標題

                     <div class="button-bar">                 工具組

                                 <a class="button button-clear icon ion-ios-loop"  ></a>

                     </div>

         </ion-footer-bar>

</body>

<script>

    angular.module("myApp",["ionic"])

               .controller("contr-2",function($scope){

                           $scope.firstName = 'zhang';

                           $scope.lastName = 'san';

                           $scope.hello = function () {

                                       alert("hello!"); 

                           };                              

               })        

               .controller("myCtrl",function($scope){      添加控制器

                           $scope.items = [];                  數據初始化

                           for(var i=0;i<20;i++)

                                       $scope.items.push("line " + i);

                           $scope.doSomething = function () {    添加方法

                                       console.log("doSomething。。。");

                           };                              

               });       

</script>          

</html>

1.4.1.     ionic 頭部和底部

ion-header-bar 若是給它加上'bar-subheader' 這個樣式，它就是副標題

align-title 對齊若是沒有設置，它將會按照手機的默認排版(Ios的默認是居中，Android默認是居左)。它的值能夠是 'left','center','right'。

no-tap-scroll 設置 header-bar 是否跟隨着內容的滾動而滾動，就是是否固定在頂部。它的值是布爾值（true/false）  

ion-footer-bar

align-title 若是沒有設置，它將會按照手機的默認排版(Ios的默認是居中，Android默認是居左)。它的值能夠是 'left','center','right'。

與 ion-header-bar 不一樣的是，ion-footer-bar 只有 align-title 這個 API。

ion-content

指令定義內容區域. overflow-scroll="true" 使用系統內置的滾動條

1.4.2.     表單輸入 ion-checkbox   ion-radio  ion-spinner

<body ng-controller="myCtrl">

           <div class="list card">

                      <div class="item item-divider">  當前支付方式: {{ data.pay }} </div>

                                  <ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay">

                                        {{ item.text }}

                                   </ion-radio>                                     

                      <div class="item item-divider">pay : {{ data.pay }}</div>

                                  <ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">

                                        {{ item.text }}

                                   </ion-radio>

                      <div class="item item-divider">            pay: {{ data.pay }} <br> mycity: {{ mycity }}<br>

                                  <select ng-model="data.pay" ng-options="pay.value as pay.text for pay in payList" ng-change="payChange(data)"></select>                          

                                 <select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"

ng-change="cityChange(mycity)"></select>注意綁定值，傳遞參數

                      </div>

           </div>           

             <!--綁定json列表數據的text和checked-->   

<div class="list card">      <!--選中顏色 -->     

                      <ion-checkbox class="checkbox-dark" ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">

                                        {{ item.text }}: {{item. checked }}

                  </ion-checkbox>   

                  <ion-toggle ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">

                                        {{ item.text }}

                         </ion-toggle>

               </div>

<!--綁定json對象數據的checked    數據改變事件--> 

      <ion-checkbox  ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-checkbox> 

            <ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-toggle> 

       <!--綁定 判斷是否選中-->  

      <ion-checkbox ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed"> Newsletter</ion-checkbox>

<ion-toggle ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed" toggle-class="toggle-assertive" >                     

                  Newsletter </ion-toggle>   

      <!--查看json對象-->

      <div class="item">

              <pre ng-bind="devList | json"></pre>  <pre ng-bind="pushNotification | json"></pre>  <pre ng-bind="emailNotification | json"></pre>

  </div>

            <div class="list">

                      <div class="item item-divider">  當前支付方式: {{ data.pay }}  pay : {{ data.pay }} </div>

                        <ion-radio ng-repeat="item in payList" ng-value="item.value"  ng-model="data.pay"> {{ item.text }} </ion-radio>

                        <ion-radio ng-repeat="item in payList" ng-value="item.value"  ng-model="data.pay"  ng-change="payChange(item)"  name="pay">

                                   {{ item.text }}

                        </ion-radio>

</div>

             </div> 

</body>

</html>

<script>

angular.module("myApp",["ionic"])

           .controller('myCtrl', function ($scope) {

           $scope.mycity = { id: 1, name: '北京',value: 'beijng', group: '中國' };

     $scope.Cities = [{ id: 1, name: '北京',value: 'beijng', group: '中國' },

{ id: 2, name: '上海',value: 'shanghai', group: '中國' },{ id: 3, name: '廣州',value: 'guangzhou', group: '中國' }];

$scope.cityChange = function(item) {console.log("item", item); };

           $scope.payList = [{ text: "albaba alipay", value: "alipay" },{ text: "ebay paypal", value: "paypal" } ];

           $scope.data = { pay: 'alipay'};

           $scope.payChange = function(item) { console.log("pay:", item.pay); };

           /////////////////////////////////////////

           $scope.devList = [{ text: "HTML5", checked: true},{ text: "CSS3", checked: false},{ text: "JavaScript", checked: false}];

           $scope.pushNotification = { checked: true};   

           $scope.emailNotification = 'Subscribed';   

           $scope.pushNotificationChange = function () { console.log('Push Notification Change', $scope.pushNotification.checked); };

});

</script>

 

 

 

1.4.2.1. 複選按鈕 : ion-checkbox 開關按鈕ion-toggle

  支持數據綁定。使用可選的ng-model屬性，

綁定：可直接綁定列表對象，根據item對象是否選中；可直接綁定對象屬性true；可綁定對象的文本是否爲指定的值。

事件：ng-change 對象選中值改變

1.4.2.2. 單選按鈕 : ion-radio

使用可選的ng-model屬性，實現與做用域變量的數據綁定

使用可選的ng-value屬性，可使用做用域變量設置單選按鈕對應的值

     list列表json對象中選中單個json,  ng-change 對象選中值改變 傳入 item

1.4.2.3. 下拉選擇 : select

使用可選的ng-model屬性，實現與做用域變量的數據綁定

<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"

ng-change="cityChange(mycity)"></select>

 ng-model爲實際選中的值mycity，ng-options對列表對象或hashmap輪詢，分組。處理好顯示信息和實際值 ，

ng-change 對象選中值改變 傳入 item

1.4.2.4. 等待指示器 : ion-spinner

<ion-item ng-repeat="item in items" >

    <ion-spinner icon="{{item}}"></ion-spinner>

    </ion-item>

$scope.items = ["android","ios","ios-small","bubbles","circles","crescent","dots","lines","ripples","spiral"];

1.4.3.     ionic 手勢事件

1.4.3.1.  on-hold長按的時間是500毫秒   

<button   on-hold="onHold()"           class="button">       Test</button>

1.4.3.2. on-tap       

這個是手勢輕擊事件，若是長按時間超過250毫秒，那就不是輕擊了。。         

<button on-tap="onTap()" class="button">  Test     </button>

1.4.3.3. on-double-tap手雙擊屏幕事件

<button   on-double-tap="onDoubleTap()"class="button">       Test</button>

1.4.3.4. on-touch  

這個和 on-tap 仍是有區別的，這個是當即執行，並且是用戶點擊立馬執行。不用等待 touchend/mouseup 。         

   <button on-touch="onTouch()"       class="button">       Test     </button>    

1.4.3.5. on-release

當用戶結束觸摸事件時觸發。        

<button   on-release="onRelease()"            class="button">       Test</button>         

1.4.3.6. on-drag    

這個有點相似於PC端的拖拽。當你一直點擊某個物體，而且手開始移動，都會觸發 on-drag。  

<button   on-drag="onDrag()"class="button">      Test</button>         

1.4.3.7. on-drag-up        向上拖拽

<button   on-drag-up="onDragUp()"            class="button">      Test</button>         

1.4.3.8. on-drag-right向右拖拽。    

<button   on-drag-right="onDragRight()"    class="button">       Test</button>         

1.4.3.9. on-drag-down  向下拖拽

<button   on-drag-down="onDragDown()" class="button">Test</button>    

1.4.3.10.  on-drag-left   向左邊拖拽

<button   on-drag-left="onDragLeft()"         class="button">Test</button>    

1.4.3.11.  on-swipe         指手指滑動效果

能夠是任何方向上的。並且也和 on-drag 相似，都有四個方向上單獨的事件。          

<button   on-swipe="onSwipe()"       class="button">      Test</button>

1.4.3.12.  on-swipe-up  向上的手指滑動效果。    

<button   on-swipe-up="onSwipeUp()"       class="button"> Test</button>   

1.4.3.13.  on-swipe-right       向右的手指滑動效果。    

<button   on-swipe-right="onSwipeRight()"           class="button">      Test</button>         

1.4.3.14.  on-swipe-down     向下的手指滑動效果。    

<button   on-swipe-down="onSwipeDown()"        class="button">      Test</button>         

1.4.3.15.  on-swipe-left 向左的手指滑動效果

<button on-swipe-left="onSwipeLeft()"    class="button">      Test</button>

1.4.3.16.  $ionicGesture

一個angular服務展現ionicionic.EventController手勢。

on(eventType, callback, $element)  在一個元素上添加一個事件監聽器。

eventType            string  監聽的手勢事件。

callback    function(e)   當手勢事件發生時觸發的事件。

$element element        angular元素監聽的事件。

options     object               對象。

off(eventType, callback, $element) 在一個元素上移除一個手勢事件監聽器。

eventType            string  移除監聽的手勢事件。

callback    function(e)   移除監聽器。

$element element        被監聽事件的angular元素。

1.4.4.     ionic 列表操做以及高性能的ng-repeat

<ion-header-bar class="bar-positive">  經過ng-click修改變量，進而控制按鈕是否顯示

        <a class="button button-clear icon ion-ios-minus-outline" ng-click="flag.showDelete=!flag.showDelete;flag.showReorder=false;"></a>

        <h1 class="title">成員按鈕</h1>

        <a class="button" ng-click="flag.showReorder=!flag.showReorder;flag.showDelete=false;">從新排序</a>

</ion-header-bar>

<ion-list can-swipe="true" show-delete="flag.showDelete" show-reorder="flag.showReorder">

<ion-item ng-repeat="item in items">

                         {{item}}

     <ion-option-button class="button-calm icon ion-edit"></ion-option-button>

     <ion-option-button class="button-energized icon ion-share"></ion-option-button>

             <ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button>  item爲傳入對象

             <ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>

  </ion-item>

   </ion-list>

<script>

angular.module("myApp",["ionic"])

.controller("myCtrl",function($scope){

  $scope.flag={showDelete:false,showReorder:false};

  $scope.items=["Chinese","English","German","Italian","Janapese","Sweden","Koeran","Russian","French"];

  $scope.delete_item=function(item){

             var idx = $scope.items.indexOf(item);

             $scope.items.splice(idx,1);

  };

$scope.move_item = function(item, fromIndex, toIndex) {

             $scope.items.splice(fromIndex, 1);

             $scope.items.splice(toIndex, 0, item);

  };

  $scope.close = function(){

             $ionicListDelegate.closeOptionButtons();

  };

});

1). ion-list ion-item

show-delete - 是否顯示成員內的delete按鈕

show-reorder - 是否顯示成員內的reorder按鈕

can-swipe - 是否支持滑動方式顯示成員option按鈕

2). ion-list ion-item 成員

ion-option-button - 選項按鈕

             ng-click指令來掛接點擊事件監聽函數  var optionListener = function(item){...}

ion-delete-button - 刪除按鈕                var deleteListener = function(item){...}

ion-reorder-button - 重排按鈕              var reorderListener = function(item,$fromIndex,$toIndex){...}

3). collection-repeat : 高性能的ng-repeat

             <ion-list>

                         <ion-item collection-repeat="item in items">

                               {{item}}

                               <ion-option-button class="button-positive">...</ion-option-button>

                         </ion-item>

             </ion-list>

collection-repeat指令比ng-repeat更適用於大數據量 的列表數據，它只將處於可視區域的數據渲染到DOM上。

collection-repeat指令接受一個枚舉表達式，同時能夠附加如下的屬性：

item-width - 可選。聲明重複元素的寬度

item-height - 可選。聲明重複元素的高度

item-render-buffer - 可選。須要載入渲染緩衝區的可視數據先後的數量。默認爲3

force-refresh-images - 可選。滾動時是否強制刷新圖像。容許值：true | false

4). 腳本接口 : $ionicListDelegate

showReorder([showReorder]) - 顯示/關閉排序按鈕

showReorder的容許值爲：true | false。可使用一個做用域上的表達式

showDelete([showDelete]) - 顯示/關閉刪除按鈕

showDelete的容許值爲： true | false。可使用一個做用域上的表達式

canSwipeItems([canSwipeItems]) - 是否容許經過滑動方式來顯示成員選項按鈕

canSwipeItems的容許值爲：true | false。可使用一個做用域上的表達式

closeOptionButtons() - 關閉全部選項按鈕

 

1.4.5.     ionic 選項卡欄操做

1.4.5.1. ion-tabs簡介，設置，標題文字、圖標和徽章顯示隱藏

  <ion-tabs class="tabs-positive tabs-striped">   tabs-top tabs-dark tabs-icon-only位置和條帶風格 

             <ion-tab title="tab1">

                         <ion-view>  ……

             </ion-tab>         //圖標 icon-on和icon-off - 選中未選中狀態圖標     微章內容及樣式

             <ion-tab title=" tab2"  icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">

<ion-nav-view name="tab-tab2"></ion-nav-view>  在name 放tab-tab2

             </ion-tab>

             <ion-tab title="tab3"  disabled="true">      // disabled - 禁止，hidden - 隱藏

                         <ion-view>

                                     <ion-content class="energized-bg">

                                                tab 3 content

                                     </ion-content>

                         </ion-view>

             </ion-tab>

  </ion-tabs>

1.4.5.2. ion-tabs 事件和 $ionicTabsDelegate

事件：on-select ，on-deselect ，ng-click

$ionicTabsDelegate服務：select(index)，selectedIndex()

<ion-tab title="tab3" on-select="on_select(3)">

             <ion-view>

                         <ion-content class="energized-bg">

                                     tab 3 content

                         </ion-content>

             </ion-view>

</ion-tab>

 

<script>

angular.module("ezApp",["ionic"])

.controller("ezCtrl",function($scope){

  $scope.title="ion-tab : events";

  $scope.on_select = function(idx){

             $scope.title = ["ion-tab ",idx," selected!"].join("");

  }

})

.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){

  var idx=0;

  $interval(function(){                                        // interval 定時刷新  

             idx = (idx + 1) % 3;

        console.log(idx);

             $ionicTabsDelegate.select(idx);                          // select(index) - 選中指定的選項頁

  },2000);

});

</script>

1.4.5.3. ion-tabs路由詳解

ionic中結合tab狀態嵌套

  app.config(function($stateProvider,$urlRouterProvider) {

             $stateProvider

         .state('tab', {

           url: "/tab",

           abstract:true,

           templateUrl: "tabs.html"

         })              

         .state('tab.tab1', {                            1).使用「點標記法」

           url: '/tab1',

           views:{

               'tab-tab1':{

                   templateUrl: "tab-tab1.html",

                   controller:'tab1Controller'

               }

           }

         })

         .state('tab2', {

             parent: 'tab',                           2).使用parent屬性，指定一個父狀態的名稱字符串

             url: '/tab2',

             views:{

                 'tab-tab2':{

                     templateUrl: "tab-tab2.html",

                     controller:'tab2Controller'

                 }

             }

         })

         .state(tab.tab3, {

             url: '/tab3',

             views:{                  定義ion-nav-view而且加上name屬性<ion-nav-view name="tab-tab2"></ion-nav-view>

                 'tab-tab3':{           定義view 並對應 ion-nav-view 中的name屬性

                     templateUrl: "tab-tab3.html",

                     controller:'tab3Controller'

                 }

             }

         })   

            $urlRouterProvider.otherwise('/tab/tab1');

             })

3).使用parent屬性，指定一個父狀態對象

var contacts = { name: 'contacts', templateUrl: 'contacts.html' }

var contactsList = { name: 'list', parent: contacts, //mandatory templateUrl: 'contacts.list.html' }

 

states 抽象狀態abstract

一個抽象的狀態能夠有子狀態但不能顯式激活，它將被隱性激活當其子狀態被激活時。

兩個最經常使用的抽象狀態的示例：

•爲全部子狀態預提供一個基url
•在父狀態中設置template屬性，子狀態對應的模板將插入到父狀態模板中的ui-view(s)中
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

       <!--主頁面導航框架：導航欄和回退按鈕，導航視圖-->

<ion-nav-bar class="bar-positive">

                               <ion-nav-back-button></ion-nav-back-button>

       </ion-nav-bar><!-- -->

       <ion-nav-view></ion-nav-view>

      <!--導航頁面  -->

       <script id="tabs.html" type="text/ng-template">

                               <ion-header-bar class="bar-positive">

                                          <h1 class="title"> ion-tabs</h1>

                               </ion-header-bar>

                    <ion-tabs class="tabs-icon-top tabs-positive">

                       <ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">

                           <ion-nav-view name="tab-tab1"></ion-nav-view>

                       </ion-tab>

                       <ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes"

badge="12" badge-style="badge-assertive" href="#/tab/tab2">

                           <ion-nav-view name="tab-tab2"></ion-nav-view>

                       </ion-tab>

                       <ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">

                           <ion-nav-view name="tab-tab3"></ion-nav-view>

                       </ion-tab>

                   <ion-tab title="Home1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">

                               <ion-view>

                                           <ion-header-bar class="bar-positive">    爲何不起做用？

                                                      <h1 class="title">home tab</h1>

                                          </ion-header-bar>

                                          <ion-content>

                                                      <p>home content</p>

                                          </ion-content>

                               </ion-view>

                   </ion-tab>

                   </ion-tabs>

       </script>

       <!—應用頁面  -->

       <script id="tab-tab1.html" type="text/ng-template">  應用頁面放在ion-view 裏遵循它的特色，title 和buttons放在

                   <ion-view view-title="Tab1">

               <ion-nav-buttons side="right">

           <button class="button" ng-click="doSomething()"> register </button>

       </ion-nav-buttons>

                     <ion-content>

                         Tab1 {{title}}

                               <!—三級頁面  -->

                        <a class="button" href="#/tab/content1/10">跳轉到內容</a>

                         <a class="button" href="#/news">news跳轉到內容</a>

                     </ion-content>

                   </ion-view>

       </script>

 

<script>

       var app = angular.module('myApp', ['ionic']);

       app.config(function($stateProvider,$urlRouterProvider) {

                   $stateProvider

         .state('tab', {

           url: "/tab",

           abstract:true,

           templateUrl: "tabs.html"

         })              

         .state('tab.tab1', {

           url: '/tab1',

           views:{

               'tab-tab1':{

                   templateUrl: "tab-tab1.html",

                   controller:'tab1Controller'

               }

           }

         })

         .state('tab2', {

             parent: 'tab',               

             url: '/tab2',

             views:{

                 'tab-tab2':{

                     templateUrl: "tab-tab2.html",

                     controller:'tab2Controller'

                 }

             }

         })

        .state('tab.content1', {     tab.content1狀態的頁面放在ion-nav-view的name屬性爲tab-tab1 裏

      url: '/content1/:id',

      views:{

          'tab-tab1':{

              templateUrl: "tab-content1.html",

              controller:'content1Controller'

          }

      }

  })

  .state('news', {          只能放在最外面的ion-nav-view裏

      url: '/news',

      templateUrl: "news.html"

   })  

       $urlRouterProvider.otherwise('/tab/tab1');

                   })

    .controller('tab2Controller', function($scope) {

        $scope.title='tab2Controller';

    })

    .controller('content1Controller', function($scope,$stateParams) {

        $scope.title='content1Controller';

        console.log($stateParams);

    });        

</script>

1.4.6.     側邊欄ion-side-menus

<body ng-app="ionic" >                          

  <ion-side-menus> 側邊欄菜單

             <ion-side-menu-content drag-content="true" edge-drag-threshold=50  class="calm-bg">  主區域容器

                         <ion-header-bar class="bar-dark">

                                     <!--切換左側欄顯示狀態-->

                                     <a menu-toggle="left" class="button icon ion-navicon"></a>

                                     <h1 class="title">ion-side-menu-content</h1>                                                       

                         </ion-header-bar>                               

                         <ion-content class="positive-bg">

                                     menu-close指令關閉側欄內容    

               <a menu-close="" class="button icon ion-navicon"></a>

                         </ion-content>                          

             </ion-side-menu-content>

             側邊欄區域容器

             <ion-side-menu side="left" width="150" expose-aside-when="(min-width:300px) " class="balanced-bg">

            左側區域

             </ion-side-menu>

     <ion-side-menu side="right" width="150" class="dark-bg">

           右側區域

     </ion-side-menu>

  </ion-side-menus>

</body>

1).側邊欄菜單 : ion-side-menus

2).側邊欄打開關閉 切換指令 : menu-toggle/menu-close

3).主區域容器ion-side-menu-content 屬性設置

drag-content - 是否容許拖動內容打開側欄菜單

edge-drag-threshold -啓用邊距檢測,正數，當拖動發生在距離邊界小於這個數,觸發側欄顯示。爲true時，使用默認的25px做爲邊距閾值。爲false或0，則意味着禁止邊距檢測，可在內容區域的任何地方拖動來打開側欄

4).側邊欄區域容器 : ion-side-menu

width - 側邊欄的寬度 width屬性是可選的，表示以像素爲單位的側欄菜單寬度。默認爲275px

is-enabled - 是否可用

expose-aside-when - 側邊欄自動顯示條件表達式

默認狀況下，側邊欄是隱藏的，須要用戶向左或向右拖動內容，或者經過一個切換按鈕來打開。 可是在有些場景下（好比，橫放的平板）屏幕寬度足夠大，這時，自動地顯示側邊欄內容會更 合理。

expose-aside-when屬性就是處理這種狀況的，和CSS3的@meida相似，expose-aside-when須要 一個CSS表達式，例如：expose-aside-when="(min-width:500px)"，這意味着當屏幕寬度大於 500px時將自動顯示側欄菜單。

ionic爲expose-aside-when提供了一個快捷選項：large ， 這等同於 (min-width:768px)。

 

5).腳本中控制側邊欄菜單接口 : $ionicSideMenuDelegate

       <ion-header-bar class="bar-positive">

                         <a class="button" ng-click="toggle1();">切換</a>

                       </ion-header-bar>

    <script>

        angular.module("myApp",["ionic"])

                .controller("myCtrl",function($scope,$ionicSideMenuDelegate){

                    $scope.toggle1 = function(){

                        $ionicSideMenuDelegate.toggleLeft();

                    };

                });

</script>

getOpenRatio() - 側欄菜單打開的寬度佔其總寬度比例

canDragContent([canDrag]) - 是否容許拖拽內容以打開側欄菜單

edgeDragThreshold(value) - 設置邊框距離閾值

6).ion-tap結合 ion-side-menus一塊兒使用

<ion-side-menus>

    <ion-side-menu-content class="calm-bg">

        <ion-nav-bar class="bar-positive">

            <ion-nav-back-button>

            </ion-nav-back-button>

        </ion-nav-bar>

        <ion-tabs class="tabs-icon-top tabs-positive">

            <!-- Dashboard Tab -->

            <ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">

                <ion-nav-view name="tab-tab1"></ion-nav-view>

            </ion-tab>

            <!-- Chats Tab -->

            <ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">

                <ion-nav-view name="tab-tab2"></ion-nav-view>

            </ion-tab>

            <!-- Account Tab -->

            <ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">

                <ion-nav-view name="tab-tab3"></ion-nav-view>

            </ion-tab>

        </ion-tabs>

    </ion-side-menu-content>

    <ion-side-menu side="left" width="150" class="balanced-bg">

        左側區域

    </ion-side-menu>

    <ion-side-menu side="right" width="150" class="dark-bg">

        右側區域

    </ion-side-menu>

</ion-side-menus>

1.4.7.     幻燈指令 ion-slide-box

1.4.7.1. 幻燈片 : ion-slide-box指令介紹

1.4.7.2. ion-slide-box : 屬性設置定製播放行爲

1.4.7.3. ion-slide-box : 事件及變量

1.4.7.4. 腳本接口: $ionicSlideBoxDelegate

      <ion-slide-box on-slide-changed="slideChanged(index)">

        <ion-slide>

          <h3>Thank you for choosing the Awesome App!</h3>

          <div id="logo"><img src="http://code.ionicframework.com/assets/img/app_icon.png"></div>

          <p> We've worked super hard to make you happy.</p>

          <p> But if you are angry, too bad.   </p>

        </ion-slide>

        <ion-slide>

          <h3>Using Awesome</h3>

          <div id="list">

            <h5>Just three steps:</h5>

            <ol>

              <li>Be awesome</li>

              <li>Stay awesome</li>

              <li>There is no step 3</li>

            </ol>

          </div>

        </ion-slide>

                        <ion-slide>

          <h3>Any questions?</h3>

          <p> Too bad! </p>

        </ion-slide>

               <ion-slide>

          <h3>Any questions?</h3>

          <p> 這是第四個 </p>

        </ion-slide>

      </ion-slide-box>

 

1.5. ionic指令複雜佈局

1.5.1.     ion-scroll滾動框

<ion-scroll class="has-header" zooming="true" direction="xy" style="width: 500px; height: 500px">

                       <div style="width: 5000px; height: 5000px; background: url('img/map.jpg') repeat"></div>

            </ion-scroll>

5. 滾動框 : ion-scroll

 

1.5.2.     下拉更新數據 : ion-refresher

<body ng-controller="firstCtrl">

         <ion-content class="has-header">

                     <ion-refresher pulling-text="Pull to refresh..."           on-refresh="doRefresh()" spinner="android"></ion-refresher>

                     <ul class="list">

                                 <li  class="item" ng-repeat="item in items">{{item}}</li>

                     </ul>           

         </ion-content>

         <script>

                     angular.module("myApp",["ionic"])

                     .controller("firstCtrl",function($scope){

                                 //$scope.items=[];

                                 //for(var i=0;i<50;i++)

                                 //        $scope.items.push(["this is line ",i].join(""));

                                 $scope.items = ['item1','item2','item3'];

                                 var base = 1;

                                 $scope.doRefresh = function() {

                                            for(var i=0;i<10;i++,base++)

                                                        $scope.items.unshift(["item ",base].join(""));

                                            $scope.$broadcast("scroll.refreshComplete");   // Stop the ion-refresher from spinning

                                 };

                                

                     });

         </script>

</body>

1.5.3. 上拉更新數據 : ion-infinite-scroll

<body ng-controller="firstCtrl">

         <ion-content class="has-header">

            <ion-infinite-scroll on-infinite="load_more();" icon="ion-load-a" distance="1%" immediate-check="true"></ion-infinite-scroll>

                     <ul class="list">

                                 <li  class="item" ng-repeat="item in items">{{item}}</li>

                     </ul>           

         </ion-content>

         <script>

                     angular.module("myApp",["ionic"])

                     .controller("firstCtrl",function($scope,$timeout){

                                 $scope.items = ['1111','22222'];

                                 var base = 0;

                                 $scope.load_more = function(){

                                            $timeout(function(){

                                                        for(var i=0;i<3;i++,base++)

                                                                    $scope.items.push(["item ",base].join(""));

                                                        $scope.$broadcast("scroll.infiniteScrollComplete");

                                            },500);

                                 };                               

                     });

         </script>

 

 

 

1.5.4.     腳本接口 : $ionicScrollDelegate

         <ion-footer-bar class="bar-positive">

        <a class="button" ng-click="gotop();">GO TOP!</a>

        <a class="button" ng-click="gobottom();">GO BOTTOM!</a>

        <a class="button" ng-click="getScrollPosition();">ScrollPosition</a>

    </ion-footer-bar>

</body>

</html>

<script>

         angular.module("myApp",["ionic"])

         .controller("firstCtrl",["$scope","$ionicScrollDelegate",function($scope,$ionicScollDelegate){

                     $scope.items = [];

                     for(var i=0;i<100;i++)

                                 $scope.items.push(["item ",i+1].join(""));

                     $scope.gotop = function(){

                                 $ionicScollDelegate.scrollTop(true);

                     }

                     $scope.gobottom = function(){

                                 $ionicScollDelegate.scrollBottom(true);

                     }

        $scope.getScrollPosition = function(){

           console.log($ionicScollDelegate.getScrollPosition());

        }

         }]);

</script>

1.5.5.     百度地圖

<head>

    <meta charset="UTF-8">

         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

         <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css">

         <script src="lib/ionic/js/ionic.bundle.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0KzDtnrAVfdyBds7BV55rfzZ"></script>

    <style type="text/css">

        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}

    </style>                  

</head>

<body ng-controller="firstCtrl">

         <ion-content scroll="false" class="has-header">

        <div id="allmap"></div>

    </ion-content>

<script>

angular.module("myApp",["ionic"])

.controller("firstCtrl",function($scope){

            // 百度地圖API功能

            var map = new BMap.Map("allmap");    // 建立Map實例

            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地圖,設置中心點座標和地圖級別

            map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件

            map.setCurrentCity("北京");          // 設置地圖顯示的城市 此項是必須設置的

            map.enableScrollWheelZoom(true);     //開啓鼠標滾輪縮放

        });

         </script>

</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程