天天看點

cordova 移動跨平台開發(二) ---- 使用ionic界面開發

ionic 标簽學習:
           
一、 ionic tab(頁籤)
           
<div class="tabs">
  <a class="tab-item">
    首頁
  </a>
  <a class="tab-item">
    個人
  </a>
  <a class="tab-item">
    設定
  </a>
</div>
           

預設情況,頁籤顔色為預設,你可以設定以下不同顔色樣式:tabs-default ,tabs-light ,tabs-stable ,tabs-positive ,tabs-calm ,tabs-balanced ,tabs-energized ,tabs-assertive ,tabs-royal ,tabs-dark。

要隐藏頁籤欄,可使用 tabs-item-hide 類。

二、bar-header

這個最讓我頭疼的是隐藏不掉,最後發現可以把其他的類(如tab直接放到header中),解決掉了ionic tabs 置頂的問題;

<div class="bar bar-header">
          <div class="tabs">
      <a class="tab-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        首頁
      </a>
      <a class="tab-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        收藏
      </a>
      <a class="tab-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
        設定
      </a>
    </div>
    </div>
           

三、關于按鈕的點選事件 ng-click

其實這裡主要說的并不是ng-click而是由它引起的一些問題:

<div ng-app="myApp" ng-controller="personCtrl">



<p ng-hide="myVar" >
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
<button ng-click="toggle()">隐藏/顯示</button>
</div>
           

這個例子是菜鳥線上的例子,直接這樣是沒有問題,但是我又重新寫了個方法:

<div class="bar bar-footer bar-balanced" ng-app="myApp" ng-controller="personCtrl">

                <button ng-click="toggle() " >Photo</button>

</div>
           

但是通過這個怎麼調用都調用不起來,後來發現這樣根本不能控制

<p ng-hide="myVar" >
           

的顯示,控件必須放到和按鈕同一個div中,也許是因為作用域的問題吧!

四、abstract: true

abstract: true 表明此狀态不能被顯性激活,隻能被子狀态隐性激活,簡單點就是設定了不顯示,必須讓别人調用才顯示!

五、ui-sref

這個指令是需要和配合<ion-nav-view></ion-nav-view>一同使用,即使用ui-sref跳轉到的頁面會在<ion-nav-view></ion-nav-view>标簽中顯示出來!

六、ionic真機不顯示圖檔

至于為什麼會出現這個問題,我也不是很清楚,應該是www下的路徑和編譯之後的路徑不同!

問題:在html檔案中引入圖檔一般會寫“../img/img.jpg",在網頁上能正常顯示,但是編譯後在真機運作卻不可以;

解決方法:把”../img/img.jpg"修改為“img/img.jpg",這樣就能正常顯示了!

七、form表單送出不了

原先的button怎麼也送出不了,後來發現寫的标簽有問題:

<a class="button button-positive button-full" type="submit  ">儲存</a>
           

修改為:

<button class="button button-positive button-full" type="submit  ">儲存</button>
           

就能正常的送出了!