然后：建一个日期类文件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>
/// 弹出日期控件小图片的地址
/// </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 link1 = new HtmlLink()
link1.Attributes["type"] = "text/css"
link1.Attributes["rel"] = "stylesheet"
link1.Attributes["href"] = path
this.Page.Header.Controls.Add(link1)
}
}
}
注意：[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 link1 = new HtmlLink()
link1.Attributes["type"] = "text/css"
link1.Attributes["rel"] = "stylesheet"
link1.Attributes["href"] = path
this.Page.Header.Controls.Add(link1)
}
它就是用来注册你的CSS文件的，大家都知道在我们的页面代码里面是<link href="StyleSheet.css" 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:#999 1px solid
height:18px
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类）。
好了，基本上就可以使用了。
用了一段时间的quasar了，它里面封装的 css 类确实很好用，但是在帮助文档中，描述得零零散散，不方便使用，遂总结一下。
text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]
text-weight-[ thin, light, regular, medium, bold, bolder ]
text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]
text-[颜色名称]：text-teal
primary（淡蓝），secondary（淡绿），accent（淡紫），dark（黑色），positive（深绿），negative（红色），Info（亮蓝），warning（黄色）
每种颜色由浅到深分为 1-14 级
red, pink, purple, deep-purple, indigo（靛蓝）, blue, light-blue, cyan, teal（青色）, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey
在应用程序的 *.vue 文件中，可以使用 $primary ， $red-1 等颜色。
|
|
|
|
|
|
子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。
可用值有： self-start , self-center , self-baseline , self-end , self-stretch
与 flex 值使用类似
Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例：
|
|
在上面的例子中，由于8/12 = 2/3 = 66％，col-8占据了行宽的三分之二（2/3），而col-2占据了六分之一（2/12 = 1 / 6〜16.67％）。
CSS辅助类 col-auto 使单元格只填充需要渲染的空间。 另一方面， col 试图填充所有可用的空间，同时如果需要也可以缩小。
CSS辅助类 col-grow 使单元格至少填充需要渲染的空间，并有可能在有更多空间可用时增长。
CSS辅助类 col-shrink 使单元格最多填充需要呈现的空间，并且当没有足够的可用空间时有可能收缩。
您可以使用 order-first 和 order-last CSS辅助类来设置子元素的顺序 。
默认情况下，Flex项按源(source)顺序排列。 但是，order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度，请使用 order CSS属性并分配所需的值。
例子：
|
|
以下是CSS order 属性的工作原理：
<style>function ck(){
$("#dv").css("color","red")
//获取到对象 设置对象css中的属性color 属性值为red 也就是下面style中的属性
$("#dv").css("fontSize","30px")
//设置对象的字体大小为 30 px
//以上是设置div对象的css样式属性 如果是div的直接属性 比如class innerHTML等等
//可以直接修改 如:
$("#dv").html() //获取div两标间之间的内容
$("#dv").html("") //带参数就表示设置内容
//这样的 很多建议你看看文档
// 扣群③②〇⑦④⑧⑤⑨① 中有文档下载 技术交流
}
</style>
<div id="dv" style="color:green"></div>
