zoukankan      html  css  js  c++  java
  • 加载等待loading

    自己写的一个小插件,还有很多需要完善。。。

     (function ($) {
        $.fn.StartLoading = function (option) {
            var defaultVal = {
                loadgif: 'image/loading.gif',
                backcolor: 'white',
                picheight: 50,
                pic 50,
                fullshowpic: false,//图片是否设置透明度
                opacity: 0.5,
                timeout: 3000
            }
            var result = $.extend({}, defaultVal, option);
            var $obj = $(this);//选择器的Jquery对象
            var iswndordoc = false;
            if ($(this).get(0) == document || $(this).get(0) == window || $(this).get(0) == document.body) {
                iswndordoc = true;
                $obj = $(document.body);
            }
            //获取对象属性
            var constClone = {
                const $obj.width(),
                constheight: $obj.height(),
                constleft: iswndordoc == true ? 0 : $obj.offset().left,
                consttop: iswndordoc == true ? 0 : $obj.offset().top
            }
            if (iswndordoc) {
                var $clonebottom = $("<div></div>");
            } else {
                if ($(this)[0].tagName != "div") {
                    var $objTemp = $("<div id="_temp_div" style="" + constClone.constwidth + "; height:" + constClone.constheight + "; left:" + constClone.constleft + "; top:" + constClone.consttop + ""></div>");
                    $($obj.parent().get(0)).append($objTemp);
                    $obj = $objTemp;
                }
                //生成最底层DIV
                var $clonebottom = $obj.clone().removeAttr("id").removeAttr("class").removeAttr("name");
            }

            //设置最底层DIV属性
            $clonebottom.removeClass().removeAttr("style").empty().css({
                "position": "absolute",
                "left": constClone.constleft,
                "top": constClone.consttop,
                "z_index": "10000",
                "width": constClone.constwidth,
                "height": constClone.constheight,
                "background-color": "transparent"
            });
            var $cloneTop = $clonebottom.clone().css({ "z_index": "9999", "background-color": "" + result.backcolor + "", "position": "" });
            $clonebottom.append($cloneTop);
            $clonebottom.append("<img id="_loading_plugin" src="" + result.loadgif + "" style="position:absolute;z_index: 9999"/>");
            if (iswndordoc) {
                $obj.append($clonebottom);
            } else {
                $($obj.parent().get(0)).append($clonebottom);
            }
            var $imgloading = $("#_loading_plugin");
            $imgloading.css({ "width": "" + result.picwidth + "px", "height": "" + result.picheight + "px" });
            $imgloading.css({ "left": (constClone.constwidth - $imgloading.width()) / 2, "top": (constClone.constheight - $imgloading.height()) / 2 });
            if (result.fullshowpic)
                $clonebottom.css("opacity", "" + result.opacity + "");
            else
                $cloneTop.css("opacity", "" + result.opacity + "");
            var hand = setTimeout(function () {
                $clonebottom.fadeOut("slow", function () {
                    $(this).remove();
                    clearTimeout(hand);
                });
            }, result.timeout)
            return $clonebottom;
        }

        $.fn.StopLoading = function () {
            var $globalthis = $(this);
            $globalthis.remove()
        }
    })(jQuery)

    用法: 开始显示  var $load = $(window).StartLoading({ timeout: 1000000, fullshowpic: true }); 结束显示:  $load.StopLoading();

  • 相关阅读:
    Entity Framework6 with Oracle(可实现code first)
    ORACLE官方全托管驱动 Oracle.ManagedDataAccess 12.1.0.1.0
    C#连接Oracle数据库的四种方法
    WPF的TextBox产生内存泄露的情况
    ArcGIS客户端API中加载大量数据的几种解决办法(以Silverlight API为例)
    ArcGISDynamicMapServiceLayer 和 ArcGISTiledMapServiceLayer 区别
    ArcGIS客户端API中加载大量数据的几种解决办法
    MVVM中间接使用事件(命令)
    Tornaod框架
    跨站请求伪造CSRF
  • 原文地址:https://www.cnblogs.com/randyzhuwei/p/4019081.html
Copyright © 2011-2022 走看看