Color Input
Select a background for me!
Use the InputColor control to edit color values when you have only a little room:
Use the ColorPicker control to edit color values when you have enough room:
#ffffff
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // This file locates: "Scripts/Lesson/C1Input/Colors.js".c1.documentReady(function () { // InputColor var theInputColor = wijmo.Control.getControl('#theInputColor'); theInputColor.valueChanged.addHandler(function (s, e) { setBackground(s.value); }); // ColorPicker var theColorPicker = wijmo.Control.getControl('#theColorPicker'); theColorPicker.valueChanged.addHandler(function (s, e) { setBackground(s.value); }); // show the color that was selected function setBackground(color) { document.getElementById('output').style.background = color; theInputColor.value = color; theColorPicker.value = color; }}); |
1 2 3 4 5 6 7 | // This file locates: "Content/css/Lesson/C1Input/Colors.css".#output { float: right; font-size: 12px; border: 1px solid grey; padding: 12px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1InputController : Controller { // GET: Colors public ActionResult Colors() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <h1> @Html.Raw(Resources.C1Input.Colors_Title) <div id="output"> @Html.Raw(Resources.C1Input.Colors_Text1) </div></h1><p> @Html.Raw(Resources.C1Input.Colors_Text2)</p>@Html.C1().InputColor().Id("theInputColor").Placeholder(Resources.C1Input.Colors_Text3)<p> @Html.Raw(Resources.C1Input.Colors_Text4)</p>@Html.C1().ColorPicker().Id("theColorPicker") |