[原创]FineUI秘密花园(六) — 表单控件_hong2511的博客-程序员宅基地

技术标签: 控件  原创  表单  

原文地址为: [原创]FineUI秘密花园(六) — 表单控件

FineUI中有哪些常用的表单控件,它们有什么共同点和不同点,这一篇文章我们会详细解说。

 

表单控件的公共属性

所有的表单都具有如下属性:

  1. ShowLabel:是否显示标签(默认值:true)。
  2. ShowEmptyLabel:是否显示空白的标签(默认值:false)。
  3. Label:标签文本(默认值:"")。
  4. LabelSeparator:表单中字段与标签的分隔符,可以通过Web.config、PageManager、Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数)。
  5. ShowRedStar:在标签后面显示红色的星号(用来标识必填项),一般与Required等表单验证属性配合使用。
  6. Readonly:表单控件的只读状态(默认值:false)。
  7. TabIndex:Tab按键的跳转顺序,一般不需要设置此属性,页面会根据控件的出现顺序自动决定Tab按键的跳转顺序(默认值:null)。
  8. OffsetRight:距离右侧边界的宽度,可以通过Web.config、PageManager、Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数)。
  9. ToolTip:提示文本(默认值:"")。
  10. ToolTipTitle:提示文本的标题(默认值:"")。
  11. ToolTipAutoHide:是否自动隐藏提示信息(默认值:true)。

注意:很多属性只有在表单内才有意义,比如ShowLabel、Label、OffsetRight等属性。在表单外放置的表单控件是不显示标签的。

 

 

还有一些属性是特定表单控件才具有的,如下所示:

  1. Text:显示文本。
  2. EmptyText:文本框为空时显示的文本(只对文本输入框、日期选择器等少数几个控件有效)。
  3. AutoPostBack:是否自动回发(只对下拉列表、日期选择器、文本输入框等少数几个控件有效)。
  4. EncodeText:是否对文本进行编码(只对文本标签、超链接、链接按钮等少数几个控件有效)。

 

除此之外,有些表单控件公共分享了很多表单验证属性。下一篇文章我们会详细介绍表单验证相关的属性。

 

下面我们会把部分表单控件所特有的一些属性通过示例进行集中展示。

 

自动编码文本

默认情况下,Label的EncodeText属性为true,会对文本中的HTML进行编码。当然我们也可以设置EncodeText=false,从而将HTML片段赋值给Text属性,请看这个示例:

   1:  <ext:Label Text="普通的 Label 标签会自动编码字符串比如:<strong></strong>)" runat="server">
   2:  </ext:Label>
   3:  <br />
   4:  <ext:Label EncodeText="false" Text="<a href='http://www.ustc.edu.cn/' target='_blank'>中国科学技术大学</a>"
   5:      runat="server">
   6:  </ext:Label>
   7:  <br />
   8:  <ext:Label EncodeText="false" Text="<span style='color:red;font-weight:bold;'>修改文本的样式</span>"
   9:      runat="server">
  10:  </ext:Label>

页面显示效果如下所示:

image

 

 

自动回发的文本输入框

如何在文本输入框失去焦点时自动回发页面呢,下面的几行代码可以简单地实现这个功能?

<ext:TextBox runat="server" ID="TextBox1" EmptyText="文本框值改变则自动回发" Width="200" AutoPostBack="true"
OnTextChanged="TextBox1_TextChanged">
</ext:TextBox>

 

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
labResult.Text = "文本框的值:" + TextBox1.Text;
}

 

富文本编辑器

FineUI内置了一个富文本编辑器,对于HTML编辑要求不高的情况下,完全可以使用内置的HtmlEditor,这样不仅样式风格统一,而且编码非常方便。

image

 

