mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-19 05:41:00 +00:00
added to repo
This commit is contained in:
maggiewachs
parent
9c5442038b
commit
afe1ea5a9a
4 changed files with 405 additions and 0 deletions
100
docs/forms/search/events.html
Normal file
100
docs/forms/search/events.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input events</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Search input</h1>
|
||||
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Search input</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
|
||||
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
||||
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$(".mySearchInput").bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>The text input plugin has the following custom events:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>create</code> triggered when a text input is created</dt>
|
||||
<dd>
|
||||
|
||||
<pre><code>
|
||||
$( ".selector" ).textinput({
|
||||
create: function(event, ui) { ... }
|
||||
});
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Form elements</li>
|
||||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
||||
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
||||
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer" class="footer-docs" data-theme="c">
|
||||
<p>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
109
docs/forms/search/index.html
Executable file
109
docs/forms/search/index.html
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Search input</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Search input</h1>
|
||||
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Search input</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
|
||||
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
||||
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </p>
|
||||
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>The search input is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
</div>
|
||||
|
||||
<p>Themed variation:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="searchA">Search Input:</label>
|
||||
<input type="search" name="searchA" id="searchA" value="" data-theme="a" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Calling the textinput plugin</h2>
|
||||
|
||||
<p>This plugin will auto initialize on any page that contains a text input with the <code>type="search"</code> attribute, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on a selector, just like any jQuery plugin:</p>
|
||||
<pre><code>
|
||||
$('.mySearchInput').textinput();
|
||||
</code></pre>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Form elements</li>
|
||||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
||||
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
||||
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer" class="footer-docs" data-theme="c">
|
||||
<p>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
docs/forms/search/methods.html
Normal file
97
docs/forms/search/methods.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input methods</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Search input</h1>
|
||||
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Search input</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
|
||||
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
||||
<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>The text input plugin has the following methods:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>enable</code> enable a disabled text input</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('.selector').textinput('enable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>disable</code> disable a text input</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('.selector').textinput('disable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Form elements</li>
|
||||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
||||
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
||||
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer" class="footer-docs" data-theme="c">
|
||||
<p>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
99
docs/forms/search/options.html
Normal file
99
docs/forms/search/options.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input options</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-interior">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Search input</h1>
|
||||
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Search input</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
|
||||
<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
|
||||
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>The text input plugin has the following options:</p>
|
||||
|
||||
<dl>
|
||||
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
|
||||
<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
|
||||
<pre><code>$( document ).bind( "mobileinit", function(){
|
||||
<strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
|
||||
});
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>theme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
|
||||
<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<h3>More in this section</h3>
|
||||
|
||||
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
||||
|
||||
<li data-role="list-divider">Form elements</li>
|
||||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
||||
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
||||
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer" class="footer-docs" data-theme="c">
|
||||
<p>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in a new issue