Slider fxSlider (fx.slider.js)

Artikel
08/24/2015

Gäller för: Windows Azure Pack

fxSlider låter användaren välja ett tal i en skala genom att dra skjutreglaget eller genom att skriva ett värde i rutan till höger. Du kan också inkludera en förklaring.

Windows Azure Pack fxSlider

Tjänster som stöds

Tjänst	Stöds
Ångra/gör om	Yes
Validering	No

Widgets

$("Selector").fxSlider()

Egenskaper

Namn	Typ	Beskrivning
fx.fxSlider.options.inputId	Sträng	Id-attributet för skjutreglaget. Om det inte anges läggs inte ID-attributet till.
fx.fxSlider.options.legendOptions	Objekt	Alternativ som skickas till förklaringswidgeten. Mer information finns i Legend fxLegend (fx.legend.js).
fx.fxSlider.options.max	Antal	Skjutreglagets maxvärde.
fx.fxSlider.options.min	Antal	Skjutreglagets minsta värde.
fx.fxSlider.options.slidableMax	Antal	Maximalt värde som användaren kan dra till maxvärdet. Om värdet är null finns det inget maxvärde.
fx.fxSlider.options.step	Antal	Avgör hur många steg skjutreglaget tar mellan de lägsta och högsta värdena.

Metoder

Name	Beskrivning	Returer	Parametrar
fx.fxSlider.destroy	Förstör widgeten.	Ingenting	Ingen

Exempel

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Slider Examples</title>
        <!-- Style Links -->
        <link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="scriptLinksContainer">
            <!-- JQuery scripts-->
            <script src="/Scripts/_oss/jquery-1.7.1.js"></script>
            <script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>

            <!-- Knockout script -->
            <script src="/Scripts/_oss/knockout-2.1.0.js"></script>

            <!-- fx shell scripts -->
            <script src="/Scripts/UxFxScript.js"></script>
        </div>

    <!-- Sample HTML code -->
    <div id="sampleHTMLCodeContainer">
        <div>
            <button id="EnableButton">Enable</button>
            <button id="DisableButton">Disable</button><br />
            Current value on changed: <span id="CurrentValueOnChangedSpan" ></span><br />
            Current value on demand: <span id="CurrentValueOnDemandSpan" ></span><button id="CurrentValueButton">Get</button><br />
            Select this value: <input id="SelectValueTextBox" type="text" style="width:55px" /><button id="SelectValueButton">Select</button><br />
            <button id="RevertButton">Revert to Original Value</button><br />
            <button id="UpdateInitialValueButton">Update Initial Value</button><br />
            <input id="TrackEditCheckbox" type="checkbox" checked="checked" /> Track Edit<br />
            Set max slidable value to <input id="MaxSlidableValueTextBox" type="text" style="width:55px" /><button id="MaxSlidableValueButton">Set</button><br/>
            Set min slidable value to <input id="MinSlidableValueTextBox" type="text" style="width:55px" /><button id="MinSlidableValueButton">Set</button><br/>
            <br/>Changes to these values require the slider to be regenerated<br/>
            Set max value to <input id="MaxValueTextBox" type="text" style="width:55px" /><br/>
            Set min value to <input id="MinValueTextBox" type="text" style="width:55px" /><br/>
            Set step to <input id="StepTextBox" type="text" style="width:55px" /><br/>
            <button id="RegenSlider">Regenerate</button><br/>
        </div>
        <br />

        <div id="slider"></div>
        <!-- Workaround IE9 cache issue where it doesn't like to lonely spans that only have text changing-->
        <div id="MessageSpanContainer"><span id="MessageSpan" style="color:Green">Not Edited</span></div>
    </div>

    <!-- Sample Script Code -->
    <div id="sampleScriptCodeContainer">
        <script type="text/javascript">
            //Enable our buttons/textboxes/controls
            var getSelectedValue = function() {
                return $("#slider").fxSlider("value");
            };

            $("#EnableButton").click(function() {
                $("#slider").fxSlider("enable");
            });

            $("#DisableButton").click(function() {
                $("#slider").fxSlider("disable");
            });

            //Get current value
            $("#CurrentValueButton").click(function() {
                $("#CurrentValueOnDemandSpan").text(getSelectedValue());
            });

            //Select a specified value
            $("#SelectValueButton").click(function() {
                $("#slider").fxSlider("option", "value", $("#SelectValueTextBox").val());
            });

            //Reset to default value
            $("#RevertButton").click(function() {
                $("#slider").fxSlider("undo");
            });

            //Change the default value
            $("#UpdateInitialValueButton").click(function() {
                $("#slider").fxSlider("resetOriginal");
            });

            //Bind to the change event
            $("#slider").bind("change.fxcontrol", function() {
                $("#MessageSpan").html($(this).fxEditableControl("hasEditedControls") ? "<span id='Span1' style='color:Red;font-weight:bold'>Edited</span>" : "<span id='Span2' style='color:Green;font-weight:normal'>Not Edited</span>");
            });

            //track edits or not
            $("#TrackEditCheckbox").change(function() {
                $("#slider").fxSlider("option", "trackedit", $("#TrackEditCheckbox").is(':checked') ? true : false);
            });

            $("#MaxValueButton").click(function() {
                $("#slider").fxSlider("option", "max", parseInt($("#MaxValueTextBox").val()));
            });

            $("#MinValueButton").click(function() {
                $("#slider").fxSlider("option", "min", $("#MinValueTextBox").val());
            });

            $("#MaxSlidableValueButton").click(function() {
                $("#slider").fxSlider("option", "slidableMax", $("#MaxSlidableValueTextBox").val());
            });

            $("#MinSlidableValueButton").click(function() {
                $("#slider").fxSlider("option", "slidableMin", $("#MinSlidableValueTextBox").val());
            });

            $("#StepButton").click(function() {
                $("#slider").fxSlider("option", "step", $("#StepTextBox").val());
            });

            $("#RegenSlider").click(function() {
                $("#slider").fxSlider("destroy");
                $("#slider").fxSlider({
                    value: $("#SelectValueTextBox").val().length ? parseInt($("#SelectValueTextBox").val()) : 5, //Get value from textbox if exists, else use default
                    min: $("#MinValueTextBox").val().length ? parseInt($("#MinValueTextBox").val()) : 0, 
                    max: $("#MaxValueTextBox").val().length ? parseInt($("#MaxValueTextBox").val()) : 10,
                    step: $("#StepTextBox").val().length ? parseInt($("#StepTextBox").val()) : 1, //size of drag step
                    slidableMin: $("#MinSlidableValueTextBox").val().length ? parseInt($("#MinSlidableValueTextBox").val()) : null, 
                    slidableMax: $("#MaxSlidableValueTextBox").val().length ? parseInt($("#MaxSlidableValueTextBox").val()) : null, 
                    change: function(event, arg) { 
                        $("#CurrentValueOnChangedSpan").text(arg.value);
                    }
                });
            });

            $("#slider").fxSlider({
                value: 5, //default value
                min: 0, //minimum value
                max: 10, //max value
                slidableMin: 1, //minimum sliding value
                slidableMax: 9, //max sliding value
                change: function(event, arg) { //do something when the value is changed
                    $("#CurrentValueOnChangedSpan").text(arg.value);
                }
            });
        </script>
    </div>

</body>
</html>

Se även

vanliga kontrolltjänster för Windows Azure Pack-tillägg
Windows tillägg för användargränssnitt i Azure Pack Management Portal

Dela via