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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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中的日期及时间
2006/11/23 PHP
php 获取全局变量的代码
2011/04/21 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
numpy排序与集合运算用法示例
2017/12/15 Python
详解python3中tkinter知识点
2018/06/21 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python list转置和前后反转的例子
2019/08/26 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
keras:model.compile损失函数的用法
2020/07/01 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
知识改变命运演讲稿
2014/05/21 职场文书
销售类求职信
2014/06/13 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS