Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
dialog.htm13KB
<#def title = "自定义对话框"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "自定义对话框是指根据业务要求，自动组装对话框参数，完成对话框的弹出。自定义对话框支持的参数有标题、宽度、高度、边框颜色、目标区域、指定弹出HTML、指定弹出URL等一系列参数，是各种对话框的基础。"/>
<#def prevUrl = "../form/calendar.htm"/>
<#def nextUrl = "alert.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<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);
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "dialog", "dialog")}
<!--主体-->
<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;">
自定义对话框是指根据业务要求，自动组装对话框参数，完成对话框的弹出。自定义对话框支持的参数有标题、宽度、高度、边框颜色、目标区域、指定弹出HTML、指定弹出URL等一系列参数，是各种对话框的基础。
</p>
</div>
<#-- 一、弹出HTML内容（对象方式） -->
<div class="tutorial title">一、弹出HTML内容（对象方式）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<span class="zi-text-cyan">默认有背景边框、有遮罩层、固定中间位置</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 example">
<script>
function openDialogText()
{//标题、文本HTML、宽度和高度和固定位置五个值是必须的
var dialog = new Z.Dialog();
dialog.title = "我是标题";
dialog.text = "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>";
dialog.width = 500;
dialog.height = 200;
dialog.fixed = true;
dialog.execute();
}
</script>
<br><br>
<a href="javascript:void(0);" onclick="openDialogText()">点我弹出对话框</a>
</div>
<div class="relative left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh150p">
最简单的弹出对话框，要求标题、文本HTML、宽度和高度和固定位置五个值：<br>
1、title指明对话框标题<br>
2、text指定弹出对话框文本HTML<br>
3、width指定对话框宽度<br>
4、height指定对话框高度<br>
5、fixed指定对话框在文档的位置固定<br>
</div>
</section>
</div>
<#-- 二、弹出HTML内容（函数方式） -->
<div class="tutorial title">二、弹出HTML内容（函数方式）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<span class="zi-text-cyan">指定有背景边框、无遮罩层，固定位置</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 example">
<script>
function openDialogText2()
{//设置参数方式并立即执行
Z.dialog({
title: "我是标题",
text: "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>",
width: 500,
height: 200,
fixed: true,
shadow: false
});
}
</script>
<br><br>
<a href="javascript:void(0);" onclick="openDialogText2()">调用Z.dialog函数弹出对话框</a>
</div>
<div class="relative left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p"><br>
1、最简单的弹出对话框，要求标题、文本HTML、宽度和高度四个值<br>
2、这里定义了shadow: false表示无遮罩层<br>
</div>
</section>
</div>
<#-- 三、弹出HTML内容（函数方式） -->
<div class="tutorial title">三、弹出HTML内容（函数方式）</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<span class="zi-text-cyan">指定无背景边框、无遮罩层，不固定位置（随滚动条滚动）</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 example">
<script>
function openDialogText3()
{//设置参数方式并立即执行
Z.dialog({
title: "我是标题",
text: "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>",
width: 500,
height: 200,
hasBackground: false,
shadow: false
});
}
</script>
<br><br>
<a href="javascript:void(0);" onclick="openDialogText3()">调用Z.dialog函数弹出对话框</a>
</div>
<div class="relative left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p"><br>
1、最简单的弹出对话框，要求标题、文本HTML、宽度和高度四个值<br>
2、这里定义了hasBackground: false表示无背景边框<br>
3、这里定义了shadow: false表示无遮罩层<br>
</div>
</section>
</div>
<#-- 四、弹出URL（最简方式） -->
<div class="tutorial title">四、弹出URL（最简方式）</div>
<div class="z-tabnav z-bordered z-mg-t20" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<span class="zi-text-cyan">嵌入一个新的页面（页面内提供确定和关闭按钮）</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 example">
<script>
function openDialogUrl()
{//标题、URL、宽度和高度四个值是必须的
var dialog = new Z.Dialog();
dialog.title = "我是标题";
dialog.url = "dialog_url.htm";
dialog.width = 500;
dialog.height = 300;
dialog.fixed = true;
dialog.execute();
}
</script>
<br><br>
<a href="javascript:void(0);" onclick="openDialogUrl()">点我弹出对话框，有控制台</a>
</div>
<div class="relative left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、最简单的弹出URL对话框，要求标题、URL、宽度和高度四个值<br>
2、在弹出页中编写[关闭]按钮，通过JS关闭方法：parent.Z.Dialog.close(location.hash);或全部关闭parent.Z.Dialog.close();，如：<br>
<span class="z-text-prewrap z-pre">
<button class="z-button z-blue" onclick="parent.Z.Dialog.close(location.hash);">关闭</button>
<button class="z-button z-blue" onclick="parent.Z.Dialog.close();">关闭</button>
</span>
3、设计控制台方式：通过设计两个DIV，第一个DIV指定块溢出为auto或scroll，第二个DIV底部绝对定位高度50，两个DIV的高度之和=dialog.height。如下：
<span class="z-text-prewrap z-pre">
<div class="z-w100p z-overflow-x-hidden z-overflow-y-scroll" style="height:250px;">
...正文内容...
</div>
<div class="z-absolute z-w100p z-h50" style="bottom:0;left:0;background-color:#e9f3fd;">
<div class="z-button z-blue z-w100 z-absolute" style="left:160px;top:12px;" onclick="alert('我点了确定!');">确定</div>
<div class="z-button z-absolute" style="right:160px;top:12px;" onclick="parent.Z.Dialog.close();">关闭</div>
</div>
</span>
</div>
</section>
</div>
<#-- 五、弹出URL（设置参数） -->
<div class="tutorial title">五、弹出URL（设置参数）</div>
<div class="z-tabnav z-bordered z-mg-t20" data-role="z-tabnav" onchange="doChange(this);">
<nav>
<span class="zi-text-cyan">嵌入一个新的页面，并设置参数</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 example">
<script>
function openDialogUrl2()
{//设置遮罩参数，设置颜色，设置滚动到最下方
var dialog = new Z.Dialog();
dialog.title = "我是标题";
dialog.url = "dialog_url2.htm";
dialog.width = 500;
dialog.height = 300;
dialog.shadowOpacity = 0.8;
dialog.borderColor = "#d3d3d3";
dialog.fixed = true;
dialog.scroll = true;
dialog.execute();
}
</script>
<br><br>
<a href="javascript:void(0);" onclick="openDialogUrl2()">点我弹出对话框，滚动最底部</a>
</div>
<div class="relative left z-w100p z-pd10">
<span class="z-text-prewrap z-pre"></span>
</div>
<div class="z-pd10 z-px16 z-lh200p">
1、最简单的弹出URL对话框，要求标题、URL、宽度和高度四个值<br>
2、设置shadowOpacity = 0.1;遮罩层透明度为0.8<br>
3、设置borderColor = "#e9fefd";边框颜色<br>
4、设置scroll = true;滚动滚动条到最底部
</div>
</section>
</div>
<#-- 对话框参数说明 -->
<div class="tutorial title">对话框参数说明（二十四个）</div>
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="20%">参数</td>
<td width="30%">值</td>
<td width="*">说明</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">基本参数</td>
</tr>
<tr>
<td class="z-samp">id</td>
<td>Z.random(10);</td>
<td>该对话框使用的编号，如果未指定，则用系统取随机值，要求必须唯一</td>
</tr>
<tr>
<td class="z-samp">title</td>
<td>提示</td>
<td>对话框标题</td>
</tr>
<tr>
<td class="z-samp">width</td>
<td>300</td>
<td>对话框宽度</td>
</tr>
<tr>
<td class="z-samp">height</td>
<td>200</td>
<td>对话框高度</td>
</tr>
</tr>
<td class="z-samp">borderColor</td>
<td>#ccc</td>
<td>边框颜色</td>
</tr>
<tr>
<td class="z-samp">target</td>
<td>document</td>
<td>目标区域</td>
</tr>
<tr>
<td class="z-samp">fixed</td>
<td>false</td>
<td>是否在document下固定位置，只有当target===document时有效</td>
</tr>
<tr>
<td class="z-samp">position</td>
<td>未配置默认居中</td>
<td>1、数字0表示居中，1-3左中下，4-5中上下，6-8右上中下<br>2、指定位置如：{top:100,left:100}</td>
</tr>
<tr>
<td class="z-samp">timeout</td>
<td>未配置不开启</td>
<td>多少时间超时关闭，单位：毫秒</td>
</tr>
<tr>
<td class="z-samp">callback</td>
<td>未配置不开启</td>
<td>操作回调函数</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">内容相关2个参数</td>
</tr>
<tr>
<td class="z-samp">url</td>
<td>和text互斥，只能且必须填写一个</td>
<td>对话框调用的URL，和text配置项互斥</td>
</tr>
<tr>
<td class="z-samp">text</td>
<td>和url互斥，只能且必须填写一个</td>
<td>对话框显示的HTML文本，和url配置项互斥</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">遮罩层参数</td>
</tr>
<tr>
<td class="z-samp">shadow</td>
<td>true</td>
<td>遮罩层是否启用 true|false</td>
</tr>
<tr>
<td class="z-samp">shadowColor</td>
<td>#757575</td>
<td>遮罩层颜色</td>
</tr>
<tr>
<td class="z-samp">shadowOpacity</td>
<td>0.6</td>
<td>遮罩层透明度，值在0-1之间</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">标题拖拽</td>
</tr>
<tr>
<td class="z-samp">hasTitle</td>
<td>true</td>
<td>标题栏是否显示，true|false 默认true，当=false时drag无意义</td>
</tr>
<tr>
<td class="z-samp">titleBgColor</td>
<td>#f5f5f5</td>
<td>标题背景色</td>
</tr>
<tr>
<td class="z-samp">drag</td>
<td>true</td>
<td>是否支持拖拽标题，true|false 默认true</td>
</tr>
<tr>
<td class="z-samp">dragOpacity</td>
<td>0.8</td>
<td>拖拽时透明度，值在0-1之间，默认0.8</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">背景参数</td>
</tr>
<tr>
<td class="z-samp">hasBackground</td>
<td>true</td>
<td>背景是否显示，true|false 默认true</td>
</tr>
<tr>
<td class="z-samp">backgroundColor</td>
<td>#e9f3fd</td>
<td>背景颜色，默认#e9fefd</td>
</tr>
<tr>
<td colspan="3" class="z-text-cyan">滚动滚动条</td>
</tr>
<tr>
<td class="z-samp">scroll</td>
<td>false</td>
<td>是否滚动，true|false 默认false</td>
</tr>
<tr>
<td class="z-samp">scrollHeight</td>
<td>0</td>
<td>指定滚动高度，(scrollHeight==0)表示到底部，即最大高度，!=0表示指定高度</td>
</tr>
<tr>
<td class="z-samp">scrollPad</td>
<td>0</td>
<td>指定滚动高度时，保留一部分即height=scrollHeight-scrollPad</td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}