【新特性速递】评分,评分,评分

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/

三石出品,必属精品 

原文地址:https://www.cnblogs.com/sanshi/p/13156337.html