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="#">
        主页
      </a>
      <a class="tab-item" href="#">
        收藏
      </a>
      <a class="tab-item" href="#">
        设置
      </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>

就能正常的提交了！