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

added a "clear" button to search input types

Browse source
This commit is contained in:
scottjehl 2010-10-05 23:54:51 -04:00
parent ccd3ffa761
commit 540e1f3fb8
2 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/jQuery.mobile.forms.textinput.css
View file

@ -6,8 +6,10 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
.ui-input-search { margin: 5px; padding: 0 0 0 30px; background-position: 6px 50%; background-repeat: no-repeat; }
.ui-input-search { margin: 5px; padding: 0 30px; background-position: 8px 50%; background-repeat: no-repeat; position: relative; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 8px; top: 50%; margin-top: -12px; }
.ui-input-search .ui-input-clear-hidden { display: none; }
/* orientation adjustments - incomplete!*/
@media screen and (min-width: 480px){

22
js/jQuery.mobile.forms.textinput.js
View file

@ -19,8 +19,30 @@ jQuery.fn.customTextInput = function(options){
input.addClass('ui-input-text');
var focusedEl = input;
//"search" input widget
if(o.search){
focusedEl = input.wrap('<div class="ui-input-search ui-btn-corner-all ui-body-c ui-btn-shadow ui-icon-search"></div>').parent();
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
.buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true})
.click(function(){
input.val('');
toggleClear();
return false;
})
.appendTo(focusedEl);
function toggleClear(){
if(input.val() == ''){
clearbtn.addClass('ui-input-clear-hidden');
}
else{
clearbtn.removeClass('ui-input-clear-hidden');
}
}
toggleClear();
input.keyup(toggleClear);
}
else{
input.addClass('ui-corner-all ui-body-c');