html ios按钮,ios样式开关按钮jQuery插件

2024-04-09 17:32:57

这是一款ios样式开关按钮jQuery插件。该插件可以将复选按钮和单选按钮转换为ios样式的开关按钮。

使用方法

在页面中引入jquery和jquery.switcher.js文件，以及样式文件switcher.css。

HTML结构

HTML结构如下。

Checkboxes

Radio Buttons

CSS样式

你可以创建自己的开关按钮样式。

.ui-switcher {

background-color: #bdc1c2;

display: inline-block;

height: 20px;

width: 48px;

border-radius: 10px;

box-sizing: border-box;

vertical-align: middle;

position: relative;

cursor: pointer;

transition: border-color 0.25s;

margin: -2px 4px 0 0;

box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);

}

.ui-switcher:before {

font-family: sans-serif;

font-size: 10px;

font-weight: 400;

color: #ffffff;

line-height: 1;

display: inline-block;

position: absolute;

top: 6px;

height: 12px;

width: 20px;

text-align: center;

}

.ui-switcher:after {

background-color: #ffffff;

content: '\0020';

display: inline-block;

position: absolute;

top: 2px;

height: 16px;

width: 16px;

border-radius: 50%;

transition: left 0.25s;

}

初始化插件

在页面DOM元素加完毕之后，通过下面的方法来初始化该插件。

$(function(){

$.switcher();

});

你也可以在指定的复选按钮和单选按钮上初始化插件。

$.switcher('input[type=checkbox]');

$.switcher('input[type=radio]');

html ios按钮,ios样式开关按钮jQuery插件相关推荐

html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
html导出表格为csv,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
Jquery - jquery 插件，jQuery.Switchable
jquery 插件,最近新发现的jQuery.Switchabl,集多种样式,感觉蛮好用的,发上来和大家分享一下. 以下为这个插件能实现的样式和功能. http://www.jqueryajax. ...
推荐60个jQuery插件及使用教程
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
iOS开发常用三方库、插件、知名博客
TimLiu-iOS iOS开发常用三方库.插件.知名博客等等,期待大家和我们一起共同维护,同时也期望大家随时能提出宝贵的意见(直接提交Issues即可). 持续更新... 版本:Objective- ...
iOS：iOS开发非常全的三方库、插件、大牛博客等等
iOS开发非常全的三方库.插件.大牛博客等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章 ...
炫酷实用的jQuery插件涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
iOS好用的第三方框架/插件
一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框地址:https://github. ...
html5怎么把图片做成按钮,炫酷实用的jQuery插件涵盖菜单、按钮、图片 | HTML5资源教程...
新的一周开始了,今天我们要为大家分享一些全新的 1.CSS3书本翻页动画书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即 ...

最新文章

热门文章