首頁 > web前端 > js教程 > 自己動手寫的javascript前端等待控制_javascript技巧

自己動手寫的javascript前端等待控制_javascript技巧

WBOY
發布: 2016-05-16 15:34:25
原創
1442 人瀏覽過

等待控件在網上搜有好多種,但是都很複雜,不一定用的順手,再說我的項目是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前端等待控制項的實作過程,希望本文所述對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板