西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发javascript|JQuery → 利用jqueryUI做出来的提示框,方便后台弹出框提示使用。

利用jqueryUI做出来的提示框,方便后台弹出框提示使用。

相关软件相关文章发表评论 来源:本站原创时间:2010/2/21 23:45:02字体大小:A-A+

作者:不详点击:1389次评论:1次标签: jquery

  • 类型:编程辅助大小:109KB语言:中文 评分:5.0
  • 标签:
立即下载

全年在一个项目中,在弹出窗体上用了alert,效果不是很好。alert是浏览器级别的,一但弹出来,那整个浏览器都被封住,只有你点击了之后才能点击其他页面。有时候用了多标签的框架,感觉很是不方便。所以,萌生用模拟的DIV来代替alert。以下是我做的部分代码,模拟弹出窗体我搜索了很多,最后还是用了JQUERY UI,功能真的很强大。

  这个类每个WEB页面都要继承的,我把JUQERY的文件的路径也写在里面。

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 /// <summary>
7 ///JqueryBasicPage 的摘要说明
8 /// </summary>
9 public class JqueryBasicPage : System.Web.UI.Page
10 {
11 public string jQueryScriptBlock = @"<script type=""text/javascript"" src=""Script/jquery-1.3.2.min.js""></script>";
12 public string jqueryUI = @" <script src=""Script/jquery-ui-1.7.2.custom.min.js"" type=""text/javascript""></script>";
13 public JqueryBasicPage()
14 {
15 //
16 //TODO: 在此处添加构造函数逻辑
17 //
18
19 }
20
21 public string ShowMessageBox(string messageInfo)
22 {
23 string regScriptString = @"<script language=javascript>$(document).ready( function(e) { $('#simplemodal-container').modal(); } ) </script>";
24 this.ClientScript.RegisterClientScriptBlock(GetType(), "_error", regScriptString);
25 return messageInfo;
26 }
27
28
29 public string MessageBox(string message)
30 {
31 System.Text.StringBuilder strString = new System.Text.StringBuilder();
32 //先定义CSS样式
33 strString.Append("<style type='text/css'>");
34 strString.Append(" .demoHeaders { margin-top: 2em; } ");
35 strString.Append(" ul#icons {margin: 0; padding: 0;}");
36 strString.Append(" ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}");
37 strString.Append(" ul#icons span.ui-icon {float: left; margin: 0 4px;} ");
38 strString.Append(" </style> ");
39 //JS
40 strString.Append(" <script type='text/javascript'> ");
41 strString.Append(" $(function() { ");
42 // strString.Append(" $('#pMessage').append('" + message + "'); ");
43 strString.Append(" $('#dialog').dialog({ ");
44 strString.Append(" closeOnEscape: true, ");
45 strString.Append(" modal: true, ");
46 strString.Append(" autoOpen: true, ");
47 strString.Append(" width: 260, ");
48 strString.Append(" heigh:100,");
49 strString.Append(" buttons: { ");
50 strString.Append(" '确定': function() { ");
51 strString.Append(" $(this).dialog('close'); ");
52 strString.Append(" }");
53 //strString.Append(" '取消': function() { ");
54 //strString.Append(" $(this).dialog('close'); ");
55 //strString.Append(" } ");
56 //strString.Append(" '跳转': function() { ");
57 //strString.Append(" $(this).dialog('close'); ");
58 // strString.Append(" } ");
59 strString.Append(" } ");
60 strString.Append(" }); ");
61 strString.Append(" $('#dialog').dialog('false'); ");
62 strString.Append(" return false; ");
63 strString.Append(" $('#dialog_link, ul#icons li').hover( ");
64 strString.Append(" function() { $(this).addClass('ui-state-hover'); }, ");
65 strString.Append(" function() { $(this).removeClass('ui-state-hover'); } ");
66 strString.Append(" ); ");
67 strString.Append(" }); ");
68 strString.Append(" </script> ");
69 //弹出窗体
70 strString.Append(" <div id='dialog' title='提示'> ");
71 strString.Append(" <p id='dialgoMessage'>"+message+"</p>");
72 strString.Append(" </div> ");
73 this.ClientScript.RegisterClientScriptBlock(GetType(), "_error", strString.ToString());
74 return message;
75 }
76 public string MessageBox(string message, string redirectURL)
77 {
78 System.Text.StringBuilder strString = new System.Text.StringBuilder();
79 //先定义CSS样式
80 strString.Append("<style type='text/css'>");
81 strString.Append(" .demoHeaders { margin-top: 2em; } ");
82 strString.Append(" ul#icons {margin: 0; padding: 0;}");
83 strString.Append(" ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}");
84 strString.Append(" ul#icons span.ui-icon {float: left; margin: 0 4px;} ");
85 strString.Append(" </style> ");
86 //JS
87 strString.Append(" <script type='text/javascript'> ");
88 strString.Append(" $(function() { ");
89 // strString.Append(" $('#pMessage').append('" + message + "'); ");
90 strString.Append(" $('#dialog').dialog({ ");
91 strString.Append(" closeOnEscape: true, ");
92 strString.Append(" modal: true, ");
93 strString.Append(" autoOpen: true, ");
94 strString.Append(" width: 260, ");
95 strString.Append(" heigh:100, ");
96 strString.Append(" buttons: { ");
97 strString.Append(" '确定': function() { ");
98 strString.Append(" $(this).dialog('close'); ");
99 strString.Append(" }, ");
100 strString.Append(" '取消': function() { ");
101 strString.Append(" $(this).dialog('close'); ");
102 strString.Append(" }, ");
103 strString.Append(" '跳转': function() { ");
104 strString.Append(" window.location.href=\"" + redirectURL + "\"; ");
105 strString.Append(" } ");
106 strString.Append(" } ");
107 strString.Append(" }); ");
108 strString.Append(" $('#dialog').dialog('false'); ");
109 strString.Append(" return false; ");
110 strString.Append(" $('#dialog_link, ul#icons li').hover( ");
111 strString.Append(" function() { $(this).addClass('ui-state-hover'); }, ");
112 strString.Append(" function() { $(this).removeClass('ui-state-hover'); } ");
113 strString.Append(" ); ");
114 strString.Append(" }); ");
115 strString.Append(" </script> ");
116 //弹出窗体
117 strString.Append(" <div id='dialog' title='提示'> ");
118 strString.Append(" <p id='dialgoMessage'>" + message + "</p>");
119 strString.Append(" </div> ");
120 this.ClientScript.RegisterClientScriptBlock(GetType(), "_error", strString.ToString());
121 return message;
122 }
123 }
124

 

 

 

 

 

 

  WEB页面里,在你添加删除成功需要弹出对话框的时候,只要调用相应的方法就可以了。我这里也就麻烦点,封装了一下,第一次写博客,如有错误,请大家见谅!

  代码如下。请记得在页面引入 JQUERY 和JQUERY UI 的JS文件还有JQUERY UI 的CSS文件。