有很多属性来控制HtmlEditor的显示,几乎覆盖了工具栏的每一项,如下所示:

  1. EnableAlignments:启用左右定位。
  2. EnableColors:启用颜色。
  3. EnableFont:启用字体。
  4. EnableFontSize:启用调整字体大小。
  5. EnableFormat:启用格式化。
  6. EnableLinks:启用创建链接。
  7. EnableLists:启用创建列表。
  8. EnableSourceEdit:启用源码视图。
  9. FontFamilies:字体列表。
  10. EnableChineseFont:启用中文字体。

上面所有属性的默认值都是true,其中特别需要提到的是EnableChineseFont,因为默认的字体都是英文的,而在国内环境中中文字体是必不可少了,所以FineUI就把一些常见的中文字体配置到了富文本编辑器中。

image

 

 

有两个触发按钮的搜索框

这也是Web开发中的一个常见需求,一个用来搜索的文本输入框,当用户输入关键字并点击搜索按钮时,显示一个清空关键词的按钮。这个需求也被内置到了FineUI中,这就是TwinTriggerBox,请看下面这个示例:

   1:  <ext:TwinTriggerBox ID="ttbxMyBox2" OnTrigger1Click="ttbxMyBox2_Trigger1Click" OnTrigger2Click="ttbxMyBox2_Trigger2Click"
   2:          Trigger1Icon="Clear" ShowTrigger1="False" EmptyText="搜索用户名" Trigger2Icon="Search"
   3:          runat="server">
   4:  </ext:TwinTriggerBox>
 
   1:  protected void ttbxMyBox2_Trigger2Click(object sender, EventArgs e)
   2:  {
   
   3:      if (!String.IsNullOrEmpty(ttbxMyBox2.Text))
   4:      {
   
   5:          // 执行搜索动作
   6:          Alert.ShowInTop(String.Format("在关键词“{0}”中搜索", ttbxMyBox2.Text));
   7:   
   8:          ttbxMyBox2.ShowTrigger1 = true;
   9:      }
  10:      else
  11:      {
   
  12:          Alert.ShowInTop("请输入你要搜索的关键词!");
  13:      }
  14:  }
  15:   
  16:  // 点击 TwinTriggerBox 的取消按钮
  17:  protected void ttbxMyBox2_Trigger1Click(object sender, EventArgs e)
  18:  {
   
  19:      // 执行清空动作
  20:      Alert.ShowInTop("取消搜索!");
  21:   
  22:      ttbxMyBox2.Text = "";
  23:      ttbxMyBox2.ShowTrigger1 = false;
  24:  }

TwinTriggerBox有很多用来控制显示隐藏触发按钮的属性,不过仅从它们的名字就能猜出功能,这也是FineUI简单的原因之一。

 

显示效果如下图所示:

image

image

 

 

日期选择器

DatePicker也是Web开发中必不可少的一个控件,先来看下显示效果:

image

 

它的一些属性值得我们关注:

  1. SelectedDate:选择的日期。
  2. DateFormatString:日期格式字符串(默认值:"yyyy-MM-dd")。
  3. MaxDate:最大日期,大于此日期的以灰色显示,不可选择。
  4. MinDate:最小日期,小于此日期的以灰色显示,不可选择

注意:DateFormatString遵守DotNet默认的规则,简单概括如下:

    d 月中的某一天。一位数的日期没有前导零。
    dd 月中的某一天。一位数的日期有一个前导零。
    ddd 周中某天的缩写名称,在 AbbreviatedDayNames 中定义。
    dddd 周中某天的完整名称,在 DayNames 中定义。
    M 月份数字。一位数的月份没有前导零。
    MM 月份数字。一位数的月份有一个前导零。
    MMM 月份的缩写名称,在 AbbreviatedMonthNames 中定义。
    MMMM 月份的完整名称,在 MonthNames 中定义。
    y 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示不具有前导零的年份。
    yy 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示具有前导零的年份。
    yyyy 包括纪元的四位数的年份。

 

单选框列表与复选框列表

首先来看看各自的显示效果:

image

image

