FineUI 官方论坛

标题: FineUI 评分控件 [打印本页]
作者: 棕榈    时间: 2020-2-10 11:56
标题: FineUI 评分控件
本帖最后由 棕榈 于 2020-2-10 11:54 编辑

FineUI 评分控件
[attach]12215[/attach]


评分控件是在FineUI的NumberBox基础上构建的，与之前创建FineUI进度条方法是一样的，具体的实现原理请查看FineUI 进度条
https://fineui.com/bbs/forum.php?mod=viewthread&tid=22352&fromuid=5871，下面讲一下控件的使用


使用原理与进度条是一样的，也是添加Attribute，由于评分控件的参数要多一些，所以可添加的属性也多一些


最简单的使用，默认为五角星，个数为5个，大小为20


  1.     <f:NumberBox Text="2">
  2.         <Attributes>
  3.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  4.         </Attributes>
  5.     </f:NumberBox>
复制代码


最全的参数：

  1.     <f:NumberBox Text="8">
  2.         <Attributes>
  3.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  4.             <f:Attribute Key="data-icon" Value="diamond"></f:Attribute>
  5.             <f:Attribute Key="data-count" Value="11"></f:Attribute>
  6.             <f:Attribute Key="data-size" Value="20"></f:Attribute>
  7.             <f:Attribute Key="data-color" Value="#16a085"></f:Attribute>
  8.             <f:Attribute Key="data-allow-half" Value="true"></f:Attribute>
  9.             <f:Attribute Key="data-readonly" Value="false"></f:Attribute>
  10.         </Attributes>
  11.     </f:NumberBox>
复制代码



使用之前需要引入JS文件及调用初始化方法

  1. <script src="~/res/js/fineui-rating.js"></script>
  2. <script>
  3.         F.ready(function () {
  4.                 F.ext.rating();
  5.         });
  6. </script>
复制代码


下面为示例代码：

  1. @page
  2. @model FineUICore.EmptyProject.RazorPages.Pages.RatingModel
  3. @{
  4.     ViewBag.Title = "评分控件";
  5.     var F = @Html.F();
  6. }

  8. @section body {
  9.     <h2>评分控件</h2>
  10.     <f:NumberBox Text="2">
  11.         <Attributes>
  12.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  13.         </Attributes>
  14.     </f:NumberBox>
  15.     <br />
  16.     <h3>不同的图标(使用FineUI内置的字体图标)、个数、大小、颜色</h3>
  17.     <f:NumberBox Text="3">
  18.         <Attributes>
  19.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  20.             <f:Attribute Key="data-icon" Value="heart"></f:Attribute>
  21.             <f:Attribute Key="data-count" Value="6"></f:Attribute>
  22.             <f:Attribute Key="data-size" Value="30"></f:Attribute>
  23.             <f:Attribute Key="data-color" Value="#c0392b"></f:Attribute>
  24.         </Attributes>
  25.     </f:NumberBox>
  26.     <br />
  27.     <f:NumberBox Text="4">
  28.         <Attributes>
  29.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  30.             <f:Attribute Key="data-icon" Value="thumbs-up"></f:Attribute>
  31.             <f:Attribute Key="data-count" Value="7"></f:Attribute>
  32.             <f:Attribute Key="data-size" Value="28"></f:Attribute>
  33.             <f:Attribute Key="data-color" Value="#2980b9"></f:Attribute>
  34.         </Attributes>
  35.     </f:NumberBox>
  36.     <br />
  37.     <f:NumberBox Text="5">
  38.         <Attributes>
  39.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  40.             <f:Attribute Key="data-icon" Value="trophy"></f:Attribute>
  41.             <f:Attribute Key="data-count" Value="8"></f:Attribute>
  42.             <f:Attribute Key="data-size" Value="26"></f:Attribute>
  43.             <f:Attribute Key="data-color" Value="#e67e22"></f:Attribute>
  44.         </Attributes>
  45.     </f:NumberBox>
  46.     <br />
  47.     <f:NumberBox Text="6">
  48.         <Attributes>
  49.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  50.             <f:Attribute Key="data-icon" Value="smile-o"></f:Attribute>
  51.             <f:Attribute Key="data-count" Value="9"></f:Attribute>
  52.             <f:Attribute Key="data-size" Value="24"></f:Attribute>
  53.             <f:Attribute Key="data-color" Value="#27ae60"></f:Attribute>
  54.         </Attributes>
  55.     </f:NumberBox>
  56.     <br />
  57.     <f:NumberBox Text="7">
  58.         <Attributes>
  59.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  60.             <f:Attribute Key="data-icon" Value="snowflake-o"></f:Attribute>
  61.             <f:Attribute Key="data-count" Value="10"></f:Attribute>
  62.             <f:Attribute Key="data-size" Value="22"></f:Attribute>
  63.             <f:Attribute Key="data-color" Value="#f1c40f"></f:Attribute>
  64.         </Attributes>
  65.     </f:NumberBox>
  66.     <br />
  67.     <f:NumberBox Text="8">
  68.         <Attributes>
  69.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  70.             <f:Attribute Key="data-icon" Value="diamond"></f:Attribute>
  71.             <f:Attribute Key="data-count" Value="11"></f:Attribute>
  72.             <f:Attribute Key="data-size" Value="20"></f:Attribute>
  73.             <f:Attribute Key="data-color" Value="#16a085"></f:Attribute>
  74.         </Attributes>
  75.     </f:NumberBox>
  76.     <br />
  77.     <h3>允许半选</h3>
  78.     <f:NumberBox Text="1.5">
  79.         <Attributes>
  80.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  81.             <f:Attribute Key="data-allow-half" Value="true"></f:Attribute>
  82.         </Attributes>
  83.     </f:NumberBox>
  84.     <br />
  85.     <h3>设为只读</h3>
  86.     <f:NumberBox Text="3">
  87.         <Attributes>
  88.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  89.             <f:Attribute Key="data-readonly" Value="true"></f:Attribute>
  90.         </Attributes>
  91.     </f:NumberBox>
  92.     <br />
  93.     <h3>change事件</h3>
  94.     <f:NumberBox ID="rating2" Text="3">
  95.         <Listeners>
  96.             <f:Listener Event="change" Handler="onRatingChange"></f:Listener>
  97.         </Listeners>
  98.         <Attributes>
  99.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  100.             <f:Attribute Key="data-allow-half" Value="true"></f:Attribute>
  101.         </Attributes>
  102.     </f:NumberBox>
  103.     <br />
  104.     <f:NumberBox ID="numberbox" Text="3">
  105.         <Listeners>
  106.             <f:Listener Event="change" Handler="onNumberBoxChange"></f:Listener>
  107.         </Listeners>
  108.     </f:NumberBox>
  109.     <br />
  110.     <h3>通过后台程序设置</h3>
  111.     <f:NumberBox ID="rating" Text="0">
  112.         <Attributes>
  113.             <f:Attribute Key="role" Value="rating"></f:Attribute>
  114.         </Attributes>
  115.     </f:NumberBox>
  116.     <br />
  117.     <f:Button Text="0" ID="btnSetRatingValue_0" OnClick="@Url.Handler("btnSetRatingValue_Click")" OnClickParameter1="@(new Parameter("value", "0"))"></f:Button>
  118.     <f:Button Text="3" ID="btnSetRatingValue_3" OnClick="@Url.Handler("btnSetRatingValue_Click")" OnClickParameter1="@(new Parameter("value", "3"))"></f:Button>
  119.     <f:Button Text="4.3" ID="btnSetRatingValue_4_3" OnClick="@Url.Handler("btnSetRatingValue_Click")" OnClickParameter1="@(new Parameter("value", "4.3"))"></f:Button>
  120.     <f:Button Text="5" ID="btnSetRatingValue_5" OnClick="@Url.Handler("btnSetRatingValue_Click")" OnClickParameter1="@(new Parameter("value", "5"))"></f:Button>
  121. }

  123. @section script {
  124.     <script src="~/res/js/fineui-rating.js"></script>
  125.     <script>
  126.         function onRatingChange() {
  127.             F.ui.numberbox.setValue(F.ui.rating2.getValue());
  128.         };

  130.         function onNumberBoxChange() {
  131.             F.ui.rating2.setValue(F.ui.numberbox.getValue());
  132.         }

  134.         F.ready(function () {
  135.             F.ext.rating();
  136.         });
  137.     </script>
  138. }
复制代码


fineui-rating.js 文件请到知识星球下载



作者: sanshi    时间: 2020-2-10 12:10
厉害厉害
作者: 在路上。。。    时间: 2020-2-11 09:18
厉害厉害
作者: hroger    时间: 2020-11-23 23:05
如何在FinePro里面使用呢？
作者: hroger    时间: 2020-11-23 23:19
目前是直接报错



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4