【新特性速遞】評分，評分，評分

三生石上(FineUI控制元件)發表於2020-06-18

FineUIPro/Mvc/Core的下個版本（v6.4.0），我們會新增評分的支援，這個是在NumberBox控制元件的基礎上進行的（基礎版適用）。

 

之所以有這個更新，首先要感謝網友 @棕櫚 的無私分享：https://fineui.com/bbs/forum.php?mod=viewthread&tid=22354

【新特性速遞】評分，評分，評分

 

在下個版本中，我們將會有如下幾個更新：

  • 為數字輸入框增加RateAllowClear，RateAllowHalf，RateIconFont，RateCharacter，RateCount屬性。
  • 為數字輸入框增加RateTextVisible，RateTextRendererFunction屬性，可以自定義評分文字渲染函式。
  • 新增示例：表單控制元件/輸入框/數字輸入框/數字輸入框（評分）。

 

示例截圖：

【新特性速遞】評分，評分，評分【新特性速遞】評分，評分，評分

【新特性速遞】評分，評分，評分【新特性速遞】評分，評分，評分

 

示例頁面標籤定義：

<f:NumberBox ID="NumberBox1" runat="server" DisplayType="Rate" Text="3">
</f:NumberBox>
<br />
<br />
半星評分：
<br />
<f:NumberBox ID="NumberBox2" runat="server" DisplayType="Rate" Text="3.5" RateAllowHalf="true">
</f:NumberBox>
<br />
只讀：
<br />
<f:NumberBox ID="NumberBox3" runat="server" DisplayType="Rate" Text="2" Readonly="true">
</f:NumberBox>
<br />
禁用點選清除：
<br />
<f:NumberBox ID="NumberBox4" runat="server" DisplayType="Rate" Text="3" RateAllowClear="false">
</f:NumberBox>
<br />
自定義字元、圖示、個數：
<br />
<f:NumberBox ID="NumberBox5" runat="server" DisplayType="Rate" Text="3" RateCharacter="A">
</f:NumberBox>
<br />
<f:NumberBox ID="NumberBox6" runat="server" DisplayType="Rate" Text="4" RateCharacter="好">
</f:NumberBox>
<br />
<f:NumberBox ID="NumberBox7" runat="server" DisplayType="Rate" Text="5" RateIconFont="_SmileO" RateCount="10">
</f:NumberBox>
<br />
<f:NumberBox ID="NumberBox8" runat="server" DisplayType="Rate" Text="6" RateIconFont="_ThumbsUp" RateCount="10">
</f:NumberBox>
<br />
<f:NumberBox ID="NumberBox9" runat="server" DisplayType="Rate" Text="7" RateIconFont="_Heart" RateCount="10">
</f:NumberBox>
<br />
評分文字：
<br />
<f:NumberBox ID="NumberBox10" runat="server" DisplayType="Rate" Text="3" RateTextVisible="true" RateTextRendererFunction="renderNumberBox10">
</f:NumberBox>
<br />
<f:NumberBox ID="NumberBox11" runat="server" DisplayType="Rate" Text="3.5" RateAllowHalf="true" RateTextVisible="true">
</f:NumberBox>

　　

注意：RateTextVisible用來顯示預設的評分文字。除此之外，我們還可以自定義評分文字渲染函式，比如上例中的renderNumberBox10：

<script>
	var desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];

	function renderNumberBox10(val) {
		var rateText = 'not yet rated';
		if (val > 0) {
			rateText = desc[val - 1];
		}
		return rateText;
	}
</script>

 

使用者互動效果如下所示：

【新特性速遞】評分，評分，評分　　

 

 

只是一些簡單的屬性設定，是不是很簡單，更好的訊息是這個更新基礎版適用，讓我們一起來期待新版本吧（v6.4.0）。　　

 

 

歡迎入夥：https://fineui.com/fans/

 

三石出品，必屬精品 

 

相關文章