自己动手写的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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
JS实现点击掉落特效
Jan 29 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
超清晰的document对象详解
2007/02/27 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
jQuery操作css样式
2017/05/15 jQuery
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python数据类型学习笔记
2016/01/13 Python
Python实现Linux中的du命令
2017/06/12 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
GWebs公司笔试题
2012/05/04 面试题
Java语言的优势
2015/01/10 面试题
小学生暑假家长评语
2014/04/17 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
同学聚会邀请函
2015/01/30 职场文书