jquery-mobile/experiments/api-viewer/docs/select/index.html

<!DOCTYPE html>
<html lang='en'><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div data-role="page">
        <div data-role="header">
				<h1>.select()</h1>
  				
</div>
<div data-role="content" data-theme="c" id="select1">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.select( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
</h2>
<div class="  entry-details">
<p class="desc"><strong>Description: </strong>Bind an event handler to the "select" JavaScript event, or trigger that event on an element.</p>
<ul class="signatures">
<li class="signature" id="select-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select( handler(eventObject) )</h4>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="select"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select()</h4></li>
</ul>
<div class="longdesc">
<p>This method is a shortcut for <code>.bind('select', handler)</code> in the first variation, and <code>.trigger('select')</code> in the second.</p>
<p>The <code>select</code> event is sent to an element when the user makes a text selection inside it. This event is limited to <code>&lt;input type="text"&gt;</code> fields and <code>&lt;textarea&gt;</code> boxes.</p>
<p>For example, consider the HTML:</p>
<pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Hello there" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
<p>The event handler can be bound to the text input:</p>
<pre>$('#target').select(function() {
  alert('Handler for .select() called.');
});</pre>
<p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. We can trigger the event manually when another element is clicked:</p>
<pre>$('#other').click(function() {
  $('#target').select();
});</pre>
<p>After this code executes, clicks on the Trigger button will also alert the message:</p>
<p><span class="output">Handler for .select() called.</span></p>
<p>In addition, the default <code>select</code> action on the field will be fired, so the entire text field will be selected.</p>
<blockquote><p>The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.</p></blockquote>
</div>
<h3>Examples:</h3>
<div id="entry-examples" class="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">To do something when text in input boxes is selected:</span>
</h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
  p { color:blue; }
  div { color:red; }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;p&gt;

    Click and drag the mouse to select text in the inputs.
  &lt;/p&gt;
  &lt;input type="text" value="Some text" /&gt;
  &lt;input type="text" value="to test on" /&gt;

  &lt;div&gt;&lt;/div&gt;
&lt;script&gt;
    $(":input").select( function () { 
      $("div").text("Something was selected").show().fadeOut(1000); 
    });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">To trigger the select event on all input elements, try:</span>
</h4>
<pre><code class="example">$("input").select();</code></pre>
</div>
</div>
</div>
</div>

				</div>

</body></html>
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<!DOCTYPE html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<html lang='en'><head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>`
Big update: In starting markup, pages should now be identified with the attribute data-role="page". This allows us to then add ui-page programatically, hiding all non-active pages, and apply ui-page-active to one page at a time to show it. mobile.js is updated to find pages by this attribute now, instead of ui-page class. fixes issue 32 2010-09-18 16:20:35 +00:00			`<div data-role="page">`
updated markup to use data-role attrs in place of classes for header/content/footer 2010-09-21 14:58:54 +00:00			`<div data-role="header">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h1>.select()</h1>`

			`</div>`
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161 2010-10-12 19:50:28 +00:00			`<div data-role="content" data-theme="c" id="select1">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h2 class="jq-clearfix roundTop section-title">`
			`<span class="name">.select( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>`
			`</h2>`
			`<div class=" entry-details">`
			`<p class="desc"><strong>Description: </strong>Bind an event handler to the "select" JavaScript event, or trigger that event on an element.</p>`
			`<ul class="signatures">`
			`<li class="signature" id="select-handlereventObject">`
			`<h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select( handler(eventObject) )</h4>`
			`<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>`
			`</li>`
			`<li class="signature" id="select"><h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.select()</h4></li>`
			`</ul>`
			`<div class="longdesc">`
			`<p>This method is a shortcut for <code>.bind('select', handler)</code> in the first variation, and <code>.trigger('select')</code> in the second.</p>`
			`<p>The <code>select</code> event is sent to an element when the user makes a text selection inside it. This event is limited to <code><input type="text"></code> fields and <code><textarea></code> boxes.</p>`
			`<p>For example, consider the HTML:</p>`
			`<pre><form>`
			`<input id="target" type="text" value="Hello there" />`
			`</form>`
			`<div id="other">`
			`Trigger the handler`
			`</div></pre>`
			`<p>The event handler can be bound to the text input:</p>`
			`<pre>$('#target').select(function() {`
			`alert('Handler for .select() called.');`
			`});</pre>`
			`<p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. We can trigger the event manually when another element is clicked:</p>`
			`<pre>$('#other').click(function() {`
			`$('#target').select();`
			`});</pre>`
			`<p>After this code executes, clicks on the Trigger button will also alert the message:</p>`
			`<p><span class="output">Handler for .select() called.</span></p>`
			`<p>In addition, the default <code>select</code> action on the field will be fired, so the entire text field will be selected.</p>`
			`<blockquote><p>The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.</p></blockquote>`
			`</div>`
			`<h3>Examples:</h3>`
			`<div id="entry-examples" class="entry-examples">`
			`<div id="example-0">`
			`<h4>Example: <span class="desc">To do something when text in input boxes is selected:</span>`
			`</h4>`
			`<pre><code class="example demo-code"><!DOCTYPE html>`
			`<html>`
			`<head>`
			`<style>`
			`p { color:blue; }`
			`div { color:red; }`
			`</style>`
			`<script src="http://code.jquery.com/jquery-latest.js"></script>`
			`</head>`
			`<body>`
			`<p>`

			`Click and drag the mouse to select text in the inputs.`
			`</p>`
			`<input type="text" value="Some text" />`
			`<input type="text" value="to test on" />`

			`<div></div>`
			`<script>`
			`$(":input").select( function () {`
			`$("div").text("Something was selected").show().fadeOut(1000);`
			`});`
			`</script>`
			`</body>`
			`</html></code></pre>`
			`<h4>Demo:</h4>`
			`<div class="demo code-demo"></div>`
			`</div>`
			`<div id="example-1">`
			`<h4>Example: <span class="desc">To trigger the select event on all input elements, try:</span>`
			`</h4>`
			`<pre><code class="example">$("input").select();</code></pre>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`

			`</div>`

			`</body></html>`