JQuery的Alert插件介绍

有没有厌倦了原来那alert那个风格，总是一个感叹号。有时使得UE不好，今天我们介绍使用Jquery Alert插件，使用它可以用来替换JScript中的alert,confirm,prompt
下载JS文件引用到page中，如下代码：

   1:  <!-- Dependencies -->

   2:  <script src="/path/to/jquery.js" type="text/javascript"></script>

   3:  <script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>

   4:  <!-- Core files -->

   5:  <script src="/path/to/jquery.alerts.js" type="text/javascript"></script>

   6:  <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:

   1:  <%@  Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs" Inherits="WebApplication6.Defualt" %>

   2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head id="Head1" runat="server">

   5:      <title></title>

   6:      <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

   7:      <script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

   8:      <script src="Scripts/jquery.alerts.js" type="text/javascript"></script>

   9:      <link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

  10:      <script type="text/javascript">

  11:          $(document).ready(function () {

  12:              $("#btnAlert").click(function ()

  13:              { jAlert('Pushed the alert button', 'Alert Dialog'); });

  14:              $("#btnPrompt").click(function () {

  15:                  jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {

  16:                      if (typedValue) {

  17:                          jAlert('You typed the following ' + typedValue);

  18:                      }

  19:                  });

  20:              });

  21:          });

  22:           </script>

  23:  </head>

  24:  <body>

  25:      <form id="form1" runat="server">

  26:      <div>

  27:          <input type="button" value="Alert Me" id="btnAlert" />

  28:          <input type="button" value="Prompt Me" id="btnPrompt" />

  29:      </div>

  30:      </form>

  31:  </body>

  32:  </html>

最后alert效果图：

更多示例，希望篇POST对您有帮助!

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。

JQuery的Alert插件介绍相关推荐

介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
JQuery Easing.js插件
jQuery Easing.js 插件介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
jQuery.Form插件介绍
一.前言 jQuery From插件是一个优秀的Ajax表单插件,使用它可以让你非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery From有两个主要方法:ajaxForm和ajaxSu ...
表单验证插件jQuery Validation Engine使用介绍
jQuery Validation Engine是一款非常好用的表单验证工具,对常见的验证如:非空.长度.数字验证等,都有非常好的支持.详细可参考:http://code.ciaoca.com/jqu ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
利用jquery的imgAreaSelect插件实现图片裁剪示例
将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录...
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
jquery中live_14个jQuery Live Search插件
jquery中live 实时搜索是一种增强的搜索表单,它使用AJAX技术在同一视图内提供结果或建议. 这与常规HTML输入字段不同,常规HTML输入字段从现代浏览器(例如Chrome,Firefox或 ...

JQuery的Alert插件介绍

JQuery的Alert插件介绍相关推荐

最新文章

热门文章