FineUI 官方论坛

标题: FineUI 进度条 [打印本页]
作者: 棕榈    时间: 2020-2-8 20:55
标题: FineUI 进度条
本帖最后由 棕榈 于 2020-2-8 21:13 编辑

FineUI 进度条

[attach]12214[/attach]

FineUI进度条是在NumberBox上构建的，NumberBox的MaxValue,MinValue,Value的值就是进度条所对应的值，你只需要直接操作NumberBox就可以，不需要操作JS及DOM。

支持FineUIPro,FineUIMvc,FineUICore，使用方法也很简单，你只需要在NumberBox控件上添加一个HTML的Attribue就可以，下面以FineUICore为例进行说明：


代码：

NumberBox控件上添加一个 role=progressbar Attribute

  1. <f:NumberBox ID="progressbar" MinValue="0" MaxValue="100" Width="550" Height="30" Text="30">
  2.         <Attributes>
  3.                 <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  4.         </Attributes>
  5. </f:NumberBox>
复制代码


C#代码：
  1. UIHelper.NumberBox("progressbar").Text(value);
  2. return UIHelper.Result();
复制代码


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

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


下面是示例的全部代码


View代码：

  1. @page
  2. @model FineUICore.EmptyProject.RazorPages.Pages.HelloModel
  3. @{
  4.     ViewBag.Title = "Hello";
  5.     var F = @Html.F();
  6. }

  8. @section body {
  9.     <h2>进度条</h2>
  10.     <f:NumberBox ID="progressbar" MinValue="0" MaxValue="100" Width="550" Height="30" Text="30">
  11.         <Attributes>
  12.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  13.         </Attributes>
  14.     </f:NumberBox>
  15.     <br />
  16.     <br />
  17.     <f:NumberBox ID="progressbar2" MinValue="0" MaxValue="100" Width="500" Height="25" Text="30">
  18.         <Attributes>
  19.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  20.         </Attributes>
  21.     </f:NumberBox>
  22.     <br />
  23.     <br />
  24.     <f:NumberBox ID="progressbar3" MinValue="0" MaxValue="100" Width="450" Height="20" Text="30">
  25.         <Attributes>
  26.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  27.         </Attributes>
  28.     </f:NumberBox>
  29.     <br />
  30.     <br />
  31.     <f:NumberBox ID="progressbar4" MinValue="0" MaxValue="100" Width="400" Height="15" Text="30">
  32.         <Attributes>
  33.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  34.         </Attributes>
  35.     </f:NumberBox>
  36.     <br />
  37.     <br />
  38.     <f:NumberBox ID="progressbar5" MinValue="0" MaxValue="100" Width="350" Text="30">
  39.         <Attributes>
  40.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  41.         </Attributes>
  42.     </f:NumberBox>
  43.     <br />
  44.     <br />
  45.     <f:NumberBox ID="progressbar6" MinValue="0" MaxValue="100" Width="300" Height="5" Text="30">
  46.         <Attributes>
  47.             <f:Attribute Key="role" Value="progressbar"></f:Attribute>
  48.         </Attributes>
  49.     </f:NumberBox>
  50.     <br />
  51.     <br />
  52.     <f:Button Text="0%" ID="btnSetProgressBarValue_0" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "0"))"></f:Button>
  53.     <f:Button Text="25%" ID="btnSetProgressBarValue_25" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "25"))"></f:Button>
  54.     <f:Button Text="50%" ID="btnSetProgressBarValue_50" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "50"))"></f:Button>
  55.     <f:Button Text="75%" ID="btnSetProgressBarValue_75" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "75"))"></f:Button>
  56.     <f:Button Text="100%" ID="btnSetProgressBarValue_100" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "100"))"></f:Button>
  57. }

  59. @section script {
  60.     <script src="~/res/js/fineui-progressbar.js"></script>
  61.     <script>
  62.         F.ready(function () {
  63.             F.ext.progressbar();
  64.         });
  65.     </script>
  66. }
复制代码


C#代码

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. using Microsoft.AspNetCore.Mvc;
  6. using Microsoft.AspNetCore.Mvc.RazorPages;

  8. namespace FineUICore.EmptyProject.RazorPages.Pages
  9. {
  10.     public class HelloModel : BaseModel
  11.     {
  12.         public void OnGet()
  13.         {
  14.             
  15.         }

  17.         public IActionResult OnPostBtnSetProgressBarValue_Click(string value)
  18.         {
  19.             UIHelper.NumberBox("progressbar").Text(value);
  20.             UIHelper.NumberBox("progressbar2").Text(value);
  21.             UIHelper.NumberBox("progressbar3").Text(value);
  22.             UIHelper.NumberBox("progressbar4").Text(value);
  23.             UIHelper.NumberBox("progressbar5").Text(value);
  24.             UIHelper.NumberBox("progressbar6").Text(value);

  26.             return UIHelper.Result();
  27.         }
  28.     }
  29. }
复制代码



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



作者: sanshi    时间: 2020-2-8 23:52
赞



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