• 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博主的热情

    忘记了背景图片,现在补上

    源码地址,点击下载

    版权所有,转载请注明出处!

    一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!

  • 相关阅读:
    FastAPI数据库系列(一) MySQL数据库操作
    FastAPI响应系列(二) 响应状态码
    FastAPI系列学习目录
    FastAPI大型目录程序设计
    FastAPI异步任务系列(一) FastAPI后台任务
    FastAPI安全系列(三) 基于Hash Password和JWT Bearer Token的OAuth2 .0认证
    FastAPI安全系列(二) 基于Password和Bearer Token的OAuth2 .0认证
    FastAPI安全系列(一) OAuth2 .0认证基础
    you can run: npm install --save core-js/modules/es.regexp.exec core-js/modules/es.string.replace(已解决)
    BFC总结
  • 原文地址:https://www.cnblogs.com/cmsdn/p/2196828.html
Copyright © 2020-2023  润新知