如何利用ionic框架中的开关toggle控件设置状态

1、第一步，创建静态页面toggle.html，并引入ionic的js和css文件，注意引入文件的先后顺序，如下图所示：

2、第二步，在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>

如下图所示：

3、第三步，根据不同样式设置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>

如下图所示：

4、第四步，使用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>

如下图所示：

5、第五步，利用开关控件设置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>

如下图所示：

6、第六步，利用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>

如下图所示：