first commit
此提交包含在：
@@ -0,0 +1,204 @@
|
||||
<#def title = "询问对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "alert.htm"/>
|
||||
<#def nextUrl = "prompt.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<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>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "dialog", "confirm")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "对话框", "询问对话框")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
新增問題並參考
封鎖使用者