iOS6Switch 演示

基本演示

1.首先在页面上准备一个复选框

<input type="checkbox" class="mycheckbox" />
 效果：

2.在复选框上运行脚本

$(".mycheckbox").ios6switch();
 效果：

3.可以一次指定多个复选框

插件启动时会自动检测每个复选框的勾选状态

$(".mycheckboxes").ios6switch();
 效果：

禁用与启用

1.禁用相应的复选框元素

插件启动时会自动检测每个复选框的disable状态

<input type="checkbox" class="disabledemo" disabled="disabled" />
<script>$(".disabledemo").ios6switch();</script>
 效果：

2.设置已禁用开关的透明度

$(".disabledopacitydemo").ios6switch({
	disabledOpacity: 0.75
});
 效果：

3.动态修改开关的禁用/启用状态

$(".dynamicdisabledemo").ios6switch();

$(".enablebutton").click(function(){
	$(".dynamicdisabledemo").trigger("enable");
});

$(".disablebutton").click(function(){
	$(".dynamicdisabledemo").trigger("disable");
});
 效果：

颜色设置

1.设置开关打开部分的颜色

$(".orangeswitch").ios6switch({switchonColor: "#FF7A00"});
$(".greenswitch").ios6switch({switchonColor: "#0DE900"});
$(".fuchsiaswitch").ios6switch({switchonColor: "#FF00FF"});
$(".tealswitch").ios6switch({switchonColor: "#008080"});
 效果：

2.同时设置开关打开和关闭部分的颜色

$(".cyanfuchsiaswitch").ios6switch({
	switchoffColor: "#00FFFF",
	switchonColor: "#FF00FF"
});
 效果：

3.设置标签文字的颜色

$(".textcolorswitch").ios6switch({
	switchoffTextColor: "#FF0000",
	switchonTextColor: "#7CFC00"
});
 效果：

4.设置手柄及其按下时的颜色

$(".thumbcolorswitch").ios6switch({
	thumbColor: "#FFFF00",
	thumbPressedColor: "#DBDB00"
});
 效果：

5.同时设置手柄打开和关闭状态的颜色

$(".thumbonoffcolorswitch").ios6switch({
	thumbColor: "#FF7A00",
	thumbPressedColor: "#B35500",
	thumbSwitchonColor: "#FF00FF",
	thumbSwitchonPressedColor: "#B300B3"
});
 效果：

尺寸设置

单位：像素

$(".largeswitch").ios6switch({size: 40});
$(".smallswitch").ios6switch({size: 16});
 效果：
 
说明：插件支持动态改变尺寸，查看详情请点击此行文字。

标签文字

$(".yesnolabelswitch").ios6switch({
	switchoffText: "off",
	switchonText: "on"
});
 效果：
说明：可以在这里使用HTML。

声音效果

$(".sounddemo").ios6switch({
	sound: "sounds/unlock.mp3"
});
 效果：
说明：不支持IE8及更低版本的浏览器。

禁用拖动效果

当鼠标按下手柄并拖动超过5像素时，开关进入拖动状态，松开鼠标后，插件将根据手柄所在的位置来判断开关是开启还是关闭。

拖动效果支持移动设备

$(".nodragdemo").ios6switch({
	draggable: false
});
 效果：

动画速度设置

1.无动画

$(".noanimatedemo").ios6switch({
	animateSpeed: 0
});
 效果：

2.1000毫秒

单位：毫秒

$(".animatespeeddemo").ios6switch({
	animateSpeed: 1000
});
 效果：

3.匀速运动

$(".linearanimatedemo").ios6switch({
	animateEasing: "linear"
});
 效果：
说明：如果要使用更多的动画过渡效果，可以参考 jQuery Easing 插件。

显示原复选框

$(".showboxdemo").ios6switch({
	showOriginalCheckbox: true
});
 效果：

用脚本来控制开关

1.打开和关闭

直接在原复选框元素上运行脚本即可

$(".scriptcontroldemo").ios6switch();

$(".switchonbutton").click(function(){
	$(".scriptcontroldemo").trigger("switchon");
});

