jQuery - 消息提示自定义插件

最新推荐文章于 2023-02-21 11:48:01 发布

nospeak

最新推荐文章于 2023-02-21 11:48:01 发布

阅读量140

点赞数

分类专栏： jquery 文章标签： jQuery CSS IE HTML ViewUI

本文链接：https://blog.csdn.net/nospeak/article/details/83811390

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>jQuery - 消息提示自定义插件</title>
<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
  $(document).ready(function(){

    /** msg:内容 
        type:消息框类型 
        iwidth:消息框宽度 
        iheight:消息框高度 
    **/
    jQuery.showMessage = function(msg, type, iwidth, iheight)
    {
      if(iwidth == null) iwidth = 300;
      if(iheight == null) iheight = 50;

      /** 得到IE中间位置 **/
      var cheight = document.body.clientHeight;
      var cwidth = document.body.clientWidth;
      var itop=(cheight-iheight)/2+document.body.scrollTop;
      var ileft=(cwidth-iwidth)/2+document.body.scrollLeft;

      /** 错误信息 **/
      if(type == "error")
        $("#Message").css({background:"#ffccdd", border:"1px solid #f67ba4"});
      /** 失败信息 **/
      else if(type == "fail")
        $("#Message").css({background:"#f8e4fa", border:"1px solid #f694ff"});
      /** 成功信息 **/
      else if(type == "success")
        $("#Message").css({background:"#e7fbe5", border:"1px solid #7dfc70"});
      /** 警告信息 **/
      else if(type == "warning")
        $("#Message").css({background:"#f9f6da", border:"1px solid #fce51f"});
      /** 提示信息 **/
      else if(type == "tip")
        $("#Message").css({background:"#f2f2f2", border:"1px solid #9d9d9d"});

      /** 设置提示框公共样式 **/
      $("#Message").css({width: iwidth+"px", 
                         height: iheight+"px", 
                         "font-size": "12px", 
                         top: itop+"px", 
                         left: ileft+"px",
                         cursor:"pointer",
                         position: "absolute"
                       });

      //设置消息内容
      $("#Message").html(msg);

      /** 效果1 **/
      //$("#Message").hide();
      //$("#Message").fadeIn(1000);

      /** 效果2 **/
      $("#Message").show();
      $("#Message").css({top:(cheight - iheight +"px")});
      $("#Message").animate({top:itop+"px", left:ileft+"px"}, 300);

      /** 点击消息关闭提示事件 **/
      $("#Message").click(function(){
        $("#Message").fadeOut();
      });
    }

    $("#error").click(function(){
      $.showMessage("显示错误信息", "error");
    });
    $("#fail").click(function(){
      $.showMessage("显示失败信息", "fail");
    });
    $("#success").click(function(){
      $.showMessage("显示成功信息", "success");
    });
    $("#warning").click(function(){
      $.showMessage("显示警告信息", "warning");
    });
    $("#tip").click(function(){
      $.showMessage("显示提示信息", "tip");
    });
  });
</script>

</head>

<body>

<div id="Message" align="center"></div>

<input type="button" id="error" value="错误" />
<input type="button" id="fail" value="失败" />
<input type="button" id="success" value="成功" />
<input type="button" id="warning" value="警告" />
<input type="button" id="tip" value="提示" />

</body>

</html>

nospeak

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 消息提示自定义插件

[code="js"]jQuery - 消息提示自定义插件 $(document).ready(function(){ /** msg:内容 type:消息框类型 iwidth:消息框宽度 iheight:消息框高度 **/ jQuery.showMessage = fun...
复制链接

扫一扫

专栏目录