자신만의 자바스크립트 프런트엔드 대기 control_javascript 기술을 작성하세요.

온라인에는 다양한 종류의 대기 컨트롤이 있지만 모두 복잡하고 사용하기 쉽지는 않습니다. 또한 내 프로젝트는 부트스트랩이며 비호환성이 두려워 타사 컨트롤을 쉽게 사용할 수 없습니다. 그래서 제가 직접 작성했습니다. 대기 컨트롤이며, CSS 및 JavaScript 네임스페이스의 동적 로딩이 기술적으로 포함되어 있으므로 기록해 두세요.

이 대기 컨트롤은 주로 작업을 수행하기 전에 "데이터를 로드 중입니다. 잠시 기다려 주십시오."라는 정보 프롬프트를 표시합니다. 작업이 성공한 후에는 콜백 함수에서 프롬프트가 사라집니다. CSS를 포함하여 JS에 의해 완전히 동적으로 추가되며 페이지에 사전 설정이 없습니다.

그렇다면 이 CSS를 동적으로 로드하는 방법은 무엇일까요? 대기 컨트롤에서 스타일은 클래스를 사용합니다. 스타일 파일에 이러한 클래스를 미리 작성하면 호출 페이지는 관련 JS 파일을 참조할 뿐만 아니라 이 CSS 파일이 동적으로 로드되더라도 CSS 파일도 참조해야 합니다. js 파일을 사용하고 싶지만 생각해 보면 이러한 간단한 컨트롤에는 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 프론트엔드 대기 제어 구현 과정에 대한 내용입니다. 이 글이 모든 분들께 도움이 되기를 바랍니다.