291 lines
11 KiB
HTML
291 lines
11 KiB
HTML
<#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()} |