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

<f:NumberBox ID="progressbar" MinValue="0" MaxValue="100" Width="550" Height="30" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>

复制代码

C#代码：

UIHelper.NumberBox("progressbar").Text(value);
return UIHelper.Result();

复制代码

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

<script src="~/res/js/fineui-progressbar.js"></script>
<script>
F.ready(function () {
F.ext.progressbar();
});
</script>

复制代码

下面是示例的全部代码

View代码：

@page
@model FineUICore.EmptyProject.RazorPages.Pages.HelloModel
@{
ViewBag.Title = "Hello";
var F = @Html.F();
}
@section body {
<h2>进度条</h2>
<f:NumberBox ID="progressbar" MinValue="0" MaxValue="100" Width="550" Height="30" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:NumberBox ID="progressbar2" MinValue="0" MaxValue="100" Width="500" Height="25" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:NumberBox ID="progressbar3" MinValue="0" MaxValue="100" Width="450" Height="20" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:NumberBox ID="progressbar4" MinValue="0" MaxValue="100" Width="400" Height="15" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:NumberBox ID="progressbar5" MinValue="0" MaxValue="100" Width="350" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:NumberBox ID="progressbar6" MinValue="0" MaxValue="100" Width="300" Height="5" Text="30">
<Attributes>
<f:Attribute Key="role" Value="progressbar"></f:Attribute>
</Attributes>
</f:NumberBox>
<br />
<br />
<f:Button Text="0%" ID="btnSetProgressBarValue_0" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "0"))"></f:Button>
<f:Button Text="25%" ID="btnSetProgressBarValue_25" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "25"))"></f:Button>
<f:Button Text="50%" ID="btnSetProgressBarValue_50" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "50"))"></f:Button>
<f:Button Text="75%" ID="btnSetProgressBarValue_75" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "75"))"></f:Button>
<f:Button Text="100%" ID="btnSetProgressBarValue_100" OnClick="@Url.Handler("btnSetProgressBarValue_Click")" OnClickParameter1="@(new Parameter("value", "100"))"></f:Button>
}
@section script {
<script src="~/res/js/fineui-progressbar.js"></script>
<script>
F.ready(function () {
F.ext.progressbar();
});
</script>
}

复制代码

C#代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace FineUICore.EmptyProject.RazorPages.Pages
{
public class HelloModel : BaseModel
{
public void OnGet()
{
}
public IActionResult OnPostBtnSetProgressBarValue_Click(string value)
{
UIHelper.NumberBox("progressbar").Text(value);
UIHelper.NumberBox("progressbar2").Text(value);
UIHelper.NumberBox("progressbar3").Text(value);
UIHelper.NumberBox("progressbar4").Text(value);
UIHelper.NumberBox("progressbar5").Text(value);
UIHelper.NumberBox("progressbar6").Text(value);
return UIHelper.Result();
}
}
}

复制代码

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

sanshi · 发表于 2020-2-8 23:52:22

		自动登录	找回密码
密码			立即注册

FineUI 进度条

本帖子中包含更多资源