FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

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

搜索
查看: 2800|回复: 1

FineUI 进度条

[复制链接]
发表于 2020-2-8 20:55:13 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 2020-2-8 21:13 编辑

FineUI 进度条



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. }

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

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


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;

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

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

  23.             return UIHelper.Result();
  24.         }
  25.     }
  26. }
复制代码



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



本帖子中包含更多资源

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

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

本版积分规则

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

GMT+8, 2024-3-28 18:19 , Processed in 0.057135 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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