森中灵 最后提交于3月前 整理V8.0.6

<#def title = "加载对话框"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。"/>
<#def prevUrl = "prompt.htm"/>
<#def nextUrl = "tips.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", "loading")}

<!--主体-->
<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;">
        加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。
    </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>
</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()}