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

前端技术 2023/09/01 JavaScript

等待控件在网上搜有好多种，但是都很复杂，不一定用的顺手，再说我的项目是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前端等待控件的实现过程，希望本文所述对大家有所帮助。

本文地址：https://www.stayed.cn/item/2836

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案