first commit
此提交包含在：
@@ -0,0 +1,429 @@
|
||||
<#def title = "多选框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/>
|
||||
<#def prevUrl = "button.htm"/>
|
||||
<#def nextUrl = "radio.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z(".example-link").each(function(elem)
|
||||
{
|
||||
var html = Z(elem).htmlt();
|
||||
html = Z.S.trim(html);
|
||||
html = Z.S.replaceAll(html, /\sdata-id="[^"]+"/g, ''); //去除 data-id
|
||||
html = Z.S.replaceAll(html, /\sstyle="[^"]+"/g, '');
|
||||
html = Z.S.replaceAll(html, ' >', '>');
|
||||
var ind = html.indexOf("i ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
|
||||
Z(".click i.z-checkbox").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
|
||||
function abc(text, checked)
|
||||
{
|
||||
alert(text+checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "checkbox")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "多选框样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">多选框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、纯多选框样式 -->
|
||||
<div class="tutorial title">一、纯多选框样式（标准大小）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、纯多选框样式(大号） -->
|
||||
<div class="tutorial title">二、纯多选框样式(大号）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、纯多选框样式(加大） -->
|
||||
<div class="tutorial title">三、纯多选框样式(加大）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、多选框样式和多选按钮联动 -->
|
||||
<div class="tutorial title">四、多选框样式和多选按钮联动</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="35%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="40%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="type">默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" style="width:16px;height:16px;" data-class="z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、多选框样式和多选按钮联动和操作 -->
|
||||
<div class="tutorial title">五、多选框样式和多选按钮联动和操作</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subCheckBox', this.checked);"><br><input type="checkbox" name="subCheckBox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" onclick="javascript:abc('弹出我的值', this.checked);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 六、多选框全选取消 -->
|
||||
<div class="tutorial title">六、多选框全选取消</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subcb', this.checked);">
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="4" data-class="z-blue"><br><br>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 七、多选框全选取消反选按钮 -->
|
||||
<div class="tutorial title">七、多选框全选取消反选按钮</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 1);">全选</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 2);">取消</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 0);">反选</button>
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="4" data-class="z-blue"><br><br>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 八、多选框在按钮中 -->
|
||||
<div class="tutorial title">八、多选框在按钮中</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button class="z-button z-large zi-bg-white zi-mg-l10" onclick="Z(this).find('i.z-checkbox').click();">
|
||||
<input type="checkbox" class="display:inline-block" data-role="z-checkbox" data-class="z-blue">只设计不印刷
|
||||
</button>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
新增問題並參考
封鎖使用者