JQuery的Alert消息框插件使用介绍


Posted in Javascript onOctober 09, 2010

下载JS文件引用到page中,如下代码:

<!-- Dependencies --> 
<script src="/path/to/jquery.js" type="text/javascript"></script> 
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script> 
<!-- Core files --> 
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script> 
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

注意其中draggable是用来实现拖拉的,如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script> 
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

主要方法有:
jAlert(message, [title, callback]) 创建一个alert
jConfirm(message, [title, callback]) 创建一个确认allert,支持callback
jPrompt(message, [value, title, callback]) 创建一个提示框让用户输入值,支持callback如果你有提供
可以参下面的示例Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs" Inherits="WebApplication6.Defualt" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script> 
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btnAlert").click(function () 
{ jAlert('Pushed the alert button', 'Alert Dialog'); }); 
$("#btnPrompt").click(function () { 
jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) { 
if (typedValue) { 
jAlert('You typed the following ' + typedValue); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" value="Alert Me" id="btnAlert" /> 
<input type="button" value="Prompt Me" id="btnPrompt" /> 
</div> 
</form> 
</body> 
</html>

最后alert效果图:
JQuery的Alert消息框插件使用介绍 
打包下载地址 https://3water.com/jiaoben/32367.html
Javascript 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
Tips 带三角可关闭的文字提示
Oct 06 #Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 #Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 #Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 #Javascript
jquery选择器(常用选择器说明)
Sep 28 #Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
You might like
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
利用php生成验证码
2017/02/23 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python与R语言的简要对比
2017/11/14 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python支付宝支付示例详解
2019/08/22 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
教师年度考核评语
2014/04/28 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
支教个人总结
2015/03/04 职场文书
司机岗位职责范本
2015/04/10 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python