先看下效果

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. UVA 796 Critical Links(无向图求桥)

    题目大意:给你一个网络要求这里面的桥. 输入数据: n 个点 点的编号  (与这个点相连的点的个数m)  依次是m个点的   输入到文件结束. 桥输出的时候需要排序   知识汇总: 桥:   无向连通 ...

  2. 【转】Android低功耗蓝牙应用开发获取的服务UUID

    原文网址:http://blog.csdn.net/zhangjs0322/article/details/39048939 Android低功耗蓝牙应用程序开始时获取到的蓝牙血压计所有服务的UUID ...

  3. 【转】【Android】使用BaseAdapter实现复杂的ListView

    原文网址:http://blog.csdn.net/jueblog/article/details/11857281 使用BaseAdapter实现复杂的ListView的步骤: 1. 数据你要准备好 ...

  4. IOI 2009：Mecho

    IOI2009 Mecho Time Limit: 10000ms Memory Limit: 262144KB This problem will be judged on SPOJ. Origin ...

  5. Course Schedule ——LeetCode

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  6. centos升级openssh的两种方式

    此文介绍的是服务器在有网络和无网络情况下升级openssh方式. 一.首先介绍一个无网络如何升级: 1.准备相关的包 openssh下载地址:  http://mirror.internode.on. ...

  7. enigma机的原理

    注:本文修改自三思科学<ENIGMA的兴亡>            ENIGMA ENIGMA看起来是一个装满了复杂而精致的元件的盒子.不过要是我们把它打开来,就可以看到它可以被分解成相当 ...

  8. lightoj 1407 2-sat

    这题的英语either...or....很蛋疼: m中,1:x与y至少一个出席:2:x出席,y随便,x不出席,y也不出席----这有个坑,可以推出y出席x也一定出席(这个关系必须要连上):3x与y至少 ...

  9. Substrings - HDU 1238（最大共同子串）

    题目大意:给你N个串,求出来他们的最大公共子串的长度(子串反过来也算他们的子串).   分析:很久以前就做过这道题,当时是用的strstr做的,不过相同的都是枚举了子串......还是很暴力,希望下次 ...

  10. Monkeyrunner入门示例

    准备工作1.安装Android SDK2.熟悉MonkeyRunner的API(http://article.yeeyan.org/view/37503/164523)3.一部Android手机或模拟 ...