easyui 使用loading"正在加载..." 风格的加载提示信息

最新推荐文章于 2022-09-29 14:06:55 发布

a1015088819

最新推荐文章于 2022-09-29 14:06:55 发布

阅读量3.4w

点赞数 1

分类专栏： Jquery 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/a1015088819/article/details/41850173

版权

Jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个针对jEasyUI的扩展功能，通过简单的编程即可为任意对象添加类似datagrid远程数据加载时的提示信息。提供了多种显示和关闭加载提示的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>

<script type="text/javascript">
$(function () {
//显示 Loading
$("#mask1").click(function () {
$.easyui.loading({ msg: "正在加载..." });
window.setTimeout(function () { $.easyui.loaded(); }, 1000);
});
//在顶级页面显示 Loading
$("#mask2").click(function () {
$.easyui.loading({ msg: "正在加载...", topMost: true });
window.setTimeout(function () { $.easyui.loaded(true); }, 1000);
});
//在指定容器中显示 Loading
$("#mask3").click(function () {
$.easyui.loading({ msg: "正在加载...", locale: "#maskContainer" });
});
//关闭指定容器中的 Loading
$("#mask4").click(function () {
$.easyui.loaded("#maskContainer");
});
//在顶级页面的指定容器中显示 Loading
$("#mask5").click(function () {
$.easyui.loading({ msg: "正在加载...", locale: "#westCenterLayout", topMost: true });
});
//关顶级页面的闭指定容器中的 Loading
$("#mask6").click(function () {
$.easyui.loaded("#westCenterLayout", true);
});
});
</script>

<h2>jEasyUI Mask Extensions</h2>
<p>该部分扩展由文件 jeasyui.extensions.js 实现。</p>
<hr />
<p>该功能实现的效果为，可以通过编程方式为任意一个对象添加类似于 easyui-datagrid 正在载入远程数据时显示的 "正在加载..." 风格的加载提示信息</p>
<input id="mask1" type="button" value="显示 Loading" />
<input id="mask2" type="button" value="在顶级页面显示 Loading" /><br /><br />
<input id="mask3" type="button" value="在指定容器中显示 Loading" />
<input id="mask4" type="button" value="关闭指定容器中的 Loading" /><br /><br />
<input id="mask5" type="button" value="在顶级页面的指定容器中显示 Loading" />
<input id="mask6" type="button" value="关顶级页面的闭指定容器中的 Loading" />
<br />
<br />
<div id="maskContainer" style="border-color: Black; border-width: 1px; border-style: solid; width: 400px; height: 200px;">这是一个 mask 容器</div>

</div>