Gauge Focus Styling
You can use the "wj-state-focused" pseudo-class to add special effects to gauges when they contain the focus.
In this example, we customized the appearance of the thumb when the gauges have focus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // This file locates: "Content/css/Lesson/C1Gauge/StylingFocus.css". .wj-gauge { width: 50%; margin: 20px auto; } .wj-gauge .wj-face path { fill: #fefefe; stroke: #e0e0e0; } .wj-gauge.wj-state-focused .wj-pointer { fill: red; } .wj-gauge.wj-state-focused circle.wj-pointer { stroke-width: 4px; stroke: red; } .wj-radialgauge { height: 120px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1GaugeController : Controller { // GET: StylingFocus public ActionResult StylingFocus() { 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 | < h1 > @Html .Raw(Resources.C1Gauge.StylingFocus_Title) </ h1 > < p > @Html .Raw(Resources.C1Gauge.StylingFocus_Text1) </ p > < p > @Html .Raw(Resources.C1Gauge.StylingFocus_Text2) </ p > @ (Html.C1().LinearGauge().Id( "linear" ) .Value(50).Max(100) .IsReadOnly( false ).HasShadow( false ).ThumbSize(12) .Face(f => f.Thickness(0.25)) .Pointer(p => p.Thickness(0.25)) ) @ (Html.C1().RadialGauge().Id( "radial" ) .Value(50).Max(100) .IsReadOnly( false ).HasShadow( false ) .ShowText(ShowText.Value).ThumbSize(6) .Face(f => f.Thickness(0.05)) .Pointer(p => p.Thickness(0.05)) ) |