Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

jQuery core style guide conformance: jquery.mobile.forms.textinput.js

Browse source
This commit is contained in:
Rick Waldron 2011-06-28 21:20:52 -04:00
parent 2a232a06e0
commit e44f553a64
1 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
js/jquery.mobile.forms.textinput.js
View file

@ -4,94 +4,109 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
(function( $, undefined ) {
$.widget( "mobile.textinput", $.mobile.widget, {
options: {
theme: null
},
_create: function(){
_create: function() {
var input = this.element,
o = this.options,
theme = o.theme,
themeclass;
themedParent, themeclass, themeLetter, focusedEl, clearbtn;
if ( !theme ) {
var themedParent = this.element.closest("[class*='ui-bar-'],[class*='ui-body-']"),
themeLetter = themedParent.length && /ui-(bar|body)-([a-z])/.exec( themedParent.attr("class") ),
theme = themeLetter && themeLetter[2] || "c";
}
themedParent = this.element.closest( "[class*='ui-bar-'],[class*='ui-body-']" );
themeLetter = themedParent.length && /ui-(bar|body)-([a-z])/.exec( themedParent.attr( "class" ) );
theme = themeLetter && themeLetter[2] || "c";
}
themeclass = " ui-body-" + theme;
$('label[for="'+input.attr('id')+'"]').addClass('ui-input-text');
input.addClass('ui-input-text ui-body-'+ o.theme);
var focusedEl = input;
$( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
input.addClass("ui-input-text ui-body-"+ o.theme );
focusedEl = input;
//"search" input 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 +'"></div>').parent();
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
.tap(function( e ){
input.val('').focus();
input.trigger('change');
clearbtn.addClass('ui-input-clear-hidden');
e.preventDefault();
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 + "'></div>" ).parent();
clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
.tap(function( event ) {
input.val( "" ).focus();
input.trigger( "change" );
clearbtn.addClass( "ui-input-clear-hidden" );
event.preventDefault();
})
.appendTo(focusedEl)
.buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true});
function toggleClear(){
if(input.val() == ''){
clearbtn.addClass('ui-input-clear-hidden');
}
else{
clearbtn.removeClass('ui-input-clear-hidden');
.appendTo( focusedEl )
.buttonMarkup({
icon: "delete",
iconpos: "notext",
corners: true,
shadow: true
});
function toggleClear() {
if ( !input.val() ) {
clearbtn.addClass( "ui-input-clear-hidden" );
} else {
clearbtn.removeClass( "ui-input-clear-hidden" );
}
}
toggleClear();
input.keyup(toggleClear);
input.focus(toggleClear);
input.keyup( toggleClear )
.focus( toggleClear );
} else {
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
}
else{
input.addClass('ui-corner-all ui-shadow-inset' + themeclass);
}
input
.focus(function(){
focusedEl.addClass('ui-focus');
input.focus(function() {
focusedEl.addClass( "ui-focus" );
})
.blur(function(){
focusedEl.removeClass('ui-focus');
});
//autogrow
if ( input.is('textarea') ) {
focusedEl.removeClass( "ui-focus" );
});
// Autogrow
if ( input.is( "textarea" ) ) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyup = function() {
var scrollHeight = input[0].scrollHeight,
clientHeight = input[0].clientHeight;
var scrollHeight = input[ 0 ].scrollHeight,
clientHeight = input[ 0 ].clientHeight;
if ( clientHeight < scrollHeight ) {
input.css({ height: (scrollHeight + extraLineHeight) });
input.css({
height: (scrollHeight + extraLineHeight)
});
}
},
keyupTimeout;
input.keyup(function() {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
});
}
},
disable: function(){
( this.element.attr("disabled",true).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).addClass("ui-disabled");
( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
this.element.parent() : this.element ).addClass( "ui-disabled" );
},
enable: function(){
( this.element.attr("disabled", false).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).removeClass("ui-disabled");
( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
this.element.parent() : this.element ).removeClass( "ui-disabled" );
}
});
})( jQuery );