From b9127f6eb3a1b4df337fe16fb63c89cc6d461d8f Mon Sep 17 00:00:00 2001 From: Omar Vargas Date: Thu, 28 Jul 2011 16:37:29 -0500 Subject: [PATCH 1/2] Text Input plugin with new API docs format --- docs/forms/selects/index.html | 2 +- docs/forms/texts/events.html | 101 ++++++++++++++++ docs/forms/{ => texts}/forms-text.html | 0 docs/forms/texts/index.html | 158 +++++++++++++++++++++++++ docs/forms/texts/methods.html | 97 +++++++++++++++ docs/forms/texts/options.html | 90 ++++++++++++++ 6 files changed, 447 insertions(+), 1 deletion(-) create mode 100644 docs/forms/texts/events.html rename docs/forms/{ => texts}/forms-text.html (100%) create mode 100755 docs/forms/texts/index.html create mode 100644 docs/forms/texts/methods.html create mode 100644 docs/forms/texts/options.html diff --git a/docs/forms/selects/index.html b/docs/forms/selects/index.html index 35bcec24..70bde037 100644 --- a/docs/forms/selects/index.html +++ b/docs/forms/selects/index.html @@ -458,7 +458,7 @@ myselect.selectmenu("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/texts/events.html b/docs/forms/texts/events.html new file mode 100644 index 00000000..090a2455 --- /dev/null +++ b/docs/forms/texts/events.html @@ -0,0 +1,101 @@ + + + + + + jQuery Mobile Docs - Text Input events + + + + + + + + + +
    + +
    +

    Text inputs

    + Home +
    + +
    +
    + +
    + +

    Text inputs

    + + + +

    Since the native text inputs and textareas are used as a proxy for the custom text inputs, you can watch for events on the original, native text input and textareas instead of needing to go through the text input plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.

    + 
     
+$( ".selector" ).bind( "change", function(event, ui) {
+  ...
+});
+
    + +

    The text input plugin has the following custom events:

    + +
    + +
    create triggered when a text input is created
    +
    +

    This event is used to find out when a custom text input was created. It is not used to create a custom text input. The text input create event can be used like this:

    + + 
    
+$( ".selector" ).textinput({
+   create: function(event, ui) { ... }
+});		
+
    +
    + +
    + +
    +
    + +
    + +
    + +

    More in this section

    + + +
    +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/forms-text.html b/docs/forms/texts/forms-text.html similarity index 100% rename from docs/forms/forms-text.html rename to docs/forms/texts/forms-text.html diff --git a/docs/forms/texts/index.html b/docs/forms/texts/index.html new file mode 100755 index 00000000..5f84e369 --- /dev/null +++ b/docs/forms/texts/index.html @@ -0,0 +1,158 @@ + + + + + + jQuery Mobile Docs - Text inputs + + + + + + + + + +
    + +
    +

    Text inputs

    + Home +
    + +
    +
    + +
    + +

    Text inputs

    + + + + +

    Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.

    + +

    Text inputs

    +

    To collect standard alphanmeric text, use an input with a type="text" attribute. It's important to set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

    + +
    	
+<div data-role="fieldcontain">
+    <label for="name">Text Input:</label>
+    <input type="text" name="name" id="name" value=""  />
+</div>	
+
    + +

    The text input is displayed like this:

    +
    + + +
    + + + +

    Password inputs

    +

    For password fields, use an input with a type="password" attribute. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

    + +
    	
+<div data-role="fieldcontain">
+    <label for="password">Password Input:</label>
+    <input type="password" name="password" id="password" value="" />
+</div>	
+
    + +

    The password input is displayed like this:

    +
    + + +
    + + +

    More standard HTML5 input types

    +

    In jQuery Mobile, you can use new HTML5 input types such as email, tel, number, and more. We actively degrade certain types to type=text (currently, range and search) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the page plugin's options.

    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +

    Textareas

    +

    For multi-line text inputs, use a textarea element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device.

    +

    Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

    + +
    	
+<div data-role="fieldcontain">
+	<label for="textarea">Textarea:</label>
+	<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+</div>
+
    + +

    The textarea is displayed like this and will grow as you type:

    +
    + + +
    + + + +
    + +
    + +
    + +
    + +

    More in this section

    + + +
    +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + diff --git a/docs/forms/texts/methods.html b/docs/forms/texts/methods.html new file mode 100644 index 00000000..58310964 --- /dev/null +++ b/docs/forms/texts/methods.html @@ -0,0 +1,97 @@ + + + + + + jQuery Mobile Docs - Text Input methods + + + + + + + + + +
    + +
    +

    Text inputs

    + Home +
    + +
    +
    + +
    + +

    Text inputs

    + + + +

    The text input plugin has the following methods:

    + +
    + +
    enable enable a disabled text input.
    +
    + 
    
+$('select').selectmenu('enable');			
+
    +
    + +
    disable disable a text input.
    +
    + 
    
+$('select').selectmenu('disable');			
+
    +
    + +
    + +
    +
    + +
    + +
    + +

    More in this section

    + + +
    +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/texts/options.html b/docs/forms/texts/options.html new file mode 100644 index 00000000..c44cac5a --- /dev/null +++ b/docs/forms/texts/options.html @@ -0,0 +1,90 @@ + + + + + + jQuery Mobile Docs - Text Input options + + + + + + + + + +
    + +
    +

    Text inputs

    + Home +
    + +
    +
    + +
    + +

    Text inputs

    + + + +

    The text input plugin has the following options:

    + +
    + +
    theme string
    +
    +

    default: null, inherited from parent

    +

    Sets the theme swatch color scheme for the text input element. This is a single letter from a-z that maps to the swatches included in your theme. By default, a text input will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: data-theme="a"

    + 
    $('.selector').textinput({ theme: "a" });
    +
    + +
    + +
    +
    + +
    + +
    + +

    More in this section

    + + +
    +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + From b13e9cede5d5539b7efc23a3b6613518c9501261 Mon Sep 17 00:00:00 2001 From: Omar Vargas Date: Thu, 28 Jul 2011 18:00:52 -0500 Subject: [PATCH 2/2] Update text input plugin link --- docs/forms/docs-forms.html | 2 +- docs/forms/forms-all-native.html | 2 +- docs/forms/forms-all.html | 2 +- docs/forms/forms-checkboxes.html | 2 +- docs/forms/forms-radiobuttons.html | 2 +- docs/forms/forms-sample-response.php | 2 +- docs/forms/forms-sample-selfsubmit.php | 2 +- docs/forms/forms-sample.html | 2 +- docs/forms/forms-search.html | 4 ++-- docs/forms/forms-slider.html | 2 +- docs/forms/forms-switch.html | 2 +- docs/forms/forms-themes.html | 2 +- docs/forms/index.html | 2 +- docs/forms/plugin-eventsmethods.html | 3 +-- docs/forms/selects/events.html | 2 +- docs/forms/selects/methods.html | 2 +- docs/forms/selects/options.html | 2 +- 17 files changed, 18 insertions(+), 19 deletions(-) diff --git a/docs/forms/docs-forms.html b/docs/forms/docs-forms.html index a2f6a9d5..18e179ad 100755 --- a/docs/forms/docs-forms.html +++ b/docs/forms/docs-forms.html @@ -128,7 +128,7 @@ myswitch .slider("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-all-native.html b/docs/forms/forms-all-native.html index c8814941..4aa49dc8 100755 --- a/docs/forms/forms-all-native.html +++ b/docs/forms/forms-all-native.html @@ -218,7 +218,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-all.html b/docs/forms/forms-all.html index 53b1b90f..96744295 100755 --- a/docs/forms/forms-all.html +++ b/docs/forms/forms-all.html @@ -216,7 +216,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-checkboxes.html b/docs/forms/forms-checkboxes.html index 9b7835dc..8d70500b 100755 --- a/docs/forms/forms-checkboxes.html +++ b/docs/forms/forms-checkboxes.html @@ -124,7 +124,7 @@ $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-radiobuttons.html b/docs/forms/forms-radiobuttons.html index d650818e..a6c674d1 100755 --- a/docs/forms/forms-radiobuttons.html +++ b/docs/forms/forms-radiobuttons.html @@ -128,7 +128,7 @@ $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-sample-response.php b/docs/forms/forms-sample-response.php index 696f3b77..7ac525b4 100755 --- a/docs/forms/forms-sample-response.php +++ b/docs/forms/forms-sample-response.php @@ -49,7 +49,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-sample-selfsubmit.php b/docs/forms/forms-sample-selfsubmit.php index d4120512..48d30c44 100755 --- a/docs/forms/forms-sample-selfsubmit.php +++ b/docs/forms/forms-sample-selfsubmit.php @@ -50,7 +50,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-sample.html b/docs/forms/forms-sample.html index 203b23e3..a23c084b 100755 --- a/docs/forms/forms-sample.html +++ b/docs/forms/forms-sample.html @@ -62,7 +62,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-search.html b/docs/forms/forms-search.html index 3462a31f..37a85311 100755 --- a/docs/forms/forms-search.html +++ b/docs/forms/forms-search.html @@ -66,7 +66,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • @@ -92,4 +92,4 @@ - \ No newline at end of file + diff --git a/docs/forms/forms-slider.html b/docs/forms/forms-slider.html index 511b8033..95c43aec 100755 --- a/docs/forms/forms-slider.html +++ b/docs/forms/forms-slider.html @@ -76,7 +76,7 @@ $("input[type=range]").val(60).slider("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-switch.html b/docs/forms/forms-switch.html index 9308d065..3d57b9c4 100755 --- a/docs/forms/forms-switch.html +++ b/docs/forms/forms-switch.html @@ -73,7 +73,7 @@ myswitch .slider("refresh");
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/forms-themes.html b/docs/forms/forms-themes.html index 8139b806..6d22a781 100755 --- a/docs/forms/forms-themes.html +++ b/docs/forms/forms-themes.html @@ -377,7 +377,7 @@
  • Form elements
  • Form basics
  • Form element gallery
    • -
  • Text inputs
    • +
  • Text inputs
  • Search inputs
  • Slider
  • Flip toggle switch
    • diff --git a/docs/forms/index.html b/docs/forms/index.html index 9b0571ba..d5643913 100755 --- a/docs/forms/index.html +++ b/docs/forms/index.html @@ -27,7 +27,7 @@