html中switch的控件,自己实现简单的switch开关插件

效果

最终效果就是这个样子：

HTML代码

HTML代码结构如下：

其中，文字采用:before来实现，switch-handler就是那个圆圈，通过active样式来区分是否选中，还是来看完整代码吧。

CSS代码

以下代码放在名为jquery.simpleSwitch.css的文件中：

/**

* 简单的开关插件

* @date 2016-06-25

.simple-switch {

width: 70px;

height: 32px;

border: solid 2px #ddd;

border-radius: 30px;

background-color: #FFF;

position: relative;

padding-left: 28px;

-webkit-transition: background-color 0.3s;

transition: background-color 0.

html中switch的控件,自己实现简单的switch开关插件相关推荐

怎么向tab control中加其它控件(如文本框等)
1.首先创建一个MFC对话框框架,在对话框资源上从工具箱中添加上一个Tab Control 控件,根据需要修改一下属性,然后右击控件,为这个控件添加一个变量,将此控件跟一个CTabCtrl类变 ...
使用观察者模式在 Silverlight 中切换用户控件
有一篇技巧,见 http://tech.sina.com.cn/s/2008-07-03/1528718607.shtml 或 http://kb.cnblogs.com/page/42897/?pa ...
技巧：在Silverlight 2应用程序中切换用户控件
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://terrylee.blog.51cto.com/342737/85341 ...
bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
安卓中自定义view控件代替radiogroup实现颜色渐变效果的写法
利用自定义控件代替radiogroup,同时实现在使用viewpager进行翻页的时候,实现颜色渐变的效果. 一: 首先创建一个自定义view类继承自View类,所有的控件均用canvas绘制出来(包 ...
Gridview导出到Excel,Gridview中的各类控件,Gridview中删除记录的处理
Asp.net 2.0中新增的gridview控件,是十分强大的数据展示控件,在前面的系列文章里,分别展示了其中很多的基本用法和技巧(详见< ASP.NET 2.0中Gridview控件高级技巧 ...
ASP.NET中 Calendar(日期控件)的使用
ylbtech-ASP.NET-Control-Basic:Calendar(日期控件)的使用 ASP.NET中 Calendar(日期控件)的使用. 1.A,运行效果返回顶部 Calendar(日期 ...
在WPF中使用WinForm控件方法
在WPF中使用WinForm控件方法原文:在WPF中使用WinForm控件方法 1. 首先添加对如下两个dll文件的引用:WindowsFormsIntegration.dll,Syste ...
关于从页面中获取用户控件中的其它控件（如DropDownList)事件的方法
在项目中经常把一些经常使用的代码做成用户控件以提高代码的可重用性, 一个经常遇到的就是在页面中调用用户控件中的服务器控件的事件,下面给出简单的代码示列. 我们在一个用户控件(MaterialRepor ...

html中switch的控件,自己实现简单的switch开关插件

html中switch的控件,自己实现简单的switch开关插件相关推荐

最新文章

热门文章