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 相关文章推荐
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
js中关于Blob对象的介绍与使用
Nov 29 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和ACCESS写聊天室(一)
2006/10/09 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
对Python使用mfcc的两种方式详解
2019/01/09 Python
wxPython实现文本框基础组件
2019/11/18 Python
python 实现return返回多个值
2019/11/19 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
区域销售主管岗位职责
2014/06/15 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
活动总结格式
2014/08/30 职场文书
心得体会的写法
2014/09/05 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python