This sample demonstrates how to change specific display options. With .jqSegmentedGauge("option",
optionName, [value]) method you can get or set any jqSegmentedGauge option. If no value
is specified, will act as a getter.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqGauges.min.js") %>" type="text/javascript"></script> <body> <div> <%=Html.JQSegmentedDisplay().SegmentedDisplay() .ID("jqSegmentedDisplay") .Width(500) .Height(100) .Background("#AAD7FF") .Digits(9) .SegmentMode(SegmentMode.FourteenSegment) .Text("Some Info") .TextForeground("#333333") .TextForegroundUnlit("rgba(201, 201, 201, 0.5)") .Border(border => { border.StrokeStyle("#76786A").Padding(10).LineWidth(4); }) .Render()%> </div> <br /> <input id="buttonChangeText" type="button" value="Change text" /> <input id="buttonTextForeground" type="button" value="Change text foreground" /> <br /> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#buttonChangeText').click(function () { // The new text will be 2 digits longer than the text before, so we set the digits option to 11. $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'digits', 11); $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', 'Hello World'); }); $('#buttonTextForeground').click(function () { var textForeground = $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground'); if (textForeground === '#333333') { $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground', '#6ba851'); } }); }); </script> </body> </html> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqGauges.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQSegmentedDisplay().SegmentedDisplay() .ID("jqSegmentedDisplay") .Width(500) .Height(100) .Background("#AAD7FF") .Digits(9) .SegmentMode(SegmentMode.FourteenSegment) .Text("Some Info") .TextForeground("#333333") .TextForegroundUnlit("rgba(201, 201, 201, 0.5)") .Border(border => { border.StrokeStyle("#76786A").Padding(10).LineWidth(4); }) .Render() ) </div> <br /> <input id="buttonChangeText" type="button" value="Change text" /> <input id="buttonTextForeground" type="button" value="Change text foreground" /> <br /> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#buttonChangeText').click(function () { // The new text will be 2 digits longer than the text before, so we set the digits option to 11. $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'digits', 11); $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', 'Hello World'); }); $('#buttonTextForeground').click(function () { var textForeground = $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground'); if (textForeground === '#333333') { $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground', '#6ba851'); } }); }); </script> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace GaugesSamplesBrowser.Controllers { public class GaugeController : Controller { public ActionResult ChangeDisplayOptions() { return View(); } } } |