自己动手写的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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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桌面中心(四) 数据显示
2007/03/11 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php5.3 注意事项说明
2013/07/01 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
angular select 默认值设置方法
2017/06/23 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
python中的错误如何查看
2020/07/08 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Redis 常见使用场景
2021/08/30 Redis