Slider fxSlider (fx.slider.js)

Article
08/24/2015

S’applique à : Windows Azure Pack

fxSlider permet à l’utilisateur de sélectionner un nombre dans une échelle en faisant glisser le curseur ou en tapant une valeur dans la zone à droite. Inclut éventuellement une légende.

Windows Azure Pack fxSlider

Services pris en charge

Service	Pris en charge
Annuler/Rétablir	Yes
Validation	Non

Widgets

$("Selector").fxSlider()

Propriétés

Nom	Type	Description
fx.fxSlider.options.inputId	String	Attribut d’ID du curseur. S’il n’est pas fourni, l’attribut id n’est pas ajouté.
fx.fxSlider.options.legendOptions	Object	Options passées au widget de légende. Pour plus d’informations, consultez Legend fxLegend (fx.legend.js).
fx.fxSlider.options.max	Number	Valeur maximale du curseur.
fx.fxSlider.options.min	Number	Valeur minimale du curseur.
fx.fxSlider.options.slidableMax	Number	Valeur maximale que l’utilisateur peut glisser au maximum. Si la valeur est null, il n’existe aucune valeur maximale.
fx.fxSlider.options.step	Number	Détermine la quantité d’étapes effectuées par le curseur entre les valeurs minimales et maximales.

Méthodes

Nom	Description	Retours	Paramètres
fx.fxSlider.destroy	Détruit le widget.	Rien	None

Exemple

<!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>

Voir aussi

Windows Azure Pack Extension Common Control Services
Windows extensions d’interface utilisateur du portail d’administration Azure Pack

Partager via