Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-17 12:51:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactored $.mobilize further to optimize form and controlgroup init. Added some notes

Browse source
This commit is contained in:
jzaefferer 2010-09-27 20:28:47 +02:00
parent 6eee755ab7
commit f148dbdd69
1 changed files with 28 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
js/jQuery.mobile.js
View file

@ -247,7 +247,24 @@
var $el = $(this);
//hide no-js content
$el.find('[data-role="nojs"]').addClass('ui-nojs');
$el.find('[data-role="nojs"]').addClass('ui-nojs');
$el.find('input[type=radio],input[type=checkbox]').customCheckboxRadio();
$el.find('button, input[type=submit], input[type=reset], input[type=image]').customButton();
$el.find('input[type=text],input[type=number],input[type=password],textarea').customTextInput();
$el.find("input, select").filter('[data-role="slider"]').slider();
$el.find('select').not('[data-role="slider"]').customSelect();
/*temporary datepicker workaround */
$el.find('input[type=date]').hide().after( $('<div />').datepicker() );
$('.ui-datepicker-header').addClass('ui-body-c ui-corner-top').removeClass('ui-corner-all');
$('.ui-datepicker-prev').buttonMarkup({iconPos: 'notext', icon: 'arrow-l', shadow: true, corners: true});
$('.ui-datepicker-next').buttonMarkup({iconPos: 'notext', icon: 'arrow-r', shadow: true, corners: true});
$('.ui-datepicker-calendar thead').remove();
$('.ui-datepicker-calendar .ui-btn-text span').attr('class','');
$('.ui-datepicker-calendar td').addClass('ui-btn-up-c');
$('.ui-datepicker-calendar a').buttonMarkup({corners: false, shadow: false});
/* //temporary datepicker workaround */
//pre-find data els
var $dataEls = $el.find('[data-role]').andSelf().each(function() {
@ -268,51 +285,21 @@
case 'ajaxform':
$this[role]();
break;
case 'controlgroup':
// FIXME for some reason this has to come before the form control stuff (see above)
$this.controlgroup({
direction: $this.attr("data-type")
});
break;
}
});
//fix toolbars
$el.fixHeaderFooter();
//form elements
var checksradios = 'input[type=radio],input[type=checkbox]',
buttonInputs = 'button, input[type=submit], input[type=reset], input[type=image]',
textInputs = 'input[type=text],input[type=number],input[type=date],input[type=password],textarea',
dateInputs = 'input[type=date]',
sliders = '[data-role="slider"]',
selects = 'select';
$formEls = $el.find( [checksradios, buttonInputs, textInputs, dateInputs, sliders, selects].join(',') ).not('.ui-nojs');
$formEls.filter(checksradios).customCheckboxRadio();
//custom buttons
$formEls.filter(buttonInputs).customButton();
//custom text inputs
$formEls.filter(textInputs).customTextInput();
/*temporary datepicker workaround */
$formEls.filter(dateInputs).hide().after( $('<div />').datepicker() );
$('.ui-datepicker-header').addClass('ui-body-c ui-corner-top').removeClass('ui-corner-all');
$('.ui-datepicker-prev').buttonMarkup({iconPos: 'notext', icon: 'arrow-l', shadow: true, corners: true});
$('.ui-datepicker-next').buttonMarkup({iconPos: 'notext', icon: 'arrow-r', shadow: true, corners: true});
$('.ui-datepicker-calendar thead').remove();
$('.ui-datepicker-calendar .ui-btn-text span').attr('class','');
$('.ui-datepicker-calendar td').addClass('ui-btn-up-c');
$('.ui-datepicker-calendar a').buttonMarkup({corners: false, shadow: false});
/* //temporary datepicker workaround */
//sliders
$formEls.filter(sliders).slider();
//selects
$formEls.filter(selects).not('[data-role="slider"]').customSelect();
//vertical controlgroups
$dataEls.filter('[data-role="controlgroup"]:not([data-type="horizontal"])').controlgroup();
//horizontal controlgroups
$dataEls.filter('[data-role="controlgroup"][data-type="horizontal"]').controlgroup({direction: 'horizontal'});
//add back buttons to headers that don't have them
// FIXME make that optional?
// TODO don't do that on devices that have a native back button?
var backBtn = $el.find('.ui-header a.ui-back');
if(!backBtn.length){
backBtn = jQuery('<a href="#" class="ui-back" data-icon="arrow-l"></a>').appendTo($el.find('.ui-header'));
@ -325,12 +312,13 @@
//make all back buttons mimic the back button (pre-js, these links are usually "home" links)
backBtn
.click(function(){
// FIXME if you navigated from some page directly to subpage (ala .../#_form-controls.html), back button will actually go to the previous page, instead of the parent page
history.go(-1);
return false;
})
.find('.ui-btn-text').text(backBtnText);
$el.attr('data-mobilized',true);
$el.attr('data-mobilized', true);
});
};