自己动手写的javascript前端等待控件

等待控件在互联网上确实有很多种版本，各有特色但可能过于复杂，不一定符合每个项目的实际需求。特别是使用Bootstrap框架的项目，第三方控件的兼容性问题更是让人头疼。我决定亲自编写一个简单的等待控件，供有需要的朋友参考。

这个等待控件的主要功能是在执行某些操作前，显示一个提示信息“数据加载中，请稍候……”。操作完成后，回调函数会将提示信息移除。这个控件完全由JS动态控制，包括CSS部分，页面无需预先设定。

那么，如何动态加载CSS呢？在这个等待控件中，我使用了class样式。如果将这些class预先写在样式文件中，那么调用页面不仅需要引用相关的JS文件，还需要引用CSS文件。为了简化，我决定在JS中动态创建和加载CSS。

具体的实现代码如下：

```javascript

var FTabPages = function() {

var tabKeeper = null;

// 其他属性和方法...

function initTab(tabJson) {

tabKeeper = tabJson;

}

function onTab(tabJson) { // 页签切换操作

if (tabKeeper != null) {

var divPrev = $(tabKeeper.container);

// 其他操作...

}

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(error) {

alert("数据获取超时或失败！"); // 错误处理

});

}

}

// 其他方法和函数...

};

```

这个等待控件的设计简洁实用，能够适应多种场景。动态加载CSS和JS命名空间的技术点使得这个控件更加灵活和易于管理。希望这个控件能对你的项目有所帮助。外部可以通过以下方式调用该模块提供的方法和函数：

你需要确保已经引入了该模块，可以通过`