仿iPhone开关按钮switch

前端开发checkbox 单选按钮做开关

https://github.com/weatherstar/switch

github下载

渲染事件方法

defaults = {
size : ‘default’
, checked : undefined
, onText : ‘Y’
, offText : ‘N’
, onSwitchColor : ‘#64BD63’
, offSwitchColor : ‘#fff’
, onJackColor : ‘#fff’
, offJackColor : ‘#fff’
, showText : false
, disabled : false
, onInit : function(){}
, beforeChange : function(){}
, onChange : function(){}
, beforeRemove : function(){}
, onRemove : function(){}
, beforeDestroy : function(){}
, onDestroy : function(){}
};

属性注释
引入jQuery
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
引入
<script src="switch.js"></script>
<link href="switch.css" rel="stylesheet">

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="switch.js"></script><link href="switch.css" rel="stylesheet">
</head>
<body><div><table><tr><td><label>LED开关：</label></td><td><input id="user" type="checkbox" class="demo-size-1" /></td></tr><tr><td><label>继电器开关：</label></td><td><input id="user" type="checkbox" class="demo-size-2" /></td></tr></table></div>
</body>
</html>
<script>$(function () {var switches = {};var switchConfig = {'demo-size-1': {size: 'small',checked: false,//点击事件onChange: function (status) {switchled(status);}},'demo-size-2': {size: 'small',checked: false,//点击事件onChange: function (status) {switchtjdq(status);}}/*渲染方法及属性     *///'demo-text-1': {//    checked: true,//    disabled: true,//    showText: true,//    onText: 'O',//    offText: 'X'//},//'demo-color-1': {//    onSwitchColor: '#34B363',//    offSwitchColor: '#D6B3A3',//    onJackColor: '#1453B3',//    offJackColor: '#A4B363'//}};Object.keys(switchConfig).forEach(function (key) {switches[key] = new Switch(document.querySelector('.' + key), switchConfig[key]);});})function switchled(status) {console.log(status);}function switchtjdq(status) {console.log(status);}</script>

仿iPhone开关按钮switch相关推荐

Qt 自定义仿iphone开关按钮
在做项目时,经常用到QPushButton,这次想设计成类似iphone开关按钮的样式.通过自定义Button类继承QPushButton类,重写paintEvent方法重绘按钮图形和重写mouseP ...
仿iphone开关按钮
已屏蔽掉触摸冲突,直接上代码 package com.pobing.extra.views;import com.example.iphonebut.R;import android.animatio ...
仿iPhone的switch开关
看到很多iPhone上的滑动开关效果的button,今天终于有时间搞一下其实很简单,也不难就是大量用到了CSS3的属性,不需要引入图片,但是要一点JS来控制贴上效果图: 开启的时候关闭的效果代 ...
android 仿苹果按钮,android 仿iphone 滑动开关按钮 switch
[实例简介] 一个非常不错的仿iPhone滑动开关的控件, 适合项目需要的时候集成使用 [实例截图] [核心代码] 106633iPhone左右滑动开关键(设置) └── SlipButton ├── ...
自己定义控件-仿iphone之ToggleButtonamp;VoiceSeekBar
由于项目中须要使用开关切换button,和声音滑动控件,可是原生Android5.0版本号以下的控件实在是太挫了.尽管网上已经有非常多关于这两个控件的blog.可是我实在是找不到像iPhone这样简洁 ...
SlideSwitch仿iphone滑动开关组件，仿百度魔图滑动开关组件Android
SlideSwitch 仿iphone滑动开关组件,仿百度魔图滑动开关组件 1.AndroidManifest.xml <?xml version="1.0" encodin ...
android 自定义滑动删除,Android_Android ListView实现仿iPhone实现左滑删除按钮的简单实例，需要自定义ListView。这里就交Fl - phpStudy...
Android ListView实现仿iPhone实现左滑删除按钮的简单实例需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Ov ...
Android 高仿Iphone Settings 基于Android M版本
之前在公司有需要做高仿的项目,恰好分配到了Settings的修改一级菜单效果图如下: Settings的修改简单来说,主要是资源的一些替换,各种Preference的定制.当然,还有一些零星的其他问 ...
android 苹果菜单栏,android仿iphone主题效果的主菜单
现在很多第三方Launcher((如360Launcher,GoLauncher)带有iphone主题,相信玩Android的人大都知道. 本例实现仿iphone主题的launcher的冰山一角.如下 ...

仿iPhone开关按钮switch

前端开发checkbox 单选按钮做开关

仿iPhone开关按钮switch相关推荐

最新文章

热门文章