zyy/ziqim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
zhuyiyi
2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zhiqim_ui/document/tutorial/ui/nav/dropdown.htm
+214
View File
@@ -0,0 +1,214 @@
<#def title = "下拉列表"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。"/>
<#def prevUrl = "tooltip.htm"/>
<#def nextUrl = "../tool/copy.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 doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
function doSelectColor(elem, color)
{
Z(elem).parent().next("section > div > div").each(function(stepbar)
{
Z(stepbar).removeClass("z-red");
Z(stepbar).removeClass("z-orange");
Z(stepbar).removeClass("z-yellow");
Z(stepbar).removeClass("z-green");
Z(stepbar).removeClass("z-cyan");
Z(stepbar).removeClass("z-blue");
Z(stepbar).removeClass("z-purple");
if (Z.Validates.isNotEmpty(color))
Z(stepbar).addClass(color);
});
doUpdateCode(Z(elem).parent().parent());
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "dropdown")}
<!--主体-->
<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;">
下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。
</p>
</div>
<#-- 一、点击单列效果 -->
<div class="tutorial title">一、点击单列效果</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 单击下拉单列列表 -->
<div data-role="z-dropdown" class="z-dropdown" data-options="event:click;" style="width:160px;">
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2">湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
</ul>
</div>
</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">
1、定义一个div，指定为下拉列表[data-role="z-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<br>
</div>
</section>
</div>
<#-- 二、点击多列效果（含颜色） -->
<div class="tutorial title">二、点击多列效果（两列、颜色边框背景）</div>
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<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>
<ul class="zi-float-right">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 单击下拉多列列表 -->
<div data-role="z-dropdown" class="z-dropdown z-cyan z-large" data-options="event:click;width:320px;item-width:159px;" data-onchange="function(){alert('选中一个');}" style="width:160px;">
<span id="proviceId" value="2">更多</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2" selected>湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
<span value="5">北京市</span>
<span value="6" onclick="location.href='/index.htm'">福建省</span>
</ul>
</div>
</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">
1、定义一个div，指定为下拉列表[data-role="z-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<br>
3、在div上指定选择的颜色[class="z-dropdown z-red"]表示显示红色边框、红色背景和红色选中信息
4、指定多列设计，如两列，总宽度[width:320px]，每列宽度[item-width:159px]，注意预留1像素的边框
5、当有更变时，可用事件data-onchange。
</div>
</section>
</div>
<#-- 三、移入移出菜单下拉列表 -->
<div class="tutorial title">三、移入移出菜单下拉列表</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 单击下拉单列列表 -->
<div data-role="z-dropdown" class="z-dropdown" data-options="event:hover;" style="width:160px;">
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2">湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
</ul>
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2">湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
</ul>
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2">湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
</ul>
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
<ul class="z-list">
<span value="1">广东省</span>
<span value="2">湖南省</span>
<span value="3">广西壮族自治区</span>
<span value="4">江西省</span>
</ul>
</div>
</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">
1、定义一个div，指定为下拉列表[data-role="z-dropdown"]，包含样式类[class="z-dropdown"]，指定移入触发[data-options="event:hover;"]和宽度[width:160px]<br>
2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<br>
3、多个下拉列表在一起组成一组时，注意中间有inline-block产生的间隙，可利用zi-mg-l-3 zi-mg-r-3来去除，或保持div相连用zi-mg-l-1去除。
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/ui/nav/stepbar.htm
+179
View File
@@ -0,0 +1,179 @@
<#def title = "步骤条"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。"/>
<#def prevUrl = "tabnav.htm"/>
<#def nextUrl = "tooltip.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 doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
$this.find("section > div").next("div > span").html(html);
}
function doSelectColor(elem, color)
{
Z(elem).parent().next("section > div > div").each(function(stepbar)
{
Z(stepbar).removeClass("z-red");
Z(stepbar).removeClass("z-orange");
Z(stepbar).removeClass("z-yellow");
Z(stepbar).removeClass("z-green");
Z(stepbar).removeClass("z-cyan");
Z(stepbar).removeClass("z-blue");
Z(stepbar).removeClass("z-purple");
if (Z.Validates.isNotEmpty(color))
Z(stepbar).addClass(color);
});
doUpdateCode(Z(elem).parent().parent());
}
function doSelectStep(elem)
{
Z(elem).parent().parent().next("section > div > div").each(function(stepbar)
{
var $step = Z(stepbar).children("nav");
$step.removeClass("z-active");
Z($step[elem.value]).addClass("z-active");
});
doUpdateCode(Z(elem).parent().parent());
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "stepbar")}
<!--主体-->
<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;">
步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。
样式通过before和after属性自动在每个步骤后加上白色箭头。
</p>
</div>
<#-- 一、默认步骤条效果 -->
<div class="tutorial title">一、默认步骤条效果</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 默认步骤条效果 -->
<div class="z-stepbar">
<nav>
<span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
</nav>
<nav>
<span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
</nav>
<nav class="z-active">
<span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
</nav>
<nav>
<span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
</nav>
</div>
</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">
1、定义一个div，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px<br>
2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
</div>
</section>
</div>
<#-- 二、各种颜色步骤条效果 -->
<div class="tutorial title">二、各种颜色步骤条效果</div>
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
<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-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectStep(this);">
<option value="0">第一步</option>
<option value="1" selected>第二步</option>
<option value="2">第三步</option>
<option value="3">第四步</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>
<ul class="zi-float-right">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 默认步骤条效果 -->
<div class="z-stepbar z-red">
<nav>
<span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
</nav>
<nav class="z-active">
<span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
</nav>
<nav>
<span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
</nav>
<nav>
<span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
</nav>
</div>
</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">
1、定义一个div，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px，加上颜色[class="z-red"]表示红色，共支持七种颜色，请选择查看<br>
2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/ui/nav/tabnav.htm
+195
View File
@@ -0,0 +1,195 @@
<#def title = "标签页"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。"/>
<#def prevUrl = "../dialog/loading.htm"/>
<#def nextUrl = "stepbar.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<script>
function doChange(tabnav)
{
doUpdateCode(Z(tabnav));
}
function doUpdateCode($this)
{//更新代码
var html = $this.find("section > div").htmlt();
html = Z.Strings.replaceAll(html, " class=\"\"", "");
$this.find("section > div").next("div > span").html(html);
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "tabnav")}
<!--主体-->
<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;">
标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。
</p>
</div>
<#-- 一、无边框和无标题，标签在左侧 -->
<div class="tutorial title">一、无边框和无标题，标签在左侧</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 无边框和无标题，标签在左侧 -->
<div data-role="z-tabnav" class="z-tabnav">
<nav>
<ul>
<li class="z-active">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
</nav>
<section>
<div class="z-active z-pd10">
标签一内容
</div>
<div class="z-pd10">
标签二内容
</div>
<div class="z-pd10">
标签三内容
</div>
</section>
</div>
</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">
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
</div>
</section>
</div>
<#-- 二、无边框和有标题，标签在右侧，内容有边框 -->
<div class="tutorial title">二、无边框和有标题，标签在右侧，内容有边框</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 无边框和有标题，标签在右侧，内容有边框 -->
<div data-role="z-tabnav" class="z-tabnav">
<nav>
<span>标题</span>
<ul class="zi-float-right">
<li class="z-active">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
</nav>
<section class="z-pd-t20">
<div class="z-active z-bd z-bd-rd5 z-pd10">
标签一内容
</div>
<div class="z-bd z-bd-rd5 z-pd10">
标签二内容
</div>
<div class="z-bd z-bd-rd5 z-pd10">
标签三内容
</div>
</section>
</div>
</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">
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中在section中定义[class="z-pd-t20"]表示所有标签内容顶部内边距为20px<br>
5、在section标签内容中[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px，[class="z-bd z-bd-rd5"]表示标签内容有5像素圆角边框
</div>
</section>
</div>
<#-- 三、有边框和有标题，标签在右侧，加大字体 -->
<div class="tutorial title">三、有边框和有标题，标签在右侧，加大字体</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<ul class="zi-float-left">
<li class="z-active">示例</li>
<li>代码</li>
<li>说明</li>
</ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
<!-- 有边框和有标题，标签在右侧 -->
<div data-role="z-tabnav" class="z-tabnav z-bordered">
<nav class="zi-h60">
<span class="zi-px22 zi-mg-t8">标题</span>
<ul class="zi-float-right zi-h50 zi-px20">
<li class="z-active">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
</nav>
<section>
<div class="z-active z-pd10">
标签一内容
</div>
<div class="z-pd10">
标签二内容
</div>
<div class="z-pd10">
标签三内容
</div>
</section>
</div>
</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">
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav z-bordered"]表示有边框<br>
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/ui/nav/tooltip.htm
+300
View File
@@ -0,0 +1,300 @@
<#def title = "提示框"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。"/>
<#def prevUrl = "stepbar.htm"/>
<#def nextUrl = "dropdown.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.Tooltip.load();
});
function doKeyup(elem, param)
{
if (elem.value < 5)
{
var tooltip = Z.Tooltip(elem, param);
tooltip.$content.css("overflow-y", "auto");
tooltip.$content.css("height", "50px");
}
else
{
Z.Tooltip.close(elem);
}
}
function doUpdateTooltipText()
{
Z("#t-updateTooltipText").find(".z-content").html("我被改成新的数据了");
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "tooltip")}
<!--主体-->
<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;">
提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。
</p>
</div>
<#-- 一、鼠标移入事件 -->
<div class="tutorial title">一、鼠标移入事件，文本下方显示提示框</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:left;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:center;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:right;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</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-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:left;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:center;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:right;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</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-bd-rd8">
<tr>
<td class="text-cyan z-px16" colspan="3">文本右方显示提示框（无箭头，无边框，默认宽度）</td>
</tr>
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠上对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:bottom;arrow:false;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:center;arrow:false;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠下对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:top;arrow:false;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</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-bd-rd8">
<tr>
<td class="text-cyan z-px16" colspan="3">文本左方显示提示框（背景红色，字白色）</td>
</tr>
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠上对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:top;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:center;top:10;color:#fff;border-color:#ff0000;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠下对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:right;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
</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-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:left;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:center;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:right;top:10;width:200px;"
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
</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-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>指定data-id修改：</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-id="t-updateTooltipText"
data-options="event:click;align:left;top:10;width:200px;"
data-text="原本内容：提示内容显示在文本下面，有箭头，左对齐"
onclick="Z('#t-updateTooltipText').find('.z-content').html('改成新内容：提示内容显示在文本下面，有箭头，左对齐');" >点击我打开，点其他地方关闭</span>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 七、输入控制事件 -->
<div class="tutorial title">七、输入控制事件</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="25%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:50, height:20, align:'left', text:'当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5'});">
小于5提示，>=5关闭
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'center', borderColor:'#ff0000', text:'当前值低于5'});">
小于5提示，>=5关闭
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'right', color: '#fff', borderColor:'#f00', backgroundColor:'#f00', text:'当前值低于5'});">
小于5提示，>=5关闭
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}