如何利用ionic框架中的開關toggle控制項設置狀態

ionic框架中開關控制項toggle，類似複選框，可以進行選中或未選中；toggle開關控制項常用於移動設備，用於on/off。toggle是一種開關控制項，可以展示兩種狀態，一種是開著狀態，另一個是關閉狀態。下面利用一個實例說明toggle的用法，詳細操作如下：

工具/原料

ionic
AngularJS
HBuilder
截圖工具
瀏覽器
HTML5
CSS3

方法/步驟

第一步，創建靜態頁面toggle.html，並引入ionic的js和css文件，注意引入文件的先後順序，如下圖所示：

第二步，在body插入代碼，label和div標籤分別設置不同的樣式類：

<li class="item item-toggle">Java高級程序設計 <label class="toggle toggle-assertive"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li>

如下圖所示：

第三步，根據不同樣式設置toggle：

<li class="item item-toggle">VB入門篇 <label class="toggle toggle-balanced"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li>

如下圖所示：

第四步，使用toggle-calm：

<li class="item item-toggle">C#從入門到精通 <label class="toggle toggle-calm"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li>

如下圖所示：

第五步，利用開關控制項設置toggle-dark：

<li class="item item-toggle">C語言函數 <label class="toggle toggle-dark"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li>

如下圖所示：

第六步，利用toggle-energized：

<li class="item item-toggle">C++高級程序設計 <label class="toggle toggle-energized"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li>

如下圖所示：