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中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JS继承用法实例分析
Feb 05 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
JS实现小星星特效
Dec 24 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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常量define和const的区别详解
2019/05/18 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
jQuery中change事件用法实例
2014/12/26 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python中http请求方法库汇总
2016/01/06 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python 接收处理外带的参数方法
2018/12/03 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
中职生自荐信
2013/10/13 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
家庭贫困证明
2015/06/16 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
SQL Server表分区删除详情
2021/10/16 SQL Server