InputColor
Overview
This sample shows the basic usage of the InputColor control.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputColorController : Controller { public ActionResult Index() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | @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(InputColorRes.Index_Text2)"); } function onValueChanged(input, e) { _invalidTooltip && _invalidTooltip.hide(); changeColor(input, e); } function changeColor(sender, e) { document.getElementById("image1").style.backgroundColor = sender.value; } </script>} <p> <img id="image1" src="@Href("~/Content/images/room.png")" /> </p> <div> <label>@Html.Raw(InputColorRes.Index_Text0)</label> <c1-input-color id="invalidInput" value="White" click-action="Toggle" invalid-input="onInvalidInput" value-changed="onValueChanged"></c1-input-color> </div> @section Description{ @Html.Raw(InputColorRes.Index_Text1) } |