message自定义控件封装
前段时间在园子里看见http://zengxiangzhan.cnblogs.com写的message样式表,个人觉得蛮好看,我问博主要了一份,很热情,呵呵!实例如图所示:
下面看我例子的项目图示:
Control类库中自定义控件meaasge.cs代码如下
message.cs
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Text;
5 using System.Web.UI.WebControls;
6 using System.ComponentModel;
7 using System.Web.UI;
8
9 namespace wh.Control
10 {
11 [DefaultProperty("text")]
12 [ToolboxData("<{0}:message runat=server></{0}:message>")]
13 public class message : Literal
14 {
15 private msgIcos _msgIco = message.msgIcos.ok;
16 /// <summary>
17 /// 提示信息
18 /// </summary>
19 [Bindable(true)]
20 [Category("Appearance")]
21 [Localizable(true)]
22 public string msg
23 {
24 get
25 {
26 return ViewState["msg"] == null ? "设置你要显示的信息!" : ViewState["msg"].ToString();
27 }
28 set
29 {
30 ViewState["msg"] = value;
31 }
32 }
33 /// <summary>
34 /// 枚举ICO
35 /// </summary>
36 public enum msgIcos
37 {
38 /// <summary>
39 /// ok
40 /// </summary>
41 ok,
42 /// <summary>
43 /// error
44 /// </summary>
45 error,
46 /// <summary>
47 /// attention
48 /// </summary>
49 attention,
50 /// <summary>
51 /// tips
52 /// </summary>
53 tips,
54 /// <summary>
55 /// question
56 /// </summary>
57 question
58 }
59
60 [Bindable(true)]
61 [Category("Appearance")]
62 [Localizable(true)]
63 public msgIcos msgIco
64 {
65 get
66 {
67 return _msgIco;
68 }
69 set
70 {
71 _msgIco = value;
72 }
73 }
74
75 protected override void Render(HtmlTextWriter writer)
76 {
77 try
78 {
79 string html = "<div class=\"msg24\"><p class=\"" + msgIco + "\"> " + msg + " </p></div>";
80 this.Text = html;
81 }
82 catch { }
83 base.Render(writer);
84 }
85 }
86 }
css文件message.css如下所示:
message.css
1 .msg .error, .msg .stop, .msg .alert, .msg .attention, .msg .tips, .msg .ok, .msg .notice, .msg .question, .msg .help, .msg .small-help {color:#404040;background:url(../images/msg_bg.png) no-repeat;border:1px solid #ddd;float:left;line-height:18px;}
2 .msg .error {background-position:3px 3px;border-color:#ff8080;background-color:#fff2f2;}
3 .msg .attention {background-position:3px -147px;border-color:#40b3ff;background-color:#e5f5ff;}
4 .msg .tips {background-position:3px -197px;border-color:#ffcc7f;background-color:#ffffe5;}
5 .msg .ok {background-position:3px -247px;border-color:#4dbf00;background-color:#f0ffe5;}
6 .msg .question {background-position:3px -347px;border-color:#bfbfbf;background-color:#f2f2f2;}
7 .msg24{ padding-left:50px;}
8 .msg24 .error, .msg24 .attention, .msg24 .tips, .msg24 .ok, .msg24 .question {font-size:14px;font-weight:bold;color:#404040;background:url(../images/msg_bg.png) no-repeat;border:1px solid #ddd;padding:17px 10px 17px 56px;line-height:22px;width:450px;}
9 .msg24 .error {background-position:12px -388px;border-color:#ff8080;background-color:#fff2f2;}
10 .msg24 .attention {background-position:12px -488px;border-color:#40b3ff;background-color:#e5f5ff;}
11 .msg24 .tips {background-position:15px -888px;border-color:#ffcc7f;background-color:#ffffe5;}
12 .msg24 .ok {background-position:12px -988px;border-color:#4dbf00;background-color:#f0ffe5;}
13 .msg24 .question {background-position:12px -788px;border-color:#bfbfbf;background-color:#f2f2f2;}
14 .msg, .msg24{ *zoom:1;}
调用页面index.aspx如下所示:
index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<%@ Register Assembly="Control" Namespace="wh.Control" TagPrefix="cc1" %>
<!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 runat="server">
<title></title>
<link href="css/message.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:message ID="message2" runat="server"></cc1:message>
<cc1:message ID="message1" msgIco="error" msg="操作失败!请稍后再试!" runat="server"></cc1:message>
</div>
</form>
</body>
</html>
完成以上,自定义提示信息就实现了,index.aspx设计如下图所示:
运行效果图如下所示:
Literal继承这个控件而不继承Label,是因为如果用Label生成源代码会有<span></span>标签,自己可以去试试!
如有不对,欢迎拍砖,不要喷,谢谢!再次感谢http://zengxiangzhan.cnblogs.com博主的热情
忘记了背景图片,现在补上
版权所有,转载请注明出处!
一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!