用javascript写一个前端等待控件

前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来。

因为项目使用了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 == 0) {//首次加载或已清空
            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-8",
            timeout:30000,
            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()) / 2, top: ($(window).height() - $("div.datagrid-mask-msg", wrap).outerHeight()) / 2 });
    }
    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: 0;                    ";
        css += "    top: 0;                     ";
        css += "    width: 100%;                ";
        css += "    height: 100%;               ";
        css += "    opacity: 0.3;               ";
        css += "    filter: alpha(opacity=30);  ";
        css += "    display: none;              ";
        css += "}                               ";
        css += ".datagrid-mask-msg {            ";
        css += "    position: absolute;         ";
        css += "    top: 50%;                   ";
        css += "    margin-top: -20px;          ";
        css += "    padding: 10px 5px 10px 10px;";
        css += "    width: auto;                ";
        css += "    height: 16px;               ";
        css += "    border-width: 2px;          ";
        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(0).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!");
    }
});

版权声明:本文为博主原屙文章,喜欢你就担走。

时间: 2024-12-27 20:01:45

用javascript写一个前端等待控件的相关文章

如何用 Swift 语言构建一个自定控件

(via:破船之家,原文:How To Make a Custom Control in Swift) 用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它们与应用程序进行交互.苹果提供了一套控件, 例如 UITextField,UIButton,UISwitch.通过工具箱中的这些已有控件,我们可以创建各式各样的用户界面. 然而,有时候你希望界面做得稍微的与众不同,那么此时苹果提供的这些控件就无法满足你的需求. 自定义控件,除了是自己构建二外,与苹果提供

纯前端表格控件SpreadJS V11.2新版本发布,全面支持React和Vue

SpreadJS是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,在外观.功能和操作上都与 Excel 高度类似,在表格数据处理上比 Grid 类控件更为优秀,被开发人员誉为"可嵌入系统开发的在线Excel". 近日,纯前端表格控件 SpreadJS V11.2 正式推出,全面支持 React 和Vue,并提供了工作表区域偏移和 CSS 自定义分组等功能. 本次更新的主要内容有: SpreadJS 全面支持 React 和 Vue SpreadJS 现在支持与 React

编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(四)结语

四则运算编译器,虽然说功能很简单,只能编译四则运算表达式.但是编译原理前端部分几乎都有涉及,词法分析,语法分析,还有代码生成. 再复杂的编译器.再简单的编译器,功能上是差不多的,只是复杂的编译器实现上会更困难. 这个系列的文章是为了帮助你入门,在这个基础上再去看编译原理相关书籍,不至于打瞌睡. 如果你对编译原理很有兴趣,并且想更深一步的学习,在这里强烈推荐你看一本书--我心目中的神书--<计算机系统要素-从零开始构建现代计算机>. 这本书神在哪? 神在它通俗易懂,对小白足够友好,但又不过分肤浅

MFC小程序003------MFC使用WebBrowser组件,在对话框中创建滚动视图,动态创建一个静态文本控件并设置鼠标单击的消息响应

MFC小程序截图: 一.在MFC中简单使用WebBrowser的ActiveX插件的方法: 见博文:  http://blog.csdn.net/supermanking/article/details/5866213 二.在对话框中创建视图(我这里创建的是一个滚动视图): 见博文: http://blog.csdn.net/clever101/article/details/4873994 http://blog.csdn.net/clever101/article/details/37790

C++ 一个程序获取另一个程序Edit控件的内容

//一个程序获取另一个程序Edit控件的内容 //根据指定程序的标题名获取改程序窗口的句柄 HWND hWnd=::FindWindow(NULL,"zhang001"); if(hWnd) { MessageBox("get windows"); //根据窗口句柄获取EDIT控件的ID,但是这个ID是通过VS工具spy++获取的 HWND h = ::GetDlgItem(hWnd,0x3E9); if (h!=NULL) { CString str0; //要知

JavaScript弹出式日历控件 无jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" cont

android中一个评分的控件

RatingBar android中一个评分的控件 如何使用 Android Studio下: dependencies { compile 'com.hedgehog.ratingbar:app:1.0.2' } 1,在XML中 <com.hedgehog.ratingbar.RatingBar android:layout_marginTop="50dp" android:layout_gravity="center" android:id="@

美观实用值得收藏的Web前端日期控件的实现(下)

4. jQuery日历插件CLNDR 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示 5.  多款不同样式jQuery日历插件   源码下载  / 在线演示 6.  jQuery datePicker日历控件 源码下载 /  在线演示 7. 支持添加事件jQuery日历 源码下载/   在线演示 美观实用值得收藏的Web前端日期控件的实现(下)

美观实用值得收藏的Web前端日期控件的实现(上)

1.  JS日历选择器控件 源码下载  /  在线演示 2.  jQuery响应式事件日历表 源码下载 /  在线演示 3.pikaday轻量级日期选择插件 源码下载/   在线演示 美观实用值得收藏的Web前端日期控件的实现(上)