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:

50
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))
)