posts - 930,  comments - 588,  views - 402万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

       有没有厌倦了原来那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" />

主要方法有:

  1. jAlert(message, [title, callback]) 创建一个alert
  2. jConfirm(message, [title, callback]) 创建一个确认allert,支持callback
  3. 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效果图:

image

 

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


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

posted on   PetterLiu  阅读(26146)  评论(5编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示