Share via

Text Box fxTextBox (fx.textbox.js)

 

Applies To: Windows Azure Pack

fxTextBox is a text box with support for Common Control Services.

Windows Azure Pack fxTextBox

Supported Services

Service

Supported

Undo/Redo

Yes

Validation

Yes

Widgets

$("Selector").fxTextBox()

Properties

Name

Type

Description

fx.fxTextBox.options.delayedTimerValidation

Number

Delays validation for the supplied number of milliseconds.

fx.fxTextBox.options.validateOnBlur

Boolean

True triggers validation when textbox is blurred.

fx.fxTextBox.options.validateOnKeyPress

Boolean

True triggers validation when a key is pressed.

Methods

Name

Description

Returns

Parameters

fx.fxTextBox.destroy

Destroys the widget.

Nothing

None

fx.fxTextBox.validate

Validates the control.

String

Sample

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

See Also

Windows Azure Pack Extension Common Control Services
Windows Azure Pack Management Portal User Interface Extensions