Permalink
Browse files

Issue 3873: Adding option for clear search button text

  • Loading branch information...
bjohn465 committed Mar 21, 2012
1 parent 1203f5f commit 2ad16962caf43a9935b9bd49481426145b3e4040
@@ -86,7 +86,8 @@ <h2>Theming</h2>
<input type="search" name="search3" id="searchA" value="" data-theme="a" />
</div>
<h2>Setting the clear button text</h2>
<p>The text for the button used to clear the search input of text can be configured for all search inputs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.textinput.prototype.options.clearSearchButtonText</code> property to a string of your choosing.</p>
<h2>Calling the textinput plugin</h2>
@@ -60,7 +60,14 @@ <h2>Search input</h2>
<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
</dd>
</dl>
<dt><code>clearSearchButtonText</code> <em>string</em></dt>
<dd>
<p class="default">default: "clear text"</p>
<p>Sets the text used for the button that clears the search input of text.</p>
<pre><code>$('.selector').textinput(<strong>{ clearSearchButtonText: "custom value" }</strong>);</code></pre>
</dd>
</dl>
</form>
</div><!--/content-primary -->
@@ -13,7 +13,8 @@ $.widget( "mobile.textinput", $.mobile.widget, {
theme: null,
// This option defaults to true on iOS devices.
preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
initSelector: "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[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
initSelector: "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[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])",
clearSearchButtonText: "clear text"
},
_create: function() {
@@ -49,7 +50,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearSearchButtonText + "'>" + o.clearSearchButtonText + "</a>" )
.bind('click', function( event ) {
input
.val( "" )
@@ -56,6 +56,8 @@ <h2 id="qunit-userAgent"></h2>
<textarea id="keyup-autogrow">
</textarea>
<a href="external.html" id="external">external</a>
<input type="search" id="search-input">
</div>
</body>
</html>
@@ -58,4 +58,10 @@
}
]);
});
$.mobile.textinput.prototype.options.clearSearchButtonText = "custom value";
test( "\"clear text\" button for search inputs should use configured text", function(){
strictEqual( $( "#search-input" ).closest( ".ui-input-search" ).find( ".ui-input-clear" ).attr( "title" ), "custom value" );
});
})(jQuery);

0 comments on commit 2ad1696

Please sign in to comment.