开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Discuz!NT控件剖析 之 Button [原创: 附源码]

简介:
+关注继续查看
 在开源之后,还没什么文章来说明 Discuz!NT项目的一些特点。作为这个控件库的设计者,本人将在接下来的时间里用连载的方式来向大家解释其中一些控件的设计思想,实现功能以及一些未曾使用过的功能展示(因为管理后台只使用控件的部分功能)。同时因为这组控件开发的周期很短(当时仅用一个半月,后不断增强功能),有不少思路和控件设计的规范相驳,但当时只考虑为后台程序开发和订制方便,因此就暂且开发成了这个样子,但本人日后会不断完善和规范这些代码:)

         为了便于大家下载和使用这组控件,本人在源代码的基本上去掉了与项目相关的一些令人费解的的代码。同时把相关的控件与具体运行实例相绑定,这只是为了让大家使用和分析方便,必定不是库中所有控件大家都愿意用或感兴趣。正所谓投其所好嘛。另外下载包中的文件所在的项目和文件位置也是与开源项目中的配置相一致的,这么搞可以方便大家按图索骥,以便于同步开源项目中的文件。
         同时,本人也希望园子里同行在使用和测试这组代码时将您的意见或建议提出来,以便改进和优化代码。还有就是这些控件代码是能在.net1.0 .net2.0框架上运行。欢迎大家使用:)
         好了,今天就先说一下 Button 控件。
         先贴一张运行效果图让大家看一下:
       
         开发动机:在去年10月底时,后台UI进行了一次重构,因为对.net 中的button控件和图片按钮控件感到控制不灵活(项目需要一个既有text 属性,又有img字段属性的按钮)。在看到了CS项目中所使用的按钮后,决定尝试实现与其类似的功能设计。另外因为当时设计部无法对我们直接进行支持,所以决定样式(css)直接采用cs中所使用的样式(偷个赖)。
        实现功能:希望提供两种或以上的按钮样式,同时支持JS脚本注册,以及在客户端表单验证等。
     
         因为要求做出多个显示样式,所以使用枚举方式显示可能选择的样式类型,相关代码如下:
     
 1  properytyButtontypeMode 按钮样式
23
24

    而脚本注册属性为string ,用于输入和保存相关脚本信息
      
 1  [Description("图版按钮链接"), DefaultValue("../images/")]
 2        public string ScriptContent
 3        {
 4            get
 5            {
 6                object obj = ViewState["ScriptContent"];
 7                return obj == null ? "" : (string)obj;
 8            }

 9            set
10            {
11                ViewState["ScriptContent"= value;
12            }

13        }

14
     是否支持客户端表单验证的属性如下:
      
 1  定义是否调用js函数validate(this.form);进行数据校验
16
     有了这几个属性,就可以在控件的Render函数中使用相关的设置了
     
 1protected override void Render(HtmlTextWriter output)
 2     {
 3             //如果应用系统样式,这里只为当没有CSS文件时,则直接将样式写到控件中
 4            if (ApplyDefaultStyle)
 5            {
 6                if (this.ButtontypeMode == ButtonType.Normal)
 7                {
 8                    output.Write("<span><a href=\"javascript:void(0);\" style=\"BORDER-RIGHT: 
 9                    #999999 1px solid; PADDING-RIGHT: 10px; BACKGROUND-POSITION: 1px 1px; BORDER-TOP:
10                    #cccccc 1px solid; DISPLAY: inline-block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; 
11                    
12                }

13
14                if (this.ButtontypeMode == ButtonType.WithImage)
15                {
16                    output.Write("<span><a href=\"javascript:void(0);\"  style=\"BORDER-RIGHT: #999999 1px solid;
17                    PADDING-RIGHT: 3px; BACKGROUND-POSITION: 1px 1px; BORDER-TOP: #cccccc 1px solid; 
18                    DISPLAY: inline-block; PADDING-LEFT: 22px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
19                    PADDING-BOTTOM: 3px; MARGIN: 1px; BORDER-LEFT: #cccccc 1px solid; CURSOR: pointer; 
20                    
21                }

22
23                if (this.ButtontypeMode == ButtonType.XpStyle)
24                {
25                    output.Write("<span style=\"BACKGROUND-POSITION: left top; DISPLAY: inline-block;
26                    display: -moz-inline-box; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
27                    BACKGROUND-IMAGE: url(" + this.XpBGImgFilePath + "/xpbuttonbg_l.gif); 
28                    
29                }

30            }

31            
32
33            //表单验证属性判断,(注:要在web页面上FORM的submit中加入该函数,并进行相关声明
34            //即可,参见webtest页面)
35              if (ValidateForm)
36                {
37                    sb.Append("if(validate(this.form)){");
38                    //当验证通过后则执行向服务器提交内容的JS代码
39              sb.Append(Page.GetPostBackEventReference(this,""+ ";}"); 
40            
41
42            //用户希望进行注册的JS代码,这块代码可放在表单验证属性判断之前。
43            if (ScriptContent != "")
44            {
45                sb.Append(ScriptContent);
46            }

47
48            //将上来的设置写入到客户端的onlick事件中。
49            output.WriteAttribute("onclick", sb.ToString());
50     }

51
52
53
54
          现在可以说从服务器端设置到客户端脚本生成基本上都开发完了。
          接下来是做服务器端事件的绑定处理,
      
 1  protected static readonly object EventClick = new object();
 2
 3          public event EventHandler Click
 4           {
 5            add
 6            {
 7                Events.AddHandler(EventClick, value);
 8            }

 9            remove
10            {
11                Events.RemoveHandler(EventClick, value);
12            }

13        }

14
15        protected virtual void OnClick(EventArgs e)
16        {
17            EventHandler clickHandler = (EventHandler)Events[EventClick];
18            if (clickHandler != null)
19            {
20                clickHandler(this, e);
21            }

22        }

23
24
25        public void RaisePostBackEvent(string eventArgument)
26        {
27            OnClick(new EventArgs());
28        }

29
30
31        void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
32        {
33            this.RaisePostBackEvent(eventArgument);
34        }

35
36

          这样就完成了这个控件的主干部分,而其它的一些属性,如图片路径之类的代码大家可参见一下源码,这里就不多做说明了。
         未来实现的功能,应该说主要还是在UI表现上,希望能让用户的接受起来更快,色调也更加柔和等等......


本文转自 daizhenjun 51CTO博客,原文链接:http://blog.51cto.com/daizhj/230126,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
silverlight.net官方网站图片切换源码
下午心血来潮,想看看MS的开发人员是如何做silverlight的,出于学习目的把silverlight.net官方首页的图片轮换通过分析html源代码,下载xap后反编译了一下,分析后的源代码略作修改备份于此,希望对大家学习silverlight有用,请勿用于非法商业用途。
795 0
艾伟_转载:40条ASP.NET开发Tip
1、在compilation 下,请设置debug=false ,如下: default Language="c#" debug="false"> 2、请使用Server.Transfer代替Response.Redirect。
616 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载