用javascript写一个前端等待控件
2015-10-26 19:35
671 查看
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来。
因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容。自己写一个。
技术点包括动态加载CSS,javascript的命名空间,所以记录一下。
这个等待控件主要是:进行某个操作前,显示一个信息提示:“数据加载中,请稍候。。。”,操作成功后,在回调函数中将提示消失。
原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定。
那么这个CSS怎么动态加载呢?等待控件中,样式使用了class,如果我们将这些class预先写在样式文件中,那么调用页面除了要引用相关JS文件,还要引用CSS文件;就算在js文件中动态加载此css文件,但想想看,一个如此简单的控件就包含了2个文件,小题大做了点。
我是在JS中动态拼凑、加载CSS。
代码如下:
外部如何调用呢?就这样:
因为项目使用了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 == 0) {//首次加载或已清空 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-8", timeout:30000, 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()) / 2, top: ($(window).height() - $("div.datagrid-mask-msg", wrap).outerHeight()) / 2 }); } 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: 0; "; css += " top: 0; "; css += " width: 100%; "; css += " height: 100%; "; css += " opacity: 0.3; "; css += " filter: alpha(opacity=30); "; css += " display: none; "; css += "} "; css += ".datagrid-mask-msg { "; css += " position: absolute; "; css += " top: 50%; "; css += " margin-top: -20px; "; css += " padding: 10px 5px 10px 10px;"; css += " width: auto; "; css += " height: 16px; "; css += " border-width: 2px; "; 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(0).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写一个前端等待控件
- document.createElement()的用法
- JavaScript之元素在屏幕从左到右移动的的示例
- js密码的匹配正则
- 引入js文件不起效果总结
- js重定向后跳转到当前页面锚点
- 带双反斜杠的Json数据至单反斜杠的Json数据处理
- Javascript中的面向对象
- JSP——Web应用
- <<JavaScript编程全解>>阅读笔记之变量与对象
- jsp中getParameter() 和 getAttribute()
- json字符串相关转换方法
- JSP开发c标签易错总结
- JavaScript TypeArray
- JS - RegExp 笔记
- 常用的API接口,返回JSON格式的服务API接口
- js弹出框、对话框、提示框、弹窗总结
- 实现jsp页面显示用户登录信息,利用session保存。
- 【bzoj1823】【jsoi2010】【满汉全席】【2-sat】
- JSON串常用函数