1. 引言
我們經常會在網頁上看到使用星形圖案表示對某個軟件或某篇文章的評價,通 常以五個星形作為最高標准,指定的等級對應使用實心填充,如圖1-1所示,在學 習ASP.NET自定義控件的第一天,我們將開發這樣的自定義控件。
2. 分析
可以看到這樣的一個自定義控件包含兩部分:顯示的文本和包含兩種圖案(實 心和空心星形)的圖片,為了呈現出這樣的結果,最方便的就是將這兩部分放到 包含一行兩列的表格中。接下來要考慮的就是如何根據評分顯示若干實心和空心 星形。
看到這個圖案的第一個想法可能就是根據評分首先顯示實心圖形,再判斷還需 要顯示幾個空心星形(用5減評分),這樣的話需要做多次循環才能實現,但是在 HTML裡有更好的實現方法。
想一下在使用CSS設置背景圖片時可以設置background-repeat屬性,該屬性標 識背景圖片按哪個方向重復,可以利用這個特性首先顯示一個外層的div,該div 始終顯示5個空心的星形圖形,在該層中嵌套另一個div,內層div顯示實心星形圖 案。
background-repeat、background-image、background-color、 background-position構成了設置背景樣式的屬性族既然可以按X方向重復星形背景,那麼顯示指定個數的星形也就有答案了—我 們可以根據得分設置指定層(div)的寬度即可,而且為了方便,將兩個星形圖案 放置到一個圖片文件裡,再應用background-position顯示指定位置星形即可。
根據以上分析,此自定義控件中需要具有兩個屬性:
屬性 描述 Comment 評分項目注釋,字符串類型 Score 得分,根據該屬性顯示相應的實心圖形,數字類型