? Discuz!NT控件剖析 之 Button [原創(chuàng): 附源碼] 收藏

在開源之后，還沒什么文章來說明 Discuz!NT項(xiàng)目的一些特點(diǎn)。作為這個(gè)控件庫的設(shè)計(jì)者，本人將在接下來的時(shí)間里用連載的方式來向大家解釋其中一些控件的設(shè)計(jì)思想，實(shí)現(xiàn)功能以及一些未曾使用過的功能展示（因?yàn)楣芾砗笈_(tái)只使用控件的部分功能）。同時(shí)因?yàn)檫@組控件開發(fā)的周期很短（當(dāng)時(shí)僅用一個(gè)半月，后不斷增強(qiáng)功能），有不少思路和控件設(shè)計(jì)的規(guī)范相駁，但當(dāng)時(shí)只考慮為后臺(tái)程序開發(fā)和訂制方便，因此就暫且開發(fā)成了這個(gè)樣子，但本人日后會(huì)不斷完善和規(guī)范這些代碼:)
???????? 為了便于大家下載和使用這組控件，本人在源代碼的基本上去掉了與項(xiàng)目相關(guān)的一些令人費(fèi)解的的代碼。同時(shí)把相關(guān)的控件與具體運(yùn)行實(shí)例相綁定，這只是為了讓大家使用和分析方便，必定不是庫中所有控件大家都愿意用或感興趣。正所謂投其所好嘛。另外下載包中的文件所在的項(xiàng)目和文件位置也是與開源項(xiàng)目中的配置相一致的，這么搞可以方便大家按圖索驥，以便于同步開源項(xiàng)目中的文件。 同時(shí)，本人也希望園子里同行在使用和測(cè)試這組代碼時(shí)將您的意見或建議提出來，以便改進(jìn)和優(yōu)化代碼。還有就是這些控件代碼是能在.net1.0 .net2.0框架上運(yùn)行。歡迎大家使用:) 好了，今天就先說一下 Button 控件。 先貼一張運(yùn)行效果圖讓大家看一下： 開發(fā)動(dòng)機(jī)：在去年10月底時(shí)，后臺(tái)UI進(jìn)行了一次重構(gòu)，因?yàn)閷?duì).net 中的button控件和圖片按鈕控件感到控制不靈活（項(xiàng)目需要一個(gè)既有text 屬性，又有img字段屬性的按鈕）。在看到了CS項(xiàng)目中所使用的按鈕后，決定嘗試實(shí)現(xiàn)與其類似的功能設(shè)計(jì)。另外因?yàn)楫?dāng)時(shí)設(shè)計(jì)部無法對(duì)我們直接進(jìn)行支持,所以決定樣式（css）直接采用cs中所使用的樣式（偷個(gè)賴）。 實(shí)現(xiàn)功能：希望提供兩種或以上的按鈕樣式，同時(shí)支持JS腳本注冊(cè)，以及在客戶端表單驗(yàn)證等。
????
??????? ?因?yàn)橐笞龀龆鄠€(gè)顯示樣式，所以使用枚舉方式顯示可能選擇的樣式類型，相關(guān)代碼如下: ?1??properytyButtontypeMode?按鈕樣式#region?properytyButtontypeMode?按鈕樣式
?2????????public?enum?ButtonType
?3????????{
?4????????????Normal,???//普通
?5????????????WithImage,??//帶圖
?6????????????XpStyle??//不帶圖
?7????????}
?8
?9
10????????public?ButtonType?ButtontypeMode
11????????{
12????????????get
13????????????{
14????????????????object?obj?=?ViewState["ButtontypeMode"];
15????????????????return?obj?==?null???ButtonType.WithImage?:?(ButtonType)obj;
16????????????}
17????????????set
18????????????{
19????????????????ViewState["ButtontypeMode"]?=?value;
20????????????}
21????????}
22????????#endregion
23
24
??? 而腳本注冊(cè)屬性為string ，用于輸入和保存相關(guān)腳本信息
?????? ?1??[Description("圖版按鈕鏈接"),?DefaultValue("../p_w_picpaths/")]
?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 是否支持客戶端表單驗(yàn)證的屬性如下:
?????? ?1??定義是否調(diào)用js函數(shù)validate(this.form);進(jìn)行數(shù)據(jù)校驗(yàn)#region?定義是否調(diào)用js函數(shù)validate(this.form);進(jìn)行數(shù)據(jù)校驗(yàn)
?2????????private?bool?_validateForm?=?false;
?3????????//定義是否調(diào)用js函數(shù)validate(this.form);進(jìn)行數(shù)據(jù)校驗(yàn)
?4????????public?bool?ValidateForm
?5????????{
?6????????????set
?7????????????{
?8????????????????this._validateForm?=?value;
?9????????????}
10????????????get
11????????????{
12????????????????return?this._validateForm;
13????????????}
14????????}
15????????#endregion
16 有了這幾個(gè)屬性，就可以在控件的Render函數(shù)中使用相關(guān)的設(shè)置了
????? ?1protected?override?void?Render(HtmlTextWriter?output)
?2?????{
?3?????????????//如果應(yīng)用系統(tǒng)樣式,這里只為當(dāng)沒有CSS文件時(shí)，則直接將樣式寫到控件中
?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????????????//表單驗(yàn)證屬性判斷，（注：要在web頁面上FORM的submit中加入該函數(shù)，并進(jìn)行相關(guān)聲明
34????????????//即可，參見webtest頁面）
35??????????????if?(ValidateForm)
36????????????????{
37????????????????????sb.Append("if(validate(this.form)){");
38????????????????????//當(dāng)驗(yàn)證通過后則執(zhí)行向服務(wù)器提交內(nèi)容的JS代碼
39??????????????sb.Append(Page.GetPostBackEventReference(this,"")?+?";}");?
40????????????
41
42????????????//用戶希望進(jìn)行注冊(cè)的JS代碼，這塊代碼可放在表單驗(yàn)證屬性判斷之前。
43????????????if?(ScriptContent?!=?"")
44????????????{
45????????????????sb.Append(ScriptContent);
46????????????}
47
48????????????//將上來的設(shè)置寫入到客戶端的onlick事件中。
49????????????output.WriteAttribute("onclick",?sb.ToString());
50?????}
51
52
53
54 現(xiàn)在可以說從服務(wù)器端設(shè)置到客戶端腳本生成基本上都開發(fā)完了。 接下來是做服務(wù)器端事件的綁定處理，
?????? ?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
????????? 這樣就完成了這個(gè)控件的主干部分，而其它的一些屬性，如圖片路徑之類的代碼大家可參見一下源碼，這里就不多做說明了。 未來實(shí)現(xiàn)的功能，應(yīng)該說主要還是在UI表現(xiàn)上，希望能讓用戶的接受起來更快，色調(diào)也更加柔和等等......

轉(zhuǎn)載于:https://blog.51cto.com/daizhj/230126

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Discuz!NT控件剖析 之 Button [原创: 附源码]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。