first commit

2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
@@ -0,0 +1,470 @@
+<#def title = "表格样式"/>
+<#def keyword = "ZhiqimUI"/>
+<#def desc = "表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。"/>
+<#def prevUrl = "block.htm"/>
+<#def nextUrl = "../js/js.htm"/>
+${zhiqim_com_header()}
+${zhiqim_com_topnav()}
+
+<style>
+.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
+</style>
+<script>
+function doSelectBorder(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-bordered");
+        Z(table).removeClass("z-bordered-line");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+        else
+        {//删除可能的颜色
+            Z(table).removeClass("z-red");
+            Z(table).removeClass("z-orange");
+            Z(table).removeClass("z-yellow");
+            Z(table).removeClass("z-green");
+            Z(table).removeClass("z-cyan");
+            Z(table).removeClass("z-blue");
+            Z(table).removeClass("z-purple");
+            Z(table).removeClass("z-bd-rd5");
+            Z(table).removeClass("z-bd-rd8");
+            Z(table).removeClass("z-bd-rd10");
+        }
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectRadius(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-bd-rd5");
+        Z(table).removeClass("z-bd-rd8");
+        Z(table).removeClass("z-bd-rd10");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectColor(elem, color)
+{
+    Z(elem).parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-red");
+        Z(table).removeClass("z-orange");
+        Z(table).removeClass("z-yellow");
+        Z(table).removeClass("z-green");
+        Z(table).removeClass("z-cyan");
+        Z(table).removeClass("z-blue");
+        Z(table).removeClass("z-purple");
+        
+        if (Z.Validates.isNotEmpty(color))
+            Z(table).addClass(color);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectPadding(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-pd3");
+        Z(table).removeClass("z-pd10");
+        Z(table).removeClass("z-pd16");
+        Z(table).removeClass("z-pd20");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectPx(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-px16");
+        Z(table).removeClass("z-px14");
+        Z(table).removeClass("z-px12");
+        Z(table).removeClass("z-px18");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectAlign(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-text-left");
+        Z(table).removeClass("z-text-center");
+        Z(table).removeClass("z-text-right");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doSelectLh(elem)
+{
+    Z(elem).parent().parent().next("section > div > table").each(function(table)
+    {
+        Z(table).removeClass("z-lh100p");
+        Z(table).removeClass("z-lh150p");
+        Z(table).removeClass("z-lh200p");
+        Z(table).removeClass("z-lh30");
+        
+        if (Z.Validates.isNotEmpty(elem.value))
+            Z(table).addClass(elem.value);
+    });
+    
+    doUpdateCode(Z(elem).parent().parent().parent());
+}
+
+function doRepairRadius(elem)
+{
+    var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:last-child");
+    var $first = $tr.find(" > td:first-child");
+    var $last = $tr.find(" > td:last-child");
+    
+    if (elem.checked)
+    {
+        $first.addClass("z-bd-rd-bl8");
+        $last.addClass("z-bd-rd-br8");
+    }
+    else
+    {
+        $first.removeClass("z-bd-rd-bl8");
+        $last.removeClass("z-bd-rd-br8");
+    }
+    
+    doUpdateCode(Z(elem).parent().parent().parent().parent());
+}
+
+function doRepairLeftBorder(elem)
+{
+    var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:first-child");
+    var $first = $tr.next("tr>td:first-child");
+    var $second = $tr.next("tr").next("tr>td:first-child");
+    
+    if (elem.checked)
+    {
+        $first.addClass("zi-bd-l");
+        $second.addClass("zi-bd-l");
+    }
+    else
+    {
+        $first.removeClass("zi-bd-l");
+        $second.removeClass("zi-bd-l");
+    }
+    
+    doUpdateCode(Z(elem).parent().parent().parent().parent());
+}
+
+function doChange(tabnav)
+{
+    doUpdateCode(Z(tabnav));
+}
+
+function doUpdateCode($this)
+{//更新代码
+    var html = $this.find("section > div").htmlt();
+    $this.find("section > div").next("div > span").html(html);
+}
+
+</script>
+
+<!--容器开始 -->
+<div id="container" class="container">
+<!--边导航-->
+${zhiqim_com_ui("tutorial", "ui", "css", "table")}
+
+<!--主体-->
+<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;">
+        表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。
+        另外，CSS对底部圆角当有背景时需要手动对第一和最后单元格补圆角，当圆角首列合并单元格时也需要对被合并的行第一单元格补左边线。
+    </p>
+</div>
+
+<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
+
+<#-- 一、表格边框 -->
+<div class="tutorial title">一、表格边框（默认灰色无圆角，单元格内边框10px）</div>
+
+<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
+<nav>
+    <span class="z-px14">边框：</span>
+    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectBorder(this);">
+    <option value="z-bordered">边框</option>
+    <option value="z-bordered-line">边线</option>
+    <option value="">无边框</option>
+    </select>
+    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8 z-mg-l-1" onchange="doSelectRadius(this);">
+    <option value="">无圆角</option>
+    <option value="z-bd-rd5">5像素</option>
+    <option value="z-bd-rd8">8像素</option>
+    <option value="z-bd-rd10">10像素</option>
+    </select>
+    <span class="z-px14">颜色：</span>
+    <span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
+    <span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
+    <span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
+    <span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
+    <span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
+    <span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
+    <span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
+    <span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
+    <span class="z-px14">内边距：</span>
+    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectPadding(this);">
+    <option value="z-pd10">z-pd10</option>
+    <option value="z-pd3">z-pd3</option>
+    <option value="z-pd16">z-pd16</option>
+    <option value="z-pd20">z-pd20</option>
+    <option value="">无边距</option>
+    </select>
+    <ul class="zi-float-right">
+        <li class="z-active">示例</li>
+        <li>代码</li>
+        <li>说明</li>
+    </ul>
+</nav>
+<section style="min-height:100px;">
+<div class="z-active z-pd10 z-px16" style="padding-top:40px">
+    <table class="z-table z-bordered z-pd10">
+    <tr bgcolor="#f5f5f5">
+        <td colspan="3">示例</td>
+    </tr>
+    <tr>
+        <td width="30%">用户名称</td>
+        <td width="30%">&价格</td>
+        <td width="*">操作</td>
+    </tr>
+    <tr>
+        <td>admin</td>
+        <td>10000</td>
+        <td>查看</td>
+    </tr>
+    <tr>
+        <td>admin</td>
+        <td>10000</td>
+        <td>查看</td>
+    </tr>
+    </table>
+</div>
+
+<div class="z-relative-left z-w100p z-pd10">
+    <span class="z-text-prewrap z-pre"></span>
+</div>
+    
+<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
+    1、[z-table]表示表格使用知启蒙表格样式<br>
+    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
+    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
+</div>
+</section>
+</div>
+
+<#-- 二、表格单元格文本设置 -->
+<div class="tutorial title">二、表格单元格文本设置（默认左对齐、字体继承14px、行高继承120%）</div>
+
+<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
+<nav>
+    <span class="z-px14">单元格对齐：</span>
+    <select data-role="z-select" class="z-select z-relative-left z-w100 z-h30 z-mg-t8" onchange="doSelectAlign(this);">
+    <option value="">默认左对齐</option>
+    <option value="z-text-left">左对齐</option>
+    <option value="z-text-center">居中</option>
+    <option value="z-text-right">右对齐</option>
+    </select>
+    <span class="z-px14">字体大小：</span>
+    <select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectPx(this);">
+    <option value="">默认大小</option>
+    <option value="z-px14">z-px14</option>
+    <option value="z-px16">z-px16</option>
+    <option value="z-px12">z-px12</option>
+    <option value="z-px18">z-px18</option>
+    </select>
+    <span class="z-px14">字体行高：</span>
+    <select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectLh(this);">
+    <option value="">默认大小</option>
+    <option value="z-lh100p">z-lh100p</option>
+    <option value="z-lh150p">z-lh150p</option>
+    <option value="z-lh200p">z-lh200p</option>
+    <option value="z-lh30">z-lh30</option>
+    </select>
+    <ul class="zi-float-right">
+        <li class="z-active">示例</li>
+        <li>代码</li>
+        <li>说明</li>
+    </ul>
+</nav>
+<section style="min-height:100px;">
+<div class="z-active z-pd10 z-px16" style="padding-top:40px">
+    <table class="z-table z-bordered z-pd10">
+    <tr bgcolor="#f5f5f5">
+        <td colspan="3">示例</td>
+    </tr>
+    <tr>
+        <td width="30%">用户名称</td>
+        <td width="30%">&价格</td>
+        <td width="*">操作</td>
+    </tr>
+    <tr>
+        <td>admin</td>
+        <td>10000</td>
+        <td>查看<br>修改<br>删除</td>
+    </tr>
+    <tr>
+        <td>admin</td>
+        <td>10000</td>
+        <td>查看<br>修改<br>删除</td>
+    </tr>
+    </table>
+</div>
+
+<div class="z-relative-left z-w100p z-pd10">
+    <span class="z-text-prewrap z-pre"></span>
+</div>
+    
+<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
+    1、[z-table]表示表格使用知启蒙表格样式<br>
+    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
+    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
+    4、单元格文本对齐三种左对齐[z-text-left]、居中[z-text-center]、右对齐[z-text-right]，未配置默认左对齐<br>
+    5、单元格文本字体大小，如[z-px16]、[z-px18]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
+    6、单元格文本行高，如百分比行高[z-lh150p]、[z-lh200p]和固定行高[z-lh30]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
+</div>
+</section>
+</div>
+
+<#-- 三、表格圆角最后一行有背景补圆角 -->
+<div class="tutorial title">三、表格圆角边框最后一行有背景补圆角</div>
+
+<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
+<nav>
+    <span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairRadius(this);">补底部圆角</span>
+    <ul class="zi-float-right">
+        <li class="z-active">示例</li>
+        <li>代码</li>
+        <li>说明</li>
+    </ul>
+</nav>
+<section style="min-height:100px;">
+<div class="z-active z-pd10 z-px16" style="padding-top:40px">
+    <table class="z-table z-bordered z-bd-rd8 z-pd10">
+    <tr bgcolor="#f5f5f5">
+        <td colspan="3">示例</td>
+    </tr>
+    <tr>
+        <td width="30%">序号</td>
+        <td width="30%">用户名称</td>
+        <td width="*">操作</td>
+    </tr>
+    <tr>
+        <td>1</td>
+        <td>admin</td>
+        <td>查看</td>
+    </tr>
+    <tr>
+        <td>2</td>
+        <td>admin</td>
+        <td>查看</td>
+    </tr>
+    <tr bgcolor="#f5f5f5">
+        <td colspan="3" class="z-bd-rd-bl8 z-bd-rd-br8">脚注</td>
+    </tr>
+    </table>
+</div>
+
+<div class="z-relative-left z-w100p z-pd10">
+    <span class="z-text-prewrap z-pre"></span>
+</div>
+    
+<div class="z-pd10 z-px16 z-lh200p">圆角边框时，最后一行有背景时，需要对当前行第一列和最后一列增加[class="z-bd-rd-bl8"]和[class="z-bd-rd-br8"]<br>
+    1、[z-table]表示表格使用知启蒙表格样式<br>
+    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
+    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
+    4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
+    5、[z-bd-rd-bl8 z-bd-rd-br8]表示脚注最后一行，也增加下左和下右8像素圆角，这样就不会被背景遮住圆角
+</div>
+</section>
+</div>
+
+<#-- 四、表格圆角边框第一列有向下合并单元格时被合并行首列补左边线 -->
+<div class="tutorial title">四、表格圆角边框第一列有向下合并单元格时，被合并行剩余首列补左边线</div>
+
+<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
+<nav>
+    <span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairLeftBorder(this);">补左边线</span>
+    <ul class="zi-float-right">
+        <li class="z-active">示例</li>
+        <li>代码</li>
+        <li>说明</li>
+    </ul>
+</nav>
+<section style="min-height:100px;">
+<div class="z-active z-pd10 z-px16" style="padding-top:40px">
+    <table class="z-table z-bordered z-bd-rd8 z-pd10">
+    <tr>
+        <td width="30%" rowspan="3">示例</td>
+        <td width="30%">用户名称</td>
+        <td width="*">操作</td>
+    </tr>
+    <tr>
+        <td class="zi-bd-l">admin</td>
+        <td>查看</td>
+    </tr>
+    <tr>
+        <td class="zi-bd-l">admin</td>
+        <td>查看</td>
+    </tr>
+    <tr>
+        <td>脚注</td>
+        <td>admin</td>
+        <td>查看</td>
+    </tr>
+    </table>
+</div>
+
+<div class="z-relative-left z-w100p z-pd10">
+    <span class="z-text-prewrap z-pre"></span>
+</div>
+    
+<div class="z-pd10 z-px16 z-lh200p">圆角边框时，如果有第一列向下合并单元格的情况，被合并的行的第一列要求增加左边线，格式为[class="zi-bd-l"]，有颜色还要加上颜色[class="zi-bd-l z-red"]<br>
+    1、[z-table]表示表格使用知启蒙表格样式<br>
+    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
+    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
+    4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
+    5、第二行和第三行的第一列被第一行第一列向下合并了，因此第二行和第三行剩余的第一列要求增加左边线，格式为[class="zi-bd-l"]
+</div>
+</section>
+</div>
+${zhiqim_com_chapter()}
+</div>
+
+<!-- 主体结束  -->
+</div>
+
+<!-- 容器结束  -->
+</div>
+${zhiqim_com_footer()}