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


Posted in Javascript onOctober 30, 2015

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

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
AngularJS入门之动画
Jul 27 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
异步JS框架的作用以及实现方法
Oct 29 #Javascript
图解JavaScript中的this关键字
May 28 #Javascript
You might like
php实现文件编码批量转换
2014/03/10 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
TensorFlow如何实现反向传播
2018/02/06 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python进度条的制作代码实例
2019/08/31 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python实现智能语音天气预报
2019/12/02 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
python3.5的包存放的具体路径
2020/08/16 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
亲子读书活动方案
2014/02/22 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
爱心活动计划书
2014/04/26 职场文书
家长给老师的感谢信
2015/01/20 职场文书
资料员岗位职责
2015/02/10 职场文书
农村婚庆主持词
2015/06/29 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android