如何利用ionic框架中的开关toggle控件设置状态
方法/步骤
第一步,创建静态页面toggle.html,并引入ionic的js和css文件,如下图所示:
第二步,在body插入代码:
<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>