first commit
这个提交包含在：
@@ -0,0 +1,169 @@
|
||||
<#def title = "警告对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。"/>
|
||||
<#def prevUrl = "dialog.htm"/>
|
||||
<#def nextUrl = "confirm.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", "alert")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!');">点我弹出一行告警选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!');">点我弹出多行告警选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!这是一个告警!abcdefghabcdefghabcdefghabcdefgh11111111111111111111111111111111111111!');">点我弹出多行有字母告警选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!', function(){alert('我是回调内容!')}, {hasBackground:true});">点我弹出告警选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框<br>
|
||||
2、点击确定后回调函数<br>
|
||||
3、设置有背景
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!', function(){alert('我是回调内容!');}, {height: 140});">点我弹出告警对话框，高度140px</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框<br>
|
||||
2、点击确定后回调函数<br>
|
||||
3、指定对话框高度<br>
|
||||
</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">text</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">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>警告对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>警告对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>警告对话框是否显示背景</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,171 @@
|
||||
<#def title = "询问对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "alert.htm"/>
|
||||
<#def nextUrl = "prompt.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", "confirm")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？', function(){alert('我选了确定!');});">点我弹出确认对话框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？', function(){alert('我选了确定!');});">点我弹出多行确认选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？abcdefghabcdefghabcdefghabcdefgh!', function(){alert('我选了确定!');});">点我弹出多行有字母确认选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？', function(){alert('我选了确定!');}, {hasBackground:true});">点我弹出确认对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、设置有背景
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？', function(){alert('我选了确定，指定高度140!');}, {height: 140});">点我弹出确认对话框，高度140px</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定对话框高度<br>
|
||||
</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">text</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">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>确认对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>确认对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>确认对话框是否显示背景</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,434 @@
|
||||
<#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()}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>知启蒙管理控制台</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
${Styles.src("/src/zhiqim.css")}
|
||||
${Scripts.src("/src/zhiqim.js")}
|
||||
${Scripts.src("/src/zhiqim_static.js")}
|
||||
${Scripts.src("/src/zhiqim_static_util.js")}
|
||||
${Scripts.src("/src/zhiqim_query.js")}
|
||||
${Scripts.src("/src/zhiqim_md5.js")}
|
||||
${Scripts.src("/src/zhiqim_dialog.js")}
|
||||
${Scripts.src("/src/zhiqim_ajax.js")}
|
||||
${Scripts.src("/src/zhiqim_calendar.js")}
|
||||
${Scripts.src("/src/zhiqim_clipboard.js")}
|
||||
${Scripts.src("/src/zhiqim_coder.js")}
|
||||
${Scripts.src("/src/zhiqim_form.js")}
|
||||
${Scripts.src("/src/zhiqim_drag.js")}
|
||||
${Scripts.src("/src/zhiqim_dropdown.js")}
|
||||
${Scripts.src("/src/zhiqim_tabnav.js")}
|
||||
${Scripts.src("/src/zhiqim_floater.js")}
|
||||
${Scripts.src("/src/zhiqim_editable.js")}
|
||||
${Scripts.src("/src/zhiqim_upload.js")}
|
||||
${Scripts.src("/src/zhiqim_uploadmult.js")}
|
||||
${Scripts.src("/src/zhiqim_uploadlarge.js")}
|
||||
<script>
|
||||
//Z.onload(function(){
|
||||
alert("您闲置太久或未登录，正在返回初始界面，请确定.....");
|
||||
//parent.Z.Dialog.close(location.hash);
|
||||
//alert(location.hash);
|
||||
parent.Z.Dialog.close(location.hash)
|
||||
//});
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${context.getContextName()}</title>
|
||||
${Styles.src(zhiqim.css)}
|
||||
${Styles.htmlOverflowYScroll()}
|
||||
<style>body{background:#cad7f7;font-size: 14px;}</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="z-w100p z-h100"></div>
|
||||
|
||||
<table class="z-table z-bd z-blue z-bg-white zi-w80p z-pd10 z-mg-t50 z-relative-center">
|
||||
<tr>
|
||||
<th colspan="2" class="z-px16 z-lh150p z-text-white z-bg-blue-deep">${context.getContextName()}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right" class="z-bd-l z-blue" width="40%">登录名：</td>
|
||||
<td><input class="z-input z-blue" name="userName" type="text" placeholder="请输入账号" size="15" value="zhiqim" maxlength="32" autocomplete="off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">密 码：</td>
|
||||
<td><input class="z-input z-blue" name="userPass" type="password" size="15" value="zhiqim" maxlength="32" autocomplete="off"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="z-w100p z-h100"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<#def title = "加载对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。"/>
|
||||
<#def prevUrl = "prompt.htm"/>
|
||||
<#def nextUrl = "../nav/tabnav.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", "loading")}
|
||||
|
||||
<!--主体-->
|
||||
<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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading();">点我弹出全屏加载器</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、无遮罩层
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({shadow: true});">点我弹出全屏加载器</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、全屏遮罩，不允许操作
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading1" class="z-table z-bordered z-blue" style="width:50%;height:200px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading2" class="z-table z-bordered z-blue" style="width:50%;height:800px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</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">param.radius</td>
|
||||
<td>{radius:"z-bd-rd5"}</td>
|
||||
<td>圆角，默认5像素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.background</td>
|
||||
<td>{background:"#fff"}</td>
|
||||
<td>背景颜色，默认白色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.text</td>
|
||||
<td>{text:"正在加载..."}</td>
|
||||
<td>加载中提示文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.target</td>
|
||||
<td>{target:document}</td>
|
||||
<td>遮罩目标，默认document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.position</td>
|
||||
<td>未配置默认居中</td>
|
||||
<td>目标位置，参见自定义对话框位置说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.shadow</td>
|
||||
<td>{shadow:false}</td>
|
||||
<td>是否显示遮罩层</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.borderColor</td>
|
||||
<td>{borderColor:"#d8d8d8"}</td>
|
||||
<td>边框颜色，默认"#d8d8d8"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:150}</td>
|
||||
<td>加载框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>{height:50}</td>
|
||||
<td>加载框高度</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,291 @@
|
||||
<#def title = "提示对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "confirm.htm"/>
|
||||
<#def nextUrl = "loading.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", "prompt")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', 'abc', function(value){alert(value);});">点我弹出单行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', '', function(value){alert(value);}, {hasBackground:true, maxLength:5, dataOptions:'type:Numeric;', placeholder:'最多5位数字'});">点我弹出单行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('选择', '2', function(value){alert(value);}, {type:'select', hasBackground:true, selects:[{name:'湖南',value:1},{name:'江西',value:2}]});">点我弹出单行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', 'abc', function(value){alert(value);}, {type: 'textarea'});">点我弹出多行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定类型type=textarea
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', 'abc', function(value){alert(value);}, {type:'textarea', maxLength:5, placeholder:'最多5位字符'});">点我弹出多行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定类型type=textarea
|
||||
</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:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改textarea', Z('#textareaContent').val(), function(value){Z('#textareaContent').val(value);}, {type: 'textarea', height: 500});">点我弹出多行提示对话框</a>
|
||||
<br><br>
|
||||
<textarea id="textareaContent" class="z-textarea z-w100p z-h150 zi-px16">我的内容就是我</textarea>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定类型type=textarea<br>
|
||||
5、点确定把值回填到文本域中
|
||||
</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">text</td>
|
||||
<td>必填</td>
|
||||
<td>提示信息，显示在对话框中的提示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</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">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>提示对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>提示对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>提示对话框是否显示背景</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.type</td>
|
||||
<td>{type:"input"}</td>
|
||||
<td>内容是使用"select","input"还是"textarea"，默认"input"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.style</td>
|
||||
<td>{className:"z-samp zi-px16"}</td>
|
||||
<td>为输入框增加样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.className</td>
|
||||
<td>{className:"z-samp zi-px16"}</td>
|
||||
<td>为输入框增加样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.placeholder</td>
|
||||
<td>{placeholder:"请输入数字"}</td>
|
||||
<td>为输入框指定引导文字</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.maxLength</td>
|
||||
<td>{maxLength:5}</td>
|
||||
<td>为输入框指定最大长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.dataOptions</td>
|
||||
<td>{dataOptions:"type:Numeric"}</td>
|
||||
<td>为输入框指定输入控制（input时有效）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.selects</td>
|
||||
<td>{selects:[{name:"湖南",value:1},{name:"江西",value:2]}</td>
|
||||
<td>为选择框时指定option表，和value相等时表示selected</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
在新工单中引用
屏蔽一个用户