$(".switchoffbutton").click(function(){
	$(".scriptcontroldemo").trigger("switchoff");
});
 效果：

2.打开或关闭

$(".scripttoggledemo").ios6switch();

$(".toggleswitchbutton").click(function(){
	$(".scripttoggledemo").trigger("toggleswitch");
});
 效果：
说明：以上所提及的三种方法对已禁用的开关无效。

取值

1.被动取值

直接对原复选框元素进行取值即可

$(".clickcheckdemo").ios6switch();

$(".checkbutton").click(function(){
	alert($(".clickcheckdemo")[0].checked);
});
 效果：
说明：在jQuery选择器后面加“[0]”是为了把jQuery元素转为DOM元素进行处理。

2.主动触发

直接在原复选框元素上绑定onchange事件即可

$(".changecheckdemo").ios6switch();

$(".changecheckdemo")[0].onchange = function(){
	$(".checkfield").addClass("checkchanged");
	setTimeout(function(){$(".checkfield").removeClass("checkchanged")}, 100);

	$(".checkfield")[0].innerHTML = $(".changecheckdemo")[0].checked;
}
 效果：
←点击

删除

删除iOS6Switch，恢复原来的复选框

$(".deletedemo").ios6switch();

$(".deletebutton").click(function(){
	$(".deletedemo").trigger("destroy");
});
 效果：

通过附加Class功能来进行更高级的操作

1.自定义样式示例 - iOS 7 样式

$(".ios7styledemo").ios6switch({
	switchonColor: "#64BD63",
	addClass:"ios7style"
});
点击此处展开/隐藏CSS部分
.ios6switch.ios7style{
	border:1px solid #999999;
}
.ios6switch.ios7style .ios6switch_shadow_and_highlight{
	background:none;
}
.ios6switch.ios7style .ios6switch_thumb{
	background-image:none;
	border:1px solid #999999;
	box-shadow:none;
}
 效果：
说明：某些样式会通过脚本直接添加到元素上，如果要通过CSS定义这些样式，可以使用 !important 设置样式优先级。

2.自定义样式示例 - 全透明样式

$(".bgtransparentdemo").ios6switch({addClass:"transparentbg"});
点击此处展开/隐藏CSS部分
.ios6switch.transparentbg{
	border:1px solid #4C566C;
}
.ios6switch.transparentbg .ios6switch_shadow_and_highlight{
	background:none;
}
.ios6switch.transparentbg .ios6switch_thumb{
	background:none !important;
	border:1px solid #4C566C;
	box-shadow:none;
}
.ios6switch.transparentbg .ios6switch_switch_off, .ios6switch.transparentbg .ios6switch_switch_on{
	color:#4C566C !important;
	background:none !important;
}
 效果：

3.动态改变尺寸

只需要改变开关的高度即可，开关的宽度固定为高度的79/27

$(".changesizedemo").ios6switch({addClass:"changeSize"});

$(".size20button").click(function(){$(".changeSize").animate({height:"20px"})});
$(".size27button").click(function(){$(".changeSize").animate({height:"27px"})});
$(".size40button").click(function(){$(".changeSize").animate({height:"40px"})});
$(".size50button").click(function(){$(".changeSize").animate({height:"50px"})});
 效果：

4.自定义样式示例 - 使用CSS定义背景1

$(".bgcolorstyledemo").ios6switch({addClass:"huegradient"});
点击此处展开/隐藏CSS部分
.ios6switch.huegradient .ios6switch_switch_off{
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACpJREFUeNpi/P//PwM2cPbsWaziTAwkglENxAAWXOFtbGw8Gkr00wAQYAD5xAiGkcIskQAAAABJRU5ErkJggg==");
}
.ios6switch.huegradient .ios6switch_switch_on{
	background-image:-webkit-linear-gradient(to bottom, #F00, #FF0, #0F0, #0FF, #00F, #F0F);
	background-image:linear-gradient(to bottom, #F00, #FF0, #0F0, #0FF, #00F, #F0F);
}
 效果：

5.自定义样式示例 - 使用CSS定义背景2

$(".bgpatterndemo").ios6switch({addClass:"patterngradient"});
点击此处展开/隐藏CSS部分
.ios6switch.patterngradient .ios6switch_switch_off{
	background-color:#CC1166 !important;
}
.ios6switch.patterngradient .ios6switch_switch_on{
	background-color:#026873 !important;
}
.ios6switch.patterngradient .ios6switch_switch_off, .ios6switch.patterngradient .ios6switch_switch_on{
	color:#FFFFFF !important;
	background-size:20px 20px;
	background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	background-image:linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
 效果：

其它

反向

只需要互换打开与关闭部分的样式并且反转true与false的含义即可

$(".invertdemo").ios6switch({
	switchonColor: "#FFFFFF",
	switchoffColor: "#008AF2",
	switchonTextColor: "#555555",
	switchoffTextColor: "#FFFFFF",
	switchonText: "0",
	switchoffText: "1"
});

$(".invertdemo")[0].onchange = function(){
	$(".invertcheckfield").addClass("checkchanged");
	setTimeout(function(){$(".invertcheckfield").removeClass("checkchanged")}, 100);

	$(".invertcheckfield")[0].innerHTML = !$(".invertdemo")[0].checked;
}
 效果：
←点击

多浏览器支持

默认兼容性：IE9+ Chrome Firefox Safari Opera…

本插件在JS上对IE7/8进行了支持，但是部分核心CSS效果不支持IE7/8（如background-size、border-radius等）

如果要在IE7/8上实现最佳视觉效果，可以参考以下插件：

CSS3 PIE: http://css3pie.com/
background-size polyfill: http://github.com/louisremi/background-size-polyfill

选项说明

选项名称 默认值 描述
showOriginalCheckbox false 是否显示原复选框。
size 27 开关的尺寸。（单位：像素）
draggable true 是否允许手柄拖动效果。当鼠标按下手柄并拖动超过5像素时，开关进入拖动状态，松开鼠标后，插件将根据手柄所在的位置来判断开关是开启还是关闭，拖动效果支持移动设备。
disabledOpacity 0.5 已禁用开关的透明度。
addClass "" 附加到开关元素上的Class，可用于自定义样式等，多个Class请用空格分隔。
sound "" 用户操作开关时播放的声音。（指定音频文件的路径，不支持IE8及更低版本的浏览器）
animateSpeed 400 滑动动画持续时间。（单位：毫秒）
animateEasing "swing" 滑动动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。如果要使用更多的动画过渡效果，可以参考 jQuery Easing 插件。
thumbColor "#FFFFFF" 手柄在关闭状态下的颜色。
thumbPressedColor "#CCCCCC" 手柄在关闭状态下被按下时的颜色。
thumbSwitchonColor "" 手柄在打开状态下的颜色。如果此值留空，则会使用与thumbColor相同的颜色。
thumbSwitchonPressedColor "" 手柄在打开状态下被按下时的颜色。如果此值留空，则会使用与thumbSwitchonColor相同的颜色。
switchoffTextColor "#555555" 关闭标签的文字颜色。
switchonTextColor "#FFFFFF" 打开标签的文字颜色。
switchoffText "0" 关闭标签的文字。
switchonText "1" 打开标签的文字。

用法

  1. 首先，在页面上引入jQuery，然后引入ios6switch.js和ios6switch.css。（或压缩版ios6switch.min.js）
    2. 其中，ios6switch.js是插件主要部分的js，ios6switch.css中定义的是开关的默认样式，可以根据需要进行编辑。
    开关的HTML结构是通过js动态添加到页面上的，所以不需要在页面上额外准备内容。
    点击这里展开/隐藏默认所需图片文件列表
    images/ios6switch_thumb.png 开关手柄的背景图像
    images/ios6switch_shadow.png 开关内侧阴影和高亮效果的图像

    以上图片的位置如有变动，请到ios6switch.css中修改相应路径。
  2. 只需要在复选框上运行$(元素).ios6switch(选项);即可，选项说明和示例在上文已经列出。
更多插件：banneralert.js iOS6Alert.js …
回顶部