ionic Toggle（开关控件）

官网地址： https://www.runoob.com/try/try.php?filename=ionic_toggle

<html ng-app="ionicApp"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>ionic Toggle（开关控件）</title><link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet"><script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script></head><body><div class="bar bar-header"><div class="h1 title">切换</div></div><div class="content has-header"><ul class="list"><li class="item item-toggle">HTML5<label class="toggle toggle-positive"><input type="checkbox" checked=""><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle">CSS3<label class="toggle toggle-calm"><input type="checkbox" checked=""><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle">Flashplayer<label class="toggle toggle-balanced"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle">Java Applets<label class="toggle toggle-energized"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle"><label class="toggle toggle-assertive"><input type="checkbox" checked=""><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle">Silverlight<label class="toggle toggle-royal"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li><li class="item item-toggle">Web Components<label class="toggle toggle-dark"><input type="checkbox" checked=""><div class="track"><div class="handle"></div></div></label></li></ul></div></body>
</html>

效果图：

改造后的单个开关控件的快速使用：

<html ng-app="ionicApp"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet"><script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script></head>
<body><!--toggle表示该组件是一个开关，toggle-balanced表示颜色设置--><label class="toggle toggle-balanced"><!--input复选框在界面中是被隐藏的,checked属性决定是否被选中--><input type="checkbox" checked=""><div class="track"><div class="handle"></div></div></label></body>
</html>

上述这个样式虽然很好，但是在与BootStrap一起结合使用时会产生冲突会导致JS事件不被触发，因此个人的建议做法是根据上述样式与事件功能自己写纯原生的CSS样式和JS事件

ionic Toggle（开关控件）相关推荐

Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
php控制硬件电源开关模块,如何使用纯CSS实现电源开关控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现电源开关控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/c ...
Qt QWidget实现开关控件SwithButton（SlipButton）
前言 Qt做界面的时候常常会用到开关控件,类似于CheckButton有两种状态,只是界面表现形式不一样而已.本文通过QWidget类来实现一个开关控件SwitchBtn(有些平台上又称为SlipBu ...
weui-switch开关控件，表单提交后如何取值
最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...
Qt工作笔记-自定义开关控件
1.自定义开关控件: 2.点击有动画效果: 3.在动画效果中,不再响应信号: 运行截图如下: 输出响应信号: 源码如下: myonoff.h #ifndef MYONOFF_H #define MYO ...
Android自己写的三款实用开关控件
2019独角兽企业重金招聘Python工程师标准>>> 自定义开关控件,代码简单,比较实用. http://www.see-source.com/androidwidget/list ...
Android 开关控件Switch
扣扣技术交流群:460189483 目录: 1.应用场景与概述 2.常用属性 3.简单使用 4.更改默认Switch的样式 5.自定义Switch 1 ...
Android 基础 View 系列之仿IPhone 开关控件
极力推荐Android 开发大总结文章:欢迎收藏程序员Android 力荐 ,Android 开发者需要的必备技能自定义View 是Android中常用的方法之一,本章实现类似于IPhone 开关控 ...
【Qt】qt自定义开关控件
基于QWidget实现一个简单的开关控件,左右动画效果切换,效果如下样式在paintEvent中绘制 void RdSwitchButton::paintEvent(QPaintEvent *eve ...

ionic Toggle（开关控件）

ionic Toggle（开关控件）相关推荐

最新文章

热门文章