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

在開源之后，還沒什么文章來說明 Discuz!NT項目的一些特點。作為這個控件庫的設計者，本人將在接下來的時間里用連載的方式來向大家解釋其中一些控件的設計思想，實現功能以及一些未曾使用過的功能展示（因為管理后臺只使用控件的部分功能）。同時因為這組控件開發的周期很短（當時僅用一個半月，后不斷增強功能），有不少思路和控件設計的規范相駁，但當時只考慮為后臺程序開發和訂制方便，因此就暫且開發成了這個樣子，但本人日后會不斷完善和規范這些代碼:)
???????? 為了便于大家下載和使用這組控件，本人在源代碼的基本上去掉了與項目相關的一些令人費解的的代碼。同時把相關的控件與具體運行實例相綁定，這只是為了讓大家使用和分析方便，必定不是庫中所有控件大家都愿意用或感興趣。正所謂投其所好嘛。另外下載包中的文件所在的項目和文件位置也是與開源項目中的配置相一致的，這么搞可以方便大家按圖索驥，以便于同步開源項目中的文件。 同時，本人也希望園子里同行在使用和測試這組代碼時將您的意見或建議提出來，以便改進和優化代碼。還有就是這些控件代碼是能在.net1.0 .net2.0框架上運行。歡迎大家使用:) 好了，今天就先說一下 Button 控件。 先貼一張運行效果圖讓大家看一下： 開發動機：在去年10月底時，后臺UI進行了一次重構，因為對.net 中的button控件和圖片按鈕控件感到控制不靈活（項目需要一個既有text 屬性，又有img字段屬性的按鈕）。在看到了CS項目中所使用的按鈕后，決定嘗試實現與其類似的功能設計。另外因為當時設計部無法對我們直接進行支持,所以決定樣式（css）直接采用cs中所使用的樣式（偷個賴）。 實現功能：希望提供兩種或以上的按鈕樣式，同時支持JS腳本注冊，以及在客戶端表單驗證等。
????
??????? ?因為要求做出多個顯示樣式，所以使用枚舉方式顯示可能選擇的樣式類型，相關代碼如下: ?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
??? 而腳本注冊屬性為string ，用于輸入和保存相關腳本信息
?????? ?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 是否支持客戶端表單驗證的屬性如下:
?????? ?1??定義是否調用js函數validate(this.form);進行數據校驗#region?定義是否調用js函數validate(this.form);進行數據校驗
?2????????private?bool?_validateForm?=?false;
?3????????//定義是否調用js函數validate(this.form);進行數據校驗
?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 有了這幾個屬性，就可以在控件的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表現上，希望能讓用戶的接受起來更快，色調也更加柔和等等......

轉載于:https://blog.51cto.com/daizhj/230126

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。