等待控件在网上搜有好多种,但是都很复杂,不一定用的顺手,再说我的项目是bootstrap的原因,又不敢轻易使用第三方控件,怕不兼容,于是自己动手写了个等待控件,其技术点包括动态加载CSS,javascript的命名空间,所以记录一下。
这个等待控件主要是:进行某个操作前,显示一个信息提示:“数据加载中,请稍候。。。”,操作成功后,在回调函数中将提示消失,原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定。
那么这个CSS怎么动态加载呢?等待控件中,样式使用了class,如果我们将这些class预先写在样式文件中,那么调用页面除了要引用相关JS文件,还要引用CSS文件;就算在js文件中动态加载此css文件,但想想看,一个如此简单的控件就包含了2个文件,小题大做了点。
我是在JS中动态拼凑、加载CSS。
代码如下:
var FTabPages = function () { var tabKeeper = null; // e.g. // tabKeeper = { // container: "" // , isErase: true // , url: "" // , params: {} // , callback: null // }; var wrap = $(document.body); function initTab(tabJson) { tabKeeper = tabJson; } function onTab(tabJson) {//切换页签 if (tabKeeper != null) { var divPrev = $(tabKeeper.container); if (tabKeeper.isErase) { divPrev.empty(); } divPrev.css("display", "none"); } tabKeeper = tabJson; var div = $(tabJson.container); div.css("display", ""); if ($.trim(div.html()).length == ) {//首次加载或已清空 loadwaiting(); getViewRequest(tabJson.url, tabJson.params, function (data) { div.empty().html(data); docallback(tabJson.callback); removeloading(); }, function (data) { alert("数据获取超时或失败!"); removeloading(); }); } else {//非首次加载,隐藏但不清空 docallback(tabJson.callback); } } function getViewRequest(url, params, onsuccess, onerror) { $.ajax({ type: 'get', url: url, data: params, contentType: "text/html; charset=utf-", timeout:, success: function (data) { if (onsuccess != undefined && onsuccess != null) { onsuccess(data); } }, error: function (data) { if (onerror != undefined && onerror != null) { onerror(data); } } }); } function docallback(callback) { if (typeof callback != 'undefined' && callback instanceof Function) { callback(); } } function resetTab() {//刷新当前页签 loadwaiting(); var div = $(tabKeeper.container); getViewRequest(tabKeeper.url, tabKeeper.params, function (data) { div.empty().html(data); div.css("display", ""); docallback(tabKeeper.callback); removeloading(); }); } function loadwaiting() {//显示等待信息 $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: wrap.width(), height: wrap.height() }).appendTo(wrap); $("<div class=\"datagrid-mask-msg\"></div>").html("数据加载中,请稍候...").appendTo(wrap).css({ display: "block", left: (wrap.width() - $("div.datagrid-mask-msg", wrap).outerWidth()) / , top: ($(window).height() - $("div.datagrid-mask-msg", wrap).outerHeight()) / }); } function removeloading() {//隐藏等待信息 wrap.find("div.datagrid-mask-msg").remove(); wrap.find("div.datagrid-mask").remove(); } function initloading() {//设置等待控件样式 var css = ".datagrid-mask { "; css += " position: absolute; "; css += " left: ; "; css += " top: ; "; css += " width: %; "; css += " height: %; "; css += " opacity: .; "; css += " filter: alpha(opacity=); "; css += " display: none; "; css += "} "; css += ".datagrid-mask-msg { "; css += " position: absolute; "; css += " top: %; "; css += " margin-top: -px; "; css += " padding: px px px px;"; css += " width: auto; "; css += " height: px; "; css += " border-width: px; "; css += " border-style: solid; "; css += " display: none; "; css += "}"; //动态加载CSS if (document.all) { window.style = css; document.createStyleSheet("javascript:style"); } else { var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; document.getElementsByTagName('HEAD').item().appendChild(style); } } initloading(); return {//这里是供外部调用的方法 onTab: function (tabJson) { onTab(tabJson); } , resetTab: function () { resetTab(); } , init: function (tabJson) { initTab(tabJson); } }; }();
外部如何调用呢?就这样:
FTabPages.init({ container: "#div_BasicInfo" , isErase: true , url: "http://blog.csdn.net/leftfist" , params: {} , callback: function () { alert("Hello World!"); } });
以上所述就是关于javascript前端等待控件的实现过程,希望本文所述对大家有所帮助。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]