这两个控件不仅支持标签声明式的创建方式,如下所示:

   1:  <ext:RadioButtonList ID="RadioButtonList1" Label="列表一" runat="server">
   2:      <ext:RadioItem Text="可选项 1" Value="value1" />
   3:      <ext:RadioItem Text="可选项 2" Value="value2" />
   4:      <ext:RadioItem Text="可选项 3" Value="value3" Selected="true" />
   5:  </ext:RadioButtonList>

而且支持数据绑定的创建方式,如下所示:

   1:  <ext:RadioButtonList ID="RadioButtonList2" Label="列表二(一列)" ColumnNumber="1" runat="server">
   2:  </ext:RadioButtonList>
   1:  private void BindRadioButtonList()
   2:  {
   
   3:      List<TestClass> myList = new List<TestClass>();
   4:      myList.Add(new TestClass("1", "数据绑定值 1"));
   5:      myList.Add(new TestClass("2", "数据绑定值 2"));
   6:      myList.Add(new TestClass("3", "数据绑定值 3"));
   7:      myList.Add(new TestClass("4", "数据绑定值 4"));
   8:   
   9:      RadioButtonList2.DataTextField = "Name";
  10:      RadioButtonList2.DataValueField = "Id";
  11:      RadioButtonList2.DataSource = myList;
  12:      RadioButtonList2.DataBind();
  13:   
  14:      RadioButtonList2.SelectedValue = "3";
  15:  }

 

除此之外,它们还支持必选项验证、自动回发、多列显示、竖排显示等特性,因此下面这些属性也需要我们关注:

  1. Required:是否必填项。
  2. RequiredMessage:为空时提示信息。
  3. AutoPostBack:是否自动回发。
  4. ColumnNumber:渲染成几列。
  5. ColumnVertical:是否按照纵向顺序渲染。
  6. DataTextField:是否按照纵向顺序渲染。
  7. DataTextFormatString:显示文本的格式化字符串。
  8. DataValueField:显示值的数据字段。
  9. DataSource:数据源。
  10. SelectedIndex/SelectedValue/SelectedItem:选中项(适用于RadioButtonList)。
  11. SelectedIndexArray/SelectedValueArray/SelectedItemArray:选中项列表(适用于CheckBoxList)。

 

小结

除了上文提到的这些表单控件,还有一些其他表单控件,比如单选框、复选框、超链接、图片、链接按钮、隐藏字段、多行文本输入框、单触发器输入框,它们相对比较简单而无需过多的描述。

还有两个比较比较重要的表单控件——文件上传和下拉列表,我们会在接下来的两篇文章中详细描述。

 

注:《FineUI秘密花园》系列文章由三生石上原创,博客园首发,转载请注明出处。文章目录 官方论坛


转载请注明本文地址: [原创]FineUI秘密花园(六) — 表单控件
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hong2511/article/details/82821351

智能推荐

ACPI的设计与实现 - ACPI实现细节(1)_cuijianzhongswust的博客-程序员宅基地

ACPI实现细节一、Configuration       定义了用于配置设备和给设备分配资源的热插拔对象,以及跟踪设备插入拔出的对象。同时也定义了兼容ACPI资源描述符的格式。二、Power and Performance Management      定

SAP预留(Reservation)详解_ChampaignWolf的博客-程序员宅基地_sap 预留单

相信使用SAP的话,对SAP的SAP预留(Reservation)已经有所了解,而且经常使用作业的,并且在很多方案中都使用得到,下面我就简单总结下我所了解的SAP预留(Reservation),希望对一些需要帮助的人,有所指点。首先看下,它的概念:预留是对未来发货的一个计划,它包括了数量,还有发货时的移动类型,这样在发货时可以参照。另外,预留还可以在运行物料需求计划时触发需求预留的目的是为了使未来...

数据库应用(Mysql)---实验3--测验基础查询_Agoni^_^的博客-程序员宅基地

1.功能描述:查询成绩表中的所有记录。select *from cjb2.功能描述:查询学生表中的所有记录,并按照入学成绩降序排列。select *from xsxxborder by rxcj desc3.功能描述:查询班级表中的所有记录,并按照院系名称升序、专业名称降序、班级名称升序排列。select *from bjxxborder by xymc asc,zymc desc,bjmc asc4.功能描述:查询班级表中的所有班级名称和专业名称。select bjmc,zy

