仿猪八戒一个提示(jQuery插件) v0.1 beta

先看下效果

js

jQuery.extend({

    prompt: function (text, type, times) {
        var prompt = $(['<div class="prompt ', type, '"><i></i><em>', text, '</em></div>'].join('')).appendTo('body');

        prompt.css('margin-left', -prompt.width()).fadeIn();

        setTimeout(function () {
            prompt.fadeOut(function () {
                prompt.remove();
            });
        }, times);
    }
});

css

.prompt {
  left: 50%;
  top: 50%;
  padding: 10px;
  width: auto;
  float: left;
  z-index: 9002;
  display: none;
  position: absolute;
  border-radius: 3px;
}
.prompt i {
  background: url(../images/pic.png) no-repeat 0 0;
  display: block;
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 5px;
}
.error {
  background-color: #FFE4E4;
  border: 1px solid #F6B9B9;
  color: #B94A48;
}
.warning {
  background-color: #FCF6D7;
  border: 1px solid #FED88F;
  color: #C09853;
}
.success {
  background-color: #DEF1D7;
  border: 1px solid #BFD3AF;
  color: #468847;
}
.success i {
  background-position: 0 -44px;
}
.warning i {
  background-position: 0 -70px;
}
.error i {
  background-position: 0 -16px;
}
.prompt em {
  font-style: normal;
  font: 14px/20px '宋体';
}

使用

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/prompt.beta.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="../js/prompt.min.js"></script>
        <script type="text/javascript">

            $(function () {

                $.prompt('命令未成功完成', 'warning', 5000);
                $.prompt('提交成功', 'success', 5000);
                $.prompt('提交失败', 'error', 5000);
            });


        </script>

    </head>
    <body>
        
    </body>
</html>

 

打包下载:下载

posted @ 2013-08-05 08:42  Aphex  阅读(805)  评论(0)  编辑  收藏  举报