仿猪八戒一个提示(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:;
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的更多相关文章
- 仿腾讯微博的一个弹出框 v0.1 beta
仿腾讯微博的一个弹出框 v0.1 beta 代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- 一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217)
一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- 邮箱地址自动提示jQuery插件
// mailAutoComplete.js v1.0 邮箱输入自动提示// 2010-06-18 v2.0 使用CSS class类代替CSS对象,同时增强代码可读性// 2010-06-18 v2 ...
- 发布一款仿天猫产品放大镜JQuery插件
效果如下图: 1.原图 2.放大镜效果: 插件源码如下: /* * * JQUERY 简洁无极放大镜插件-zoomer * Author:盛世游侠 * QQ:418873053 * Date:2013 ...
- 如何制作一个类似jquery插件的vue插件
vue拿来写插件,会不会太那啥? 请跟我念,"不会,符合业务需求才是你的老板最想要的." 如何封装一个可以全局调用的vue插件 其原理其实相当简单,通过new Vue(vueCom ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- jquery插件artTxtCount输入字数限制,并提示剩余字数
工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
随机推荐
- 【JS】壹零零壹
function f1() { } var f2 = function() { } var O = {} O.f1 = f1 O.f2 = f2 console.log(O)
- 互联网组织的未来:剖析GitHub员工的任性之源
转自:http://www.php100.com/html/it/hulianwang/2015/0108/8304.html [导读] 本文为大家介绍了著名代码托管服务商GitHub的组织运转结构. ...
- 2013年6月19日星期三java中函数地址值传递
今天代码审核时确认了一个问题,理解了java中string和stringbuffer赋值问题,看到一个帖子很好,摘录如下: 理解这两个例子需要分清实参和形参的区别,引用和对象的区别 第一个例子的内部执 ...
- Contains Duplicate III —— LeetCode
Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...
- 开源库CImg 数据格式存储之二(RGB 顺序)
在上一篇博客中已经初步说明了GDI和CImg数据的存储格式感谢博友 Imageshop 评论说明 CImg的说明文档中已有详细说明(详见上篇博客说明) CImg的数据格式确实是RRRGGGBBB顺序存 ...
- C语言赋值运算符
赋值运算符: 分类: 简单赋值 int a ; a=10; 复合运算符 int a ; a+=4; 复合位运算符 int a; a&=1:
- B - Frogger
题目大意: 一个叫做弗雷迪的青蛙坐在湖中间的一块石头上.突然他注意到他的青蛙女神菲奥娜坐在另一块石头上面,于是他计划去看她,但是呢湖里面的水很脏并且充满了游客的防晒霜,所以他想避免游泳而采用跳跃的方式 ...
- Java同步工具类总结
先谈谈闭锁和栅栏的区别: 1.关键区别在于,所有线程必须同时到达栅栏位置,才能继续执行. 2.闭锁用于等待某一个事件的发生,举例:CountDownLatch中await方法等待计数器为零时,所有事件 ...
- motan源码分析九:开关
在前面的文章中,我们已经发现了开关的踪影,例如cluster,motan支持多个cluster,当前的cluster因为开关关闭的情况下,就会使用下一个cluster. 1.开关相关的类和接口主要都在 ...
- ASP.NET 防盗链的实现[HttpHandler]
本文转载:http://www.cnblogs.com/eflylab/archive/2008/06/16/1223373.html 有时我们需要防止其他网站直接引用我们系统中的图片,或下载文件链接 ...