ajax加载等待提示,简单通用,多种模式 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> ajax加载等待提示,简单通用,多种模式

原创ajax加载等待提示,简单通用,多种模式

html遮蔽层,ajax加载等待提示

1、遮蔽类型,整个div模块遮蔽型,禁止在加载时操作div

ajax加载等待提示,遮蔽层

//4种调用方式
$("#box2").loading1();
$("#box2").loading1("加载中");
$("#box2").loading();
$("#box2").loading({type:1,text:"加载中"});

2、追加类型,在div最下面提示正在加载中消息框,不影响其他操作

ajax加载等待提示

//3种调用方式
$("#box2").loading2();
$("#box2").loading2("正在加载中");
$("#box2").loading({type:2,text:"加载中"});

3、遮蔽类型,整个浏览器遮蔽,加载数据时,禁止任何操作

ajax加载等待提示

$("body").loading1(); //此种写法,遮蔽层不会随窗口大小改变

$("body").loading3(); //遮蔽层随窗口大小改变
$("body").loading3("正在加载中");

$("body").loading({type:3,text:"加载中"});

<p>
    <input id="Button1" type="button" value="整个浏览器遮蔽层,3s后关闭" />
    <input id="Button2" type="button" value="整个浏览器遮蔽层,不会关闭,遮蔽层不会随窗口大小改变" />
    <input id="Button5" type="button" value="整个浏览器遮蔽层,遮蔽层随窗口大小改变" />
    <input id="Button3" type="button" value="整个div模块遮蔽" />
    <input id="Button4" type="button" value="div模块追加提示" />
</p>

<div id="box2" style="border:1px solid #00f">
    <p>css模版园 cssteach.com</p>
    <p>css模版园 cssteach.com</p>
    <p>css模版园 cssteach.com</p>
    <p>css模版园 cssteach.com</p>
    <p>css模版园 cssteach.com</p>
</div>
    
<script type="text/javascript" src="http://cssteach.com/statics/js/jquery.min.js"></script>
<script>
    $(function() {
        $("#Button1").click(function() {
            $("body").loading3();
            setTimeout(function() { $("body").removeloading(); }, 3000);
        });
        $("#Button2").click(function() {
            $("body").loading3();
        });
        $("#Button5").click(function() {
            $("body").loading1();
        });
        $("#Button3").click(function() {
            $("#box2").loading1();
        });
        $("#Button4").click(function() {
            $("#box2").loading2();
        });
    });
</script>

<script>
    $.fn.extend({
        loading1: function(text) {
            var df = {
                type: 1, //整个div遮蔽
                text: text
            };
            $(this).loading(df);
        },
        loading2: function(text) {
            var df = {
                type: 2, //模块追加提示
                text: text
            };
            $(this).loading(df);
        },
        loading3: function(text) {
            var df = {
                type: 3, //整个div遮蔽,遮蔽层随窗口大小改变
                text: text
            };
            $(this).loading(df);
        },
        loading: function(options) {
            var df = {
                type: 1, //遮蔽样式,1-整个遮蔽,2-末尾提示加载中,3-末尾提示加载中
                text: "正在操作,请稍候..."
            };

            //合并参数
            var options = $.extend(df, options);

            var cur = $(this);
            var next = cur.next("zhezhao_tt");
            if (next.length > 0)
                return;

            cur.removeloading();
            cur.css({ position: 'relative' });
            var next = $('<div class="zhezhao_tt" style="position:relative;width:100%;padding:10px 0;left:0;top:0"></div>');
            var next_zz = $('<div style="width:100%;background:#000;position:absolute;top:0px;left:0px;z-index:9998;opacity:.3;filter:alpha(opacity=30);"></div>');
            var next_conbox = $('<div style="position:relative;z-index:9999;text-align:center;width:100%;color:#efefef;top:30%"></div>');
            var next_con = $('<span style="display: block;width: 200px; margin: 0 auto; padding: 20px; border: 3px solid #efefef;color:#efefef;background: #000;opacity:.8;filter:alpha(opacity=80);">' + options.text + '</span>');

            cur.append(next);
            next.append(next_zz);
            next.append(next_conbox);

            if (options.type == 1) {
                next_conbox.append(next_con);
                next.css({ position: 'absolute' });
                next.height(cur.height() - 20);
                next_zz.height(cur.height());

            }
            else if (options.type == 2) {
                next_conbox.html(options.text);
                next_zz.height(next.height() + 20);
            }
            else if (options.type == 3) {
                next_conbox.append(next_con);
                next.css({ position: 'absolute' });
                next.height(cur.height() - 20);
                next_zz.css({ position: 'fixed' });
                next_zz.height(cur.height());
            }
            else {
                next_conbox.html(options.text);
                next_zz.height(next.height() + 20);
            }
        },
        removeloading: function() {
            var cur = $(this);
            cur.css({ position: '' });
            cur.find(".zhezhao_tt").remove();
        }
    });
</script>

原创文章内容原创,转载请注明出处:cssteach.com

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-163.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版