InputNumber
InputNumber
概要
機能
サンプル
設定
説明
このサンプルは、InputNumber コントロールの基本的な使用方法を示します。
高度な設定では、携帯電話、タブレット、iPadなどで適切なソフトキーボードの種類を表示するだけでなく、より多くのマスクにInputTypeプロパティを使用することもできます。
HandleWheelプロパティがtrueに設定されている場合、ユーザーがマウスホイールで現在の値を編集できます。
ソース
IndexController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class InputNumberController : Controller
{
private readonly ControlOptions _optionModel = new ControlOptions
{
Options = new OptionDictionary
{
{"Handle Wheel",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "True"}}
}
};
public ActionResult Index(FormCollection collection)
{
IValueProvider data = collection;
_optionModel.LoadPostData(data);
ViewBag.DemoOptions = _optionModel;
return View();
}
}
}
Index.cshtml
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@section Scripts{
<style>
.invalid-tooltip {
background-color: red;
color: yellow;
opacity: 0.9;
border-color: lightcoral;
}
</style>
<script>
var _invalidTooltip;
c1.documentReady(function () {
_invalidTooltip = new wijmo.Tooltip();
_invalidTooltip.cssClass = 'invalid-tooltip';
_invalidTooltip.position = 11;
window.addEventListener('resize', function () {
if (_invalidTooltip.isVisible) {
_invalidTooltip.hide();
onInvalidInput();
}
});
})
function onInvalidInput(input, e) {
e && (e.cancel = true);
_invalidTooltip.show("#invalidInput", "@Html.Raw(Resources.InputNumber.Index_Text8)");
}
function onValueChanged(input, e) {
_invalidTooltip.hide();
}
</script>
}
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text0)</label>
@Html.C1().InputNumber().Value(0).Format("n0").HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
</div>
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text1)</label>
@Html.C1().InputNumber().Value(Math.PI).Format("n").HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
</div>
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text2)</label>
@(Html.C1().InputNumber()
.Value(3.5).Format("c2")
.Step(0.5).Min(0).Max(10)
.HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
)
</div>
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text3)</label>
@(Html.C1().InputNumber()
.Placeholder(Resources.InputNumber.Index_Placeholder1)
.IsRequired(false).Value(null)
.HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
)
</div>
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text7)</label>
@(Html.C1().InputNumber().Id("invalidInput")
.Placeholder(Resources.InputNumber.Index_Placeholder1)
.IsRequired(false).Value(null)
.Min(100).Max(1000)
.HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
.OnClientInvalidInput("onInvalidInput")
.OnClientValueChanged("onValueChanged")
)
</div>
<div>
<label>@Html.Raw(Resources.InputNumber.Index_Text5)</label>
@(Html.C1().InputNumber()
.Placeholder(Resources.InputNumber.Index_Placeholder1)
.IsRequired(false).Value(null)
.Format("g5")
.InputType("number")
.HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))
.HtmlAttributes(new { title = "InputType: number" })
)
</div>
@section Settings{
@Html.Partial("_OptionsMenu", optionsModel)
}
@section Description{
<p>@Html.Raw(Resources.InputNumber.Index_Text4)</p>
<p>@Html.Raw(Resources.InputNumber.Index_Text6)</p>
<p>@Html.Raw(Resources.InputNumber.HandleWheelDescription_Text0)</p>
}
マニュアル