自己动手写的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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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
phpmyadmin的#1251问题
2006/11/25 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
koa2的中间件功能及应用示例
2020/03/05 Javascript
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python多图片合并PDF的方法
2019/01/03 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
幼儿园教师考核制度
2014/02/01 职场文书
幼儿园家长评语
2014/02/10 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
小学教师培训感言
2014/02/11 职场文书
护理专业自荐书
2014/06/04 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
关于颐和园的导游词
2015/01/30 职场文书
对学校的意见和建议
2015/06/04 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