网站首页
开启辅助访问

FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

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

搜索
FineUI 官方论坛»论坛首页 › FineUIMvc（Mvc & Core） › FineUIMvc & Core 讨论区 › FineUI 评分控件
返回列表 发新帖
查看: 32247|回复: 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. }

  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 文件请到知识星球下载



本帖子中包含更多资源

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

x
回复

举报

hroger
地板
发表于 2020-11-23 23:05:58 | 只看该作者
如何在FinePro里面使用呢？
回复 支持 反对

举报

hroger
5#
发表于 2020-11-23 23:19:48 | 只看该作者
目前是直接报错

本帖子中包含更多资源

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

x
回复 支持 反对

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-21 23:32 , Processed in 0.046689 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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