Schreiben Sie Ihr eigenes Javascript-Frontend und warten Sie auf control_javascript-Kenntnisse

Es gibt viele Arten von Wartesteuerelementen im Internet, aber sie sind alle kompliziert und nicht unbedingt einfach zu verwenden. Außerdem ist mein Projekt ein Bootstrap-Projekt und ich traue mich aus Angst vor Inkompatibilität nicht, einfach Steuerelemente von Drittanbietern zu verwenden. Also habe ich es selbst geschrieben, ein Wartesteuerelement. Zu seinen technischen Punkten gehört das dynamische Laden von CSS- und JavaScript-Namespaces, also zeichnen Sie es auf.

Dieses Wartesteuerelement zeigt hauptsächlich eine Informationsaufforderung an, bevor ein Vorgang ausgeführt wird: „Daten werden geladen, bitte warten ...“. Nach erfolgreichem Abschluss des Vorgangs verschwindet die Eingabeaufforderung in der Rückruffunktion wird vollständig dynamisch von JS hinzugefügt, einschließlich CSS, und es gibt keine Voreinstellung auf der Seite.

Wie lädt man dieses CSS dynamisch? In der Wartesteuerung verwendet der Stil Klassen. Wenn wir diese Klassen im Voraus in die Stildatei schreiben, muss die aufrufende Seite nicht nur auf die relevanten JS-Dateien verweisen, sondern auch auf die CSS-Dateien, selbst wenn diese CSS-Datei dynamisch geladen wird die js-Datei, aber Sie möchten darüber nachdenken, ein so einfaches Steuerelement enthält 2 Dateien, was ein bisschen umständlich ist.

Ich setze CSS dynamisch zusammen und lade es in JS.

Der Code lautet wie folgt:

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);
    }
  };
}();

Wie rufe ich es extern auf? Das ist es:

FTabPages.init({
  container: "#div_BasicInfo"
  , isErase: true
  , url: "http://blog.csdn.net/leftfist"
  , params: {}
  , callback: function () {
     alert("Hello World!");
  }  
});

Oben geht es um den Implementierungsprozess der JavaScript-Front-End-Wartesteuerung. Ich hoffe, dass dieser Artikel für alle hilfreich ist.