vue项目使用.env文件配置全局环境变量_JEECG官方博客的博客-程序员宅基地

关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件===============================================================关于文件内容:注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX.env:.env.d..

linux网络套接口编程基础_haida_liudan的博客-程序员宅基地

1.主要的头文件:1):sys/types.h 基本系统数据类型,是Unix/Linux系统的基本系统数据类型的头文件,含有size_t,time_t,pid_t等类型。2):netinet/in.h  Internet address family,定义 sockaddr_in结构体,htons,htonl,ntohs, ntohl字节序列转换函数的头文件。3):sys/sock

cocos-creator使用记录19_根据当前关卡自动调整的滚动区_爱睡觉的猫L的博客-程序员宅基地

1.适用的情况左右滑动式滚动区的关卡界面2.实现的思路关卡按钮使用预制文件,在进入关卡时动态生成。根据关卡总数计算滚动区的大小。根据当前关卡序号设置滚动区的位置和表示分页的点的显示。3.控件布局Canvas--scrollView  --view    --content--pointNode  --point1    --red --black  --point2  --point3  --po...

随便推点

自定义view之无限滚动的刻度尺_Alien28的博客-程序员宅基地

具体思路是把一个view分成三段,当总长度&amp;amp;amp;amp;gt;=40个刻度向左滚动,滚动到2/3的时候view移动到1/3出然后刷新显示的刻度这时为第一页,一次更新页数,当向右滚动的时候滚动且不为第一页则每滚动到1/3处view移动到2/3处。之后在添加一些首页和最后一页的判断。 这一次除了无限滚动还比我上一次写的多了手指滑动速度的判断,去掉了滚动结束自动归位到对应刻度的效果,代码中除了极端情况默认...

rnn 相关_且听风雨999的博客-程序员宅基地

gate rnnrnn-lstm textDeep Sentence Embedding Using the Long Short Term Memory Network: Analysis and Application to Information RetrievalSEMANTIC MODELLING WITH LONG-SHORT-TERM MEMORY FOR INFORMATION

IIS负载均衡ARR路由请求到ARR服务器和处理服务器_paolei的博客-程序员宅基地

IIS负载均衡ARR路由请求到ARR服务器和处理服务器

J2ME安全应用——Bouncy Castle Crypto API_peterwanghao的博客-程序员宅基地

1、前言随着移动商业的不断发展,对于移动用户和无线应用程序开发人员而言,安全性正在成为一个重要方面。无线通信是无线电波拦截容易获取的目标,而无线设备几乎没有任何计算能力来支持所有通信数据的强加密。而目前开发得很好的点对点安全性技术(如 SSL/TLS 和 HTTPS)并不适合于多供应商、多中间 Web 服务的网络拓扑图。因此重点必须集中在保护内容本身而不是传递内容的连接上。本文将讨论使...

ganglia 安装后web页面有数据,但是,没有图形_深山猿的博客-程序员宅基地

ganglia已经安装,而且使用http://hostIp/ganglia访问时,出现有数据,但是所有的图形都无法正常显示,而且从ganglia中取值时发现,key中没有datapoints经过一番折腾1通过查看/var/log/httpd 下的error_log,tail -f error_log发现如下提示,sh: /usr/share/rrdtool: is a dire

3.openfire安装、端口9090_qiqizhu2008的博客-程序员宅基地_openfire 端口

修改openfire/conf/openfire.xml文件,启用安装模式: 将文件中 &amp;lt;setup&amp;gt;true&amp;lt;/setup&amp;gt;  删除或者使用&amp;lt;!--  --&amp;gt; 注释掉修改openfire执行权限:chmod 744 启动openfire:./openfire start浏览器打开http://ip:9090域:atwasoft密码:123+456关闭5222端...

推荐文章

热门文章

相关标签