Slider fxSlider (fx.slider.js)

Artigo
08/24/2015

Aplica-se a: Windows Azure Pack

o fxSlider permite ao utilizador selecionar um número dentro de uma escala arrastando o slider, ou digitando um valor na caixa à direita. Opcionalmente inclui uma lenda.

Windows Azure Pack fxSlider

Serviços Suportados

Serviço	Suportado
Desfazer/Redo	Yes
Validação	No

Widgets

$("Selector").fxSlider()

Propriedades

Nome	Tipo	Description
fx.fxSlider.options.inputId	String	Atributo de identificação do slider. Se não for fornecido, o atributo id não é adicionado.
fx.fxSlider.options.legendOptions	Objeto	Opções passadas para o widget lendário. Para mais informações, consulte Legend fxLegend (fx.legend.js).
fx.fxSlider.options.max	Número	O valor máximo do slider.
fx.fxSlider.options.min	Número	O valor mínimo do deslizador.
fx.fxSlider.options.slidableMax	Número	Valor máximo que o utilizador pode deslizar para o máximo. Se nulo, não há valor máximo.
fx.fxSlider.options.step	Número	Determina a quantidade de passos que o deslizador toma entre os valores mínimos e máximos.

Métodos

Nome	Descrição	Devoluções	Parâmetros
fx.fxSlider.destruir	Destrói o widget.	Nenhumas	Nenhuma

Sample

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

Consulte também

Windows Serviços de Controlo Comum de Extensão Azure Pack
extensões de interface de utilizador do portal de gestão de pacotes Windows Azure

Partilhar via