protected void LinkButton1_Click(object sender, EventArgs e)
{
MessageBox("小样,你真不厚道!");
//Response.Redirect("Default.aspx");
}

protected void Button1_Click(object sender, EventArgs e)
{
MessageBox("你好,请选择操作。点击跳转将跳转到谷歌主页面!", Request.Url.ToString());
}

    html编辑器
    (73)html编辑器
    我们做网页的时候最难找的就是编辑器,网上找一个吧,要不是图片上传错误,就是到处都是错误,垃圾太多.大家都需要一个简单,速度快的.西西为您提供最好用的编辑器一站式下载编辑器定义编辑器指的是一类编辑制作工具,可自定义窗囗,编辑主题索引,可选择添搜索页,无任何不自由。编辑器哪个好用小编个人比较喜欢使用和,这两款编辑器软件都有不错的表现。至于编辑器哪个好用,这就要根据你的个人需求去选择对应的编辑器啦...更多>>
    dreamweaver cs6
    (14)dreamweaver cs6
    新版本使用了自适应网格版面创建页面,在发布前使用多屏幕预览审阅设计,可大大提高工作效率。改善的性能,更高效地传输大型文件。实时视图和多屏幕预览面板可呈现代码,更能够检查自己的工作。曾经风靡一时的网页三剑客成员之一是目前应用最广的网页制作软件,原本是由公司所开发的著名网站开发工具,随被收购后,改名为。它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,以及在之后推出的针对专业网页图像设计的,三者...更多>>

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(1)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)