FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 21647|回复: 4

FineUI 评分控件

[复制链接]
发表于 2020-2-10 11:56:34 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 2020-2-10 11:54 编辑

FineUI 评分控件



评分控件是在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. }

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

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

  127.         function onNumberBoxChange() {
  128.             F.ui.rating2.setValue(F.ui.numberbox.getValue());
  129.         }

  130.         F.ready(function () {
  131.             F.ext.rating();
  132.         });
  133.     </script>
  134. }
复制代码


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



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2020-11-23 23:05:58 | 显示全部楼层
如何在FinePro里面使用呢?
发表于 2020-11-23 23:19:48 | 显示全部楼层
目前是直接报错

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-29 10:12 , Processed in 0.048833 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表