先看下效果

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:;

  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>

打包下载:下载

仿猪八戒一个提示(jQuery插件) v0.1 beta的更多相关文章

  1. 仿腾讯微博的一个弹出框 v0.1 beta

    仿腾讯微博的一个弹出框 v0.1 beta   代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...

  2. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  3. 一句代码美化你的下框之jquery.selectMM修复版（jquery.selectMM v0.9 beta 20141217)

    一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...

  4. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  5. 邮箱地址自动提示jQuery插件

    // mailAutoComplete.js v1.0 邮箱输入自动提示// 2010-06-18 v2.0 使用CSS class类代替CSS对象,同时增强代码可读性// 2010-06-18 v2 ...

  6. 发布一款仿天猫产品放大镜JQuery插件

    效果如下图: 1.原图 2.放大镜效果: 插件源码如下: /* * * JQUERY 简洁无极放大镜插件-zoomer * Author:盛世游侠 * QQ:418873053 * Date:2013 ...

  7. 如何制作一个类似jquery插件的vue插件

    vue拿来写插件,会不会太那啥? 请跟我念,"不会,符合业务需求才是你的老板最想要的." 如何封装一个可以全局调用的vue插件 其原理其实相当简单,通过new Vue(vueCom ...

  8. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  9. jquery插件artTxtCount输入字数限制,并提示剩余字数

    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

随机推荐

  1. 「Poetize7」足球比赛

    描述 Description SJZEZ和TSYZ正在进行一轮足球联谊赛,根据规则,这轮比赛有两场,一场在SJZEZ的主场进行,一场在TSYZ的主场进行.胜负判断标准如下:1.在两场比赛中进球总数较多 ...

  2. ssh日志记录

    上天查看了服务器安全日志,防火墙屏蔽了处理了一些暴力破解ssh密码的ip(其中一个ip地址为北京一家有名的CDN服务提供商),然后删除了所有的/var/log/secure* 日志文件.今天再来查看日 ...

  3. Power Strings - POJ 2406（求循环节）

    题目大意:叙述的比较高大上,其实就是一个字符串B = AAAAAAA,求出来这个A最短有多长   分析:注意如果这个串不是完全循环的,那么循环节就是就是它本身.   代码如下: #include< ...

  4. 图解向hadoop分布式文件系统写文件的工作流程

    网上看到一张关于hadoop分布式文件系统(hdfs)的工作原理的图片,其实主要是介绍了向hdfs写一个文件的流程.图中的流程已经非常清晰,直接上图 好吧,博客园告诉我少于200字的文章不允许发布到网 ...

  5. SVN安装图解

    SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...

  6. XCODE 代码行统计

    find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...

  7. OpenStack Cinder源代码流程简析

    版权声明:本博客欢迎转载,转载时请以超链接形式标明文章原始出处!谢谢! 博客地址:http://blog.csdn.net/i_chips 一.概况 OpenStack的各个模块都有对应的client ...

  8. innode 节点

    [root@localhost soft]# ls -i tt1 tt2 xx.c [root@localhost soft]# stat tt1 File: `tt1' Size: 4096 Blo ...

  9. vs2008试用期到期解决办法

    vs2008试用期结束之后,     在“控制面板”中启动“添加删除程序”,      选中Vs2008,点击“更改.删除”,      在出现的维护模式对话框中, 选择下一步,输入下面的CD-Key ...

  10. android anim 动画效果（转）

    动画效果编程基础--AnimationAndroid      动画类型      Android的animation由四种类型组成      XML中    alpha    渐变透明度动画效果   ...