站长论坛

标题: 如何封装JS和CSS文件为服务器端控件 [打印本页]
作者: abcdef133    时间: 2007-9-16 13:00
标题: 如何封装JS和CSS文件为服务器端控件
我们以封装一个JS的日期控件为列子，将它和服务器的TextBox结合在一起做成一个服务器控件，以达到直接托上去就可以使用的效果。其实很简单，大家共同学习。先看看效果图：




方法：
  首先：下载一个JS的日期组件，带封装。
  然后：建一个日期类文件CalendarBox.cs代码如下：
  1.   using System;
  2.   using System.Collections.Generic;
  3.   using System.ComponentModel;
  4.   using System.Text;
  5.   using System.Web;
  6.   using System.Drawing;
  7.   using System.Web.UI;
  8.   using System.Web.UI.WebControls;
  9.   using System.Web.UI.HtmlControls;
  10.    
  11.   [assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]
  12.    
  13.   namespace Wisesoft.Web.Control
  14.   {
  15.    [ToolboxBitmap(typeof(CalenderBox), "Wisesoft.Calendar.CalendarBox.ico")]
  16.    public class CalenderBox : TextBox
  17.    {
  18.    protected override void OnPreRender(EventArgs e)
  19.    {
  20.    string calendar = CalenderCSS.CSS;
  21.    calendar = calendar.Replace("$ImaginURL$", this.ImaginURL);
  22.    if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar"))
  23.    Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar);
  24.    
  25.    this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
  26.    this.CssClass = "Wdate";
  27.    this.Attributes.Add("onfocus","setday(this)");
  28.    this.Attributes.Add("onchange", "checkDate(this.value)");
  29.    base.OnPreRender(e);
  30.    }
  31.    
  32.    void Page_PreRenderComplete(object sender, EventArgs e)
  33.    {
  34.    Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js");
  35.    }
  36.    
  37.    /**////  
  38.    /// 弹出日期控件小图片的地址
  39.    ///  
  40.    [Bindable(true)]
  41.    [Category("图标设置")]
  42.    [DefaultValue("imagin/calender.gif")]
  43.    [Localizable(true)]
  44.    public string ImaginURL
  45.    {
  46.    get
  47.    {
  48.    String s = (String)ViewState["ImaginURL"];
  49.    return ((s == null) ? "imagin/calender.gif" : s);
  50.    }
  51.    set
  52.    {
  53.    ViewState["ImaginURL"] = value;
  54.    }
  55.    }
  56.    
  57.    /**////  
  58.    /// 设置日期，时间的初始格式。
  59.    ///  
  60.    [Bindable(true)]
  61.    [Category("初始化设置")]
  62.    [DefaultValue(false)]
  63.    [Localizable(true)]
  64.    public bool ShowTime
  65.    {
  66.    get
  67.    {
  68.    bool s = (bool)ViewState["ShowTime"];
  69.    if (ViewState["ShowTime"] != null)
  70.    {
  71.    return s;
  72.    }
  73.    return false;
  74.    }
  75.    set
  76.    {
  77.    ViewState["ShowTime"] = value;
  78.    }
  79.    }
  80.    
  81.    
  82.    /**////  
  83.    /// 注样式文件
  84.    ///  
  85.    ///  
  86.    private void RegisterCssFile(string path)
  87.    {
  88.    HtmlLink link1 = new HtmlLink();
  89.    link1.Attributes["type"] = "text/css";
  90.    link1.Attributes["rel"] = "stylesheet";
  91.    link1.Attributes["href"] = path;
  92.    this.Page.Header.Controls.Add(link1);
  93.    }
  94.    }
  95.   }  
复制代码




欢迎光临 站长论坛 (http://tzlink.com/bbs/) Powered by Discuz! X3.2