用javascript写一个前端等待控件
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来。
因为项目使用了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写一个前端等待控件的更多相关文章
- 写一个自定义的控件接口 C#
以下是我的测试代码:APP_Code/ucInterface.cs /* APP_Code/ucInterface.cs */ /// <summary> /// Summary desc ...
- 从 .NET 到 JavaScript —— 纯前端报表控件 ActiveReportsJS 焕新登场
报表工具的发展史,最早可以追溯到微软报表SSRS(SQL Server Reporting Services)时期.最初,报表工具主要应用于报表的定制.呈现和输出.经过几十年的发展,随着各种业务系统功 ...
- 【React】开发一个城市选择控件
想到做这个,是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题 ...
- 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...
- 【新功能前瞻】SpreadJS 纯前端表格控件V12.2:打印增强、拖拽填充等六大特性
新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...
- 如何用 Swift 语言构建一个自定控件
(via:破船之家,原文:How To Make a Custom Control in Swift) 用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它 ...
- 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
[案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...
- ASP.NET自定义控件组件开发 第一章 第一章:从一个简单的控件谈起
第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第三 ...
- C++ 一个程序获取另一个程序Edit控件的内容
//一个程序获取另一个程序Edit控件的内容 //根据指定程序的标题名获取改程序窗口的句柄 HWND hWnd=::FindWindow(NULL,"zhang001"); if( ...
随机推荐
- 【struts2】学习笔记
常见问题及注意事项: 1.下载struts2时,要看清所下载的版本,不同版本web.xml配置路径不同! 2. 导入jar包时,导入的包要完全准确,缺少或过多的会导致缺失或冲突! 3. Registe ...
- python基础知识10-描述器和装饰器
课前的解答 1.vim怎么退出都知道吧,配置了pep8,所以说会出现退出的时候error,再退出一次就ok q:退出 w:保存 wq 保存退出 q!:强制退出 shift + zz:保存退出 x:保存 ...
- 数据结构实验4:C++实现循环队列
实验4 4.1 实验目的 熟练掌握队列的顺序存储结构和链式存储结构. 熟练掌握队列的有关算法设计,并在循环顺序队列和链队列上实现. 根据具体给定的需求,合理设计并实现相关结构和算法. 4.2 实验要求 ...
- ASP.NET MVC如何在页面加载完成后ajax异步刷新
背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...
- PL/SQL编程接触
1.认识PL/SQL 结构化查询语言(Structured Query Language,SQL)是用来访问和操作关系型数据库的一种标准通用语言,它属于第四代语言(4GL),简单易学,使用它可以很方便 ...
- 调用hcm接口同步员工数据更新员工信息没有同步到bdm
原来是更新的时候,baseEmployeeEntity的id为空,这时候需要把原先的baseEmployeeEntity1的id赋值给baseEmployeeEntity,问题解决
- Leetcode 264.丑数II
丑数II 编写一个程序,找出第 n 个丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例: 输入: n = 10 输出: 12 解释: 1, 2, 3, 4, 5, 6, 8, 9, 10 ...
- zoj 1295 Reverse Text
Reverse Text Time Limit: 2 Seconds Memory Limit: 65536 KB In most languages, text is written fr ...
- POJ 1379 (随机算法)模拟退火
题目大意: 给定一堆点,找到一个点的位置使这个点到所有点中的最小距离最大 这里数据范围很小,精度要求也不高,我们这里可以利用模拟退火的方法,随机找到下一个点,如果下一个点比当前点优秀就更新当前点 参考 ...
- bzoj 1432 [ZJOI2009]Function 思想
[bzoj1432][ZJOI2009]Function Description Input 一行两个整数n; k. Output 一行一个整数,表示n 个函数第k 层最少能由多少段组成. Sampl ...