自己动手写的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实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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
一个MYSQL操作类
2006/11/16 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP积分兑换接口实例
2015/02/09 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python 可爱的大小写
2008/09/06 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python中的对数log函数表示及用法
2020/12/09 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
兼职学生的自我评价
2013/11/24 职场文书
参赛口号
2014/06/16 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
公司股份合作协议书
2014/12/07 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
党支部书记岗位职责
2015/02/15 职场文书
个人年终总结范文
2015/03/09 职场文书