先看下效果

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. 数学计数原理（Pólya）：POJ 1286 Necklace of Beads

    Necklace of Beads Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7763   Accepted: 3247 ...

  2. 数据结构（括号序列，线段树||点分治，堆）：ZJOI 2007 捉迷藏

    [题目描述] Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N- ...

  3. 【模拟】Codeforces 699B One Bomb

    题目链接: http://codeforces.com/problemset/problem/699/B 题目大意: N*M的图,*代表墙.代表空地.问能否在任意位置(可以是墙上)放一枚炸弹(能炸所在 ...

  4. 服务器之间免密码ssh登陆

    配置服务器f1(192.168.1.1)与服务器f2(192.168.1.2)之间免密码ssh登陆 一.首先,配置服务器主机名为f1.f2 1.更改/etc/sysconfig下的network文件, ...

  5. C字符数组及其应用

    1.字符数组和其他数值类型的数组的定义引用和初始化都是相同的. 特别注意的是: 在C语言中没有专门的字符串变量,通常用一个字符数组来存放一个字符串. \0'是由C编译系统自动加上的. 2. C语言允许 ...

  6. ACM第六周竞赛题目——A LightOJ 1317

    A - A Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Status P ...

  7. 数据结构——N皇后放置方法种数

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  8. Java中类的初始化

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.其中验证.准备.解析3个部分统称为连接.类加载的过程包括了加载.验证.准备.解 ...

  9. OS开发 touch事件的优先级和事件传递

    界面类的对象一般都是可以接触点击事件的,只不过有的默认接受,有的需要设定属性. userInteractionEnabled 属性设置为YES的时候就可以接受点击事件了 - (void)touches ...

  10. Android项目实战--手机卫士20--拿到已经安装了的程序以及程序管理主界面

    好了,之前我们就讲了高级工具里面的短信备份与还原,那么我们高级工具里面的功能就基本上完成的啦,还有一个叫程序锁的功能而已,但我们今天先不做它先,我们先把我们的程序管理这个功能完成先. 先让大家看一下我 ...