仿猪八戒一个提示(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 ...
随机推荐
- 总结linux无线命令wpa
关于wpa_supplicant: 用到wpa_cli命令 wpa_cli -iwlan0 add_network // wlan0 是无线网络设备的名字,增加一个网络,会返回 ...
- Android吧数据保存成xml文件
public class MainActivity extends Activity { private List<Person> persons; @Override protected ...
- Java nextInt()函数
nextInt( int num) 能接受一个整数作为它所产生的随机整数的上限,下限为零,比如:nextInt(4)将产生0,1,2,3这4个数字中的任何一个数字,注意这里不是0-4,而是0-3..但 ...
- sl4j记录
- POI使用详解
Apache POI使用详解 1.POI结构与常用类 (1)POI介绍 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案 ...
- Python随机数与随机字符串详解
随机整数:>>>importrandom>>>random randint(0,99)21随机选取0到100间的偶数:>>>importrando ...
- mongoDb +Java+springboot
前言 :mongoDb 是一种比较常用的非关系数据库,文档数据库, 格式为json ,redis 有五种格式. 1. 项目中要使用,这里简单做个示例.首先是连接mongoDB,用的最多的robomon ...
- 小学生玩ACM----深搜
Square Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- Android 网络技术HTTP
1.XML3种解析方式(DOM.SAX.PULL) 在网络上传输数据时最常用的格式有两种,XML 和JSON 这里首先明白什么是SAX是一个用于处理XML事件驱动的"推"模型,优点 ...
- Project Euler:Problem 55 Lychrel numbers
If we take 47, reverse and add, 47 + 74 = 121, which is palindromic. Not all numbers produce palindr ...