如何封装JS和CSS文件为服务器端控件

我们以封装一个JS的日期控件为列子 将它和服务器的TextBox结合在一起做成一个服务器控件 以达到直接托上去就可以使用的效果 其实很简单 大家共同学习 先看看效果图

方法   首先 下载一个JS的日期组件 带封装   然后 建一个日期类文件CalendarBox cs代码如下

  using System;   using System Collections Generic;   using System ComponentModel;   using System Text;   using System Web;   using System Drawing;   using System Web UI;   using System Web UI WebControls;   using System Web UI HtmlControls;      [assembly: WebResource( Wisesoft Web Control Wisesoft Calendar calendar js application/x javascript PerformSubstitution=true)]      namespace Wisesoft Web Control   {    [ToolboxBitmap(typeof(CalenderBox) Wisesoft Calendar CalendarBox ico )]    public class CalenderBox : TextBox    {    protected override void OnPreRender(EventArgs e)    {    string calendar = CalenderCSS CSS;    calendar = calendar Replace( $ImaginURL$ this ImaginURL);    if (!Page ClientScript IsClientScriptBlockRegistered( _calendar ))    Page ClientScript RegisterClientScriptBlock(typeof(string) _calendar calendar);       this Page PreRenderComplete += new EventHandler(Page_PreRenderComplete);    this CssClass = Wdate ;    this Attributes Add( onfocus setday(this) );    this Attributes Add( onchange checkDate(this value) );    base OnPreRender(e);    }       void Page_PreRenderComplete(object sender EventArgs e)    {    Page ClientScript RegisterClientScriptResource(this GetType() Wisesoft Web Control Wisesoft Calendar calendar js );    }       ///// <summary>    /// d出日期控件小的地址    /// </summary>    [Bindable(true)]    [Category( 图标设置 )]    [DefaultValue( imagin/calender gif )]    [Localizable(true)]    public string ImaginURL    {    get    {    String s = (String)ViewState[ ImaginURL ];    return ((s == null) imagin/calender gif : s);    }    set    {    ViewState[ ImaginURL ] = value;    }    }       ///// <summary>    /// 设置日期 时间的初始格式    /// </summary>    [Bindable(true)]    [Category( 初始化设置 )]    [DefaultValue(false)]    [Localizable(true)]    public bool ShowTime    {    get    {    bool s = (bool)ViewState[ ShowTime ];    if (ViewState[ ShowTime ] != null)    {    return s;    }    return false;    }    set    {    ViewState[ ShowTime ] = value;    }    }          ///// <summary>    /// 注样式文件    /// </summary>    /// <param name= path ></param>    private void RegisterCssFile(string path)    {    HtmlLink link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );    }    }   } 

注意 [assembly: WebResource( Wisesoft Web Control Wisesoft Calendar calendar js application/x javascript PerformSubstitution=true)]是用来封装你的JS文件 要使用你项目的名字加上你JS文件的名字 还需要将你的JS文件做一点设置 点右件 选择属性 >然后选择高级 选择生成 *** 作 >选择嵌入的资源 这样才能将JS文件封装进去 当然如果有或者是CSS文件也是一样的   再看

void Page_PreRenderComplete(object sender EventArgs e)    {    Page ClientScript RegisterClientScriptResource(this GetType() Wisesoft Web Control Wisesoft Calendar calendar js );    }  

是在页面呈现之前将你的JS文件注册到页面上    [Bindable(true)]    [Category( 图标设置 )]    [DefaultValue( imagin/calender gif )]    [Localizable(true)]   是利用反射的元数据信息 来设置属性 就是给你的日期控件旁边加上个小图标 把它做成一个属性 可以让程序员自定义设置 也可以把它继承进去   好了 这样就可以把JS文件封装好了 再来看看CSS文件如何封装并写入客户端   我们可以看见下面有一个方法

   ///// <summary>    /// 注样式文件    /// </summary>    /// <param name= path ></param>    private void RegisterCssFile(string path)    {    HtmlLink link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );    } 

它就是用来注册你的CSS文件的 大家都知道在我们的页面代码里面是<link rel= stylesheet type= text/css />引入外部样式文件 这个方法就是达到这个目的 那么我们现在还没有样式文件   因此我们就必须建立一个CSS 然后把它设置一下（和JS的设置方式一样） 再到void Page_PreRenderComplete(object sender EventArgs e)方法调用就可以了 但是还有其他方法 我们来介绍第二种（对JS文件也可以这样使用） 建立一个CalendarCSS cs文件 代码如下

  using System;   using System Collections Generic;   using System Text;      namespace Wisesoft Web Control   {    public class CalenderCSS    {    public static string CSS = @ <style type= text/css >    Wdate{    border:# px solid;    height: px;    background:url($ImaginURL$) no repeat right;    }    WdateFmtErr{    font weight:bold;    color:red;    }    </style> ;    }   } 

这个类其实是将我们的CSS文件 写为一个字符串形式 然后供主函数调用 以注册到客户端使用   那么我们再看看CalendarBox cs文件里的这段代码

  string calendar = CalenderCSS CSS;    calendar = calendar Replace( $ImaginURL$ this ImaginURL);    if (!Page ClientScript IsClientScriptBlockRegistered( _calendar ))    Page ClientScript RegisterClientScriptBlock(typeof(string) _calendar calendar);     它就是将我们已经写好的一段字符串以快的形式注册到客户端（当然还有更多的注册方式 可以在MSDN看看ClientScript类）   好了 基本上就可以使用了 编译一下呢？

lishixinzhi/Article/program/net/201311/13968

为什么使用css服务器端字体
a) Serif字体系列的字体成比例，而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。上下短线是每个字符笔划末端的装饰，比如大写A两条腿底部的短线。Serif字体系列包括Times、Georgia和NewCentury Schoolbook。

flask的静态文件是位于应用的 /static 中的

你可以直接在html 模板中引用该路径，如下：

<link href="/static/css/democss" rel="stylesheet" type="text/css" />

url_for 构造路径

当然，也可使用 url_for 构造，代码如  url_for("static",filename="css/democss")

更改上述代码及模板文件，再次运行并查看

大的是完整版可以联网小的不行 CS起源 有的打不开用迅雷新建个普通任务把下载链接复制到地址栏里就能下了 这是最新的 >

CSS加载服务器上的字体太慢是设置错误造成的，解决方法为：

1、新建文件创建p标签，设置字体加粗。

2、设置字体大小。

3、设置使用什么字体。

4、设置下划线如下图所示。

5、附上代码<body><style>p{line-height:40px;}p1{font-weight:bold;}p2{font-size:36px;}p3{ font-family:"微软雅黑"}p4{font-style:italic;}p5{text-decoration:underline;}</style><p class="p1">你好</p><p class="p2">你好</p><p class="p3">你好</p><p class="p4">你好</p><p class="p5">你好</p><p>你好</p></body>。

---