文档章节

不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目

深圳大道
 深圳大道
发布于 2016/12/29 15:31
字数 294
阅读 3
收藏 0
function showLoad(tipInfo, type, autohide) {
    var pic = "";
    switch (type) {
        case 0: // loading
            pic = "./Images/loading.gif";
            break;
        case 1: // ok
            pic = "./Images/right.png";
            break;
        case 2: // error
            pic = "./Images/error.png";
            break;
        default: //其他任何值时
            pic = "./Images/loading.gif";
            break;
    }
    var eTip = document.createElement('div');
    eTip.setAttribute('id', 'tipDiv');
    eTip.style.display = 'none';
    eTip.style.width = '300px';
    eTip.style.height = '20px';
    eTip.style.padding = '5px 15px'
    eTip.innerHTML = "<img src=\"" + pic + "\" style=\"float:left;\" />  <span style=\"color:#373737; font-size:14px\">" + tipInfo + "</span>";
    try {
        document.body.appendChild(eTip);
    } catch (e) { }
    $("#tipDiv").css({
        position: "absolute",
        border: "solid 0px #D1D1D1",
        left: ($(window).width() - $("#tipDiv").outerWidth()) / 2,
        top: ($(window).height() - $("#tipDiv").outerHeight()) / 2 + $(document).scrollTop()
    });
    $('#tipDiv').show();
    if (autohide == true) {
        $('#tipDiv').fadeOut(3000);
    }
}

function closeLoad() {
    $('#tipDiv').fadeOut();
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery提示框封装</title>
    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#name").blur(function () {
                if ($(this).val() == "") {
                    tip(this, "×请输入");
                } else {
                    tip(this,"√输入正确");
                }
            })
        });
        
        function tip(o,tip) {
            var eTip = document.createElement("span");
            var objid = $(o).attr("id") + "_tipDiv";
            var value = $(o).val();
            //绝对路径
            var x = $(o).offset().top;
            var y = $(o).offset().left;
            var w = $(o).width();
            var h = $(o).height();
            eTip.setAttribute("id", objid);
            try {
                document.body.appendChild(eTip);
            } catch (e) { }
            $("#" + objid).hide();
            $("#" + objid).css({
                top: x,
                left: y + w + 10,
                height: h,
                position: "absolute",
                padding: "5px"
            });
            $("#" + objid).html(tip);
            $("#" + objid).show();
        }
    </script>
</head>
<body>
<br/><br/><br/><br/><br/>
  <input type="text" id="name" /><br/><br/><br/><br/>
  <input type="text" id="pwd" />

</body>
</html>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/17438567

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
分享 6 个实用的 jQuery 和 CSS 实例及源码

jQuery是一个十分轻巧方便的JS类库,有了这个强大的框架,我们的项目可以简化不少,今天给大家分享6个WEB项目中很可能会用上的jQuery实例及源码,希望大家喜欢。 1、jQuery幻灯片播放插件cov...

yykj
2012/12/07
8.3K
12
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
212
0
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
824
5
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
974
3
jQuery实现自定义checkbox和radio样式

jQuery实现自定义checkbox和radio样式 1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决...

开元中国2015
2015/07/14
455
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部