ziqim/zhiqim_ui/document/tutorial/ui/dialog/dialog.htm

<#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">
&lt;button class="z-button z-blue" onclick="parent.Z.Dialog.close(location.hash);"&gt;关闭&lt;/button&gt;
&lt;button class="z-button z-blue" onclick="parent.Z.Dialog.close();"&gt;关闭&lt;/button&gt;
</span>
3、设计控制台方式：通过设计两个DIV，第一个DIV指定块溢出为auto或scroll，第二个DIV底部绝对定位高度50，两个DIV的高度之和=dialog.height。如下：
<span class="z-text-prewrap z-pre">
&lt;div class="z-w100p z-overflow-x-hidden z-overflow-y-scroll" style="height:250px;"&gt;
...正文内容...
&lt;/div&gt;
&lt;div class="z-absolute z-w100p z-h50" style="bottom:0;left:0;background-color:#e9f3fd;"&gt;
    &lt;div class="z-button z-blue z-w100 z-absolute" style="left:160px;top:12px;" onclick="alert('我点了确定!');"&gt;确定&lt;/div&gt;
    &lt;div class="z-button z-absolute" style="right:160px;top:12px;" onclick="parent.Z.Dialog.close();"&gt;关闭&lt;/div&gt;
&lt;/div&gt;
</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()}