编程 Javascript

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序

Apr 21 Javascript

javascript 日期时间函数(经典＋完善＋实用)

May 27 Javascript

firefo xml 读写实现js代码

Jun 11 Javascript

js函数名与form表单元素同名冲突的问题

Mar 07 Javascript

用js判断输入是否为中文的函数

Mar 10 Javascript

两种方法实现在HTML页面加载完毕后运行某个js

Jun 16 Javascript

javascript实现获取浏览器版本、操作系统类型

Jan 29 Javascript

AngularJS中使用ngModal模态框实例

May 27 Javascript

AngularJS实现表单验证功能详解

Oct 12 Javascript

JQuery中queue方法用法示例

Jan 31 jQuery

微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

May 05 Javascript

vue的三种图片引入方式代码实例

Nov 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