关于Web开发上面UI布局的问题,我上次介绍了一个可以自动适应输入内容宽度的TextBox控件,它可以解决在布局时预留控件大小和用户数入内容多少上的矛盾。但是由于那个控件被限制了只能做为单行输入使用:(,在输入大块文本时就力不从心了,那么就再做一个可自动适应高度的TextBox。
原理和那个适应宽度的TextBox查不多,只是这个反而更加简单,因为在高度方向上增长不会破坏页面的整体布局效果(宽度上的如果在页内会挤走别的元素的),所以就不需要使用Agent TextBox来作为实际录入的容器了,直接把<TextArea>增高就行了。 响应onpropertychange事件,同步内容和<TextArea>的高度。当然如果完全根据内容增高可能也会因为内容太多而变得难看,就设置了一个最大高度限制属性。控件效果如下:
#region 附 AutoTextBox 控件源码
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; namespace WebExcel.UI.WebControls { /// <summary> /// Summary description for AutoLengthTextBox. /// </summary> [DefaultProperty("Text"), ToolboxData("<{0}:AutoTextArea runat=server></{0}:AutoTextArea>")] public class AutoTextArea : System.Web.UI.WebControls.TextBox { [DefaultValue(200)] public int MaxHeight { get { object obj = ViewState["MaxHeight"]; return obj == null ? 200 : (int)obj; } set { ViewState["MaxHeight"] = value; } } [DefaultValue(60)] public int MinHeight { get { object obj = ViewState["MinHeight"]; return obj == null ? 60 : (int)obj; } set { ViewState["MinHeight"] = value; } } protected override void OnPreRender(EventArgs e) { this.Attributes["minHeight"] = this.MinHeight.ToString(); if ( this.Height == Unit.Empty ) { this.Height = this.MinHeight; } else { this.Height = (int)Math.Max(this.MinHeight, this.Height.Value); } base.OnPreRender (e); } /// <summary> /// Render this control to the output parameter specified. /// </summary> /// <param name="output"> The HTML writer to write out to </param> protected override void Render(HtmlTextWriter output) { string strCode; if ( this.MaxHeight <= 0 ) { strCode = "this.style.height=Math.max(this.minHeight,this.scrollHeight)+(this.offsetHeight-this.clientHeight)"; } else { strCode = "this.style.height=(this.scrollHeight>200)?200:Math.max(this.minHeight,this.scrollHeight)+(this.offsetHeight-this.clientHeight)"; } base.Attributes["onpropertychange"] = strCode; // base.Attributes["onfocus"] = "this.height=this.height"; if ( base.Rows == 0 ) { base.Rows = 1; } base.TextMode = TextBoxMode.MultiLine; base.Render(output); } } } #endregion posted on 2004-12-29 00:49 birdshome 阅读(1947) 评论(10) 编辑 收藏 所属分类: Asp.net控件开发 |
|
来自: kommy > 《05.PL(呈现层)》