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

Updated button to optimize readablity

Browse source
This commit is contained in:
Douglas Neiner 2010-09-29 11:56:41 -07:00
parent 012d79eb58
commit 61f3c3341f
1 changed files with 65 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
js/jQuery.mobile.buttonMarkup.js
View file

@ -5,46 +5,76 @@
* Note: Code is in draft form and is subject to change
*/
(function($){
$.fn.buttonMarkup = function(options){
return $(this).each(function(){
var el = $(this);
var o = $.extend({
theme: (function(){
//if data-theme attr is present
if(el.is('[data-theme]')){
return el.attr('data-theme');
}
//if not, find closest theme container
if(el.parents('body').length){
var themedParent = el.closest('[class*=ui-bar-]'); //this still catches ui-bar-blah...
return themedParent.length ? themedParent.attr('class').match(/ui-bar-([a-z])/)[1] : 'c';
}
else {
return 'c';
}
})(),
corners: true,
shadow: true,
iconshadow: true,
iconPos: el.attr('data-iconPos'),
icon: el.attr('data-icon'),
wrapperEls: 'span'
},options);
$.fn.buttonMarkup = function( options ){
return this.each( function() {
var el = $( this ),
o = $.extend( {}, {
theme: (function(){
//if data-theme attr is present
if(el.is('[data-theme]')){
return el.attr('data-theme');
}
//if not, find closest theme container
if(el.parents('body').length){
var themedParent = el.closest('[class*=ui-bar-]'); //this still catches ui-bar-blah...
return themedParent.length ? themedParent.attr('class').match(/ui-bar-([a-z])/)[1] : 'c';
}
else {
return 'c';
}
})(),
iconPos: el.attr('data-iconPos'),
icon: el.attr('data-icon')
}, $.fn.buttonMarkup.defaults, options),
// Classes Defined
buttonClass = "ui-btn ui-btn-up-" + o.theme,
innerClass = "ui-btn-inner",
iconClass;
if(o.icon){
o.icon = 'ui-icon-'+o.icon;
if(!o.iconPos){ o.iconPos = 'left'; }
if (o.icon) {
o.icon = 'ui-icon-' + o.icon;
o.iconPos = o.iconPos || 'left';
buttonClass += " ui-btn-icon-" + o.iconPos;
iconClass = "ui-icon " + o.icon;
if (o.shadow) { iconClass += " ui-icon-shadow" }
}
if (o.corners) {
buttonClass += " ui-btn-corner-all";
innerClass += " ui-btn-corner-all";
}
if (o.shadow) {
buttonClass += " ui-shadow";
}
el
.attr('data-theme', o.theme)
.addClass('ui-btn ui-btn-up-'+ o.theme + (o.corners?' ui-btn-corner-all':'') + (o.iconPos? ' ui-btn-icon-'+o.iconPos : '')+ (o.shadow? ' ui-shadow' : ''))
.wrapInner('<'+o.wrapperEls+' class="ui-btn-text"></'+o.wrapperEls+'>')
.prepend(o.iconPos ? '<span class="ui-icon '+o.icon+ (o.shadow? ' ui-icon-shadow' : '')+'"></span>': '')
.wrapInner('<'+o.wrapperEls+' class="ui-btn-inner '+ (o.corners?' ui-btn-corner-all':'') +'"></'+o.wrapperEls+'>')
.clickable();
.attr( 'data-theme', o.theme )
.addClass( buttonClass )
.wrapInner( $( '<' + wrapperEls + '>', { className: "ui-btn-text" } ) );
if (o.icon) {
el.prepend( $( '<span>', { className: iconClass } ) );
}
el.wrapInner( $('<' + wrapperEls + '>', { className: innerClass }) );
el.clickable();
});
};
$.fn.buttonMarkup.defaults = {
corners: true,
shadow: true,
iconshadow: true,
wrapperEls: 'span'
};
})(jQuery);