Partager via

Zone de texte fxTextBox (fx.textbox.js)

  • Article

 

S’applique à : Windows Azure Pack

fxTextBox est une zone de texte qui prend en charge Common Control Services.

Windows Azure Pack fxTextBox

Services pris en charge

Service

Pris en charge

Annuler/Rétablir

Oui

Validation

Oui

Widgets

$("Selector").fxTextBox()

Propriétés

Nom

Type

Description

fx.fxTextBox.options.delayedTimerValidation

Number

Retarde la validation du nombre de millisecondes fourni.

fx.fxTextBox.options.validateOnBlur

Boolean

True déclenche la validation lorsque la zone de texte est floue.

fx.fxTextBox.options.validateOnKeyPress

Boolean

True déclenche la validation lorsqu’une touche est enfoncée.

Méthodes

Nom

Description

Retours

Paramètres

fx.fxTextBox.destroy

Détruit le widget.

Rien

None

fx.fxTextBox.validate

Valide le contrôle.

String

Exemple

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Text Box 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">
            <section id="simpleTextBox">
                <h2> Simple Textbox</h2>
                <input id="sample-textbox" type="text"/>
                <div>
                    <button id="sample-textbox-enable">
                        Enable</button>
                    <button id="sample-textbox-disable">
                        Disable</button>
                </div>
            </section>
            <br/>
            <section id="defaultValueTextbox">
                <h2>Textbox with default value</h2>
                <input id="sample-defaultValueTextbox" type="text"/>
            </section>
            <br/>
            <section id="submitTextbox">
                <h2>Submit Textbox</h2>
                <input id="sample-submitTextbox" type="text"/>
                <input type="button" onclick="sampleSubmitFunction();" value="Submit"/>
            </section>
        </div>

        <!-- Sample Script Code -->
        <div id="sampleScriptCodeContainer">
            <script type="text/javascript">
                //Initialize our controls
                $("#sample-textbox-enable").click(function() {
                    $("#sample-textbox").fxTextBox("enable");
                });

                $("#sample-textbox-disable").click(function() {
                    $("#sample-textbox").fxTextBox("disable");
                });

                $("#sample-textbox").fxTextBox({ value: ""});

                $("#sample-defaultValueTextbox").fxTextBox({ value: "my default value" });

                $("#sample-submitTextbox").fxTextBox({ value: "" });

                function sampleSubmitFunction() {
                    var submittedValue = $("#sample-submitTextbox").fxTextBox("value");
                    alert("You typed in '" + submittedValue +"'");
                }
            </script>
        </div>
    </body>
</html>

Voir aussi

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