开关插件NZSwitcher(原创)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<title>NZ-Window</title>
<script src="https://www.jq22.com/demo/NZSwitcher202305282252/js/jquery.min.js"></script>
<link href="https://www.jq22.com/demo/NZSwitcher202305282252/css/displaystyle.css" rel="stylesheet" />
<script src="https://www.jq22.com/demo/NZSwitcher202305282252/js/syntaxhighlighter_3.0.83/shCore.js"></script>
<script src="https://www.jq22.com/demo/NZSwitcher202305282252/js/syntaxhighlighter_3.0.83/shBrushJScript.js"></script>
<link href="https://www.jq22.com/demo/NZSwitcher202305282252/js/syntaxhighlighter_3.0.83/styles/shCoreRDark.css" rel="stylesheet" />
<script src="https://www.jq22.com/demo/NZSwitcher202305282252/js/NZ-Plugin/Js/NZ-Switcher.min.js"></script>
<link href="https://www.jq22.com/demo/NZSwitcher202305282252/js/NZ-Plugin/Css/NZ-Switcher.min.css" rel="stylesheet" />
<style>
.panel {
padding: 10px;
border-radius: 3px;
}
.panel.black {
background-color: rgba(40,40,40,1);
color: #fff;
}
.panel.white {
background-color: #eee;
color: #555;
}
</style>
</head>
<body>
<h2 class="pagetitle">NZ-Switcher</h2>
<ul class="conlist">
<li>
<div class="contitle">应用实例</div>
<ul>
<li>
<h3>基本应用</h3>
<div class="panel">
<input type="checkbox" id="check_simple" />
</div>
<div class="panel white">
<input type="checkbox" id="check_dark" />
</div>
<div class="panel black">
<input type="checkbox" id="check_white" />
</div>
<h5>演示代码：</h5>
<pre class="brush:js">$("#check_dark").NZ_Switcher({ text: { open: "黑-开", close: "黑-关" } });
$("#check_white").NZ_Switcher({ theme: "white", text: { open: "白-开", close: "白-关" } });
</pre>
</li>
<li>
<h3>状态初始化</h3>
<div class="panel">
原状态选中：<input type="checkbox" id="check_check" checked="checked" nzval="哈哈哈" />
</div>
<div class="panel">
初始化状态选中：<input type="checkbox" id="check_ccheck" />
</div>
<div class="panel">
禁用：<input type="checkbox" id="check_disabled" />
<button id="btn_enble" class="button small">启用</button>
</div>
<h5>演示代码：</h5>
<pre class="brush:js">
//目标原本状态为选中
$("#check_check").NZ_Switcher();
//初始化目标为选中
$("#check_ccheck").NZ_Switcher({ checked: true });
//禁用、启用
$("#check_disabled").NZ_Switcher({ disabled: true });
$("#btn_enble").click(function () {
if ($("#check_disabled").is(":disabled")) {
$("#check_disabled").NZ_Switcher({ disabled: false });
$(this).text("禁用");
} else {
$("#check_disabled").NZ_Switcher({ disabled: true });
$(this).text("启用");
}
});
</pre>
</li>
<li>
<h3>触发式状态改变</h3>
<div class="panel">
<input type="checkbox" id="check_change" />
<button id="btn_change" class="button small">打开</button>
</div>
<div class="descript">通过直接操作原checkbox状态即可操作渲染后的开关状态</div>
<h5>演示代码：</h5>
<pre class="brush:js">
$("#check_change").NZ_Switcher();
$("#btn_change").click(function () {
if ($("#check_change").is(":checked")) {
$("#check_change").removeAttr("checked").change();
$("#btn_change").text("打开");
} else {
$("#check_change").attr("checked", true).change();
$("#btn_change").text("关闭");
}
});
</pre>
</li>
<li>
<h3>单选Radio</h3>
<div class="panel">
<input type="radio" name="tradio" />
<input type="radio" name="tradio" />
</div>
<h5>演示代码：</h5>
<pre class="brush:js">
$(":radio").NZ_Switcher();
</pre>
</li>
</ul>
</li>
</ul>
<script>
SyntaxHighlighter.all();
$("#check_simple").NZ_Switcher();
$("#check_dark").NZ_Switcher({ text: { open: "黑-开", close: "黑-关" } });
$("#check_white").NZ_Switcher({ theme: "white", text: { open: "白-开", close: "白-关" } });
$("#check_check").NZ_Switcher();
$("#check_ccheck").NZ_Switcher({ checked: true });
$("#check_disabled").NZ_Switcher({ disabled: true });
$("#btn_enble").click(function () {
if ($("#check_disabled").is(":disabled")) {
$("#check_disabled").NZ_Switcher({ disabled: false });
$(this).text("禁用");
} else {
$("#check_disabled").NZ_Switcher({ disabled: true });
$(this).text("启用");
}
});
$("#check_change").NZ_Switcher();
$("#btn_change").click(function () {
if ($("#check_change").is(":checked")) {
$("#check_change").removeAttr("checked").change();
$("#btn_change").text("打开");
} else {
$("#check_change").attr("checked", true).change();
$("#btn_change").text("关闭");
}
});
$(":radio").NZ_Switcher();
</script>
</body>
</html>
页:
[1]