diff --git a/_form-controls.html b/_form-controls.html index c8461090..a1b1a8dd 100644 --- a/_form-controls.html +++ b/_form-controls.html @@ -46,7 +46,7 @@
- +
@@ -59,6 +59,11 @@
+
+ + +
+
+ + @@ -105,6 +110,16 @@ + +
+ Same with theme change: + + + + + + +
@@ -159,7 +174,7 @@
- diff --git a/css/jquery.mobile.button.css b/css/jquery.mobile.button.css index bc8e811d..878c5361 100644 --- a/css/jquery.mobile.button.css +++ b/css/jquery.mobile.button.css @@ -4,6 +4,7 @@ * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; } +.ui-btn:focus, .ui-btn a:focus { outline: none; } .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; } .ui-btn-inline { display: inline-block; } .ui-btn-inner { padding: .6em 25px; display: block; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } diff --git a/css/jquery.mobile.forms.textinput.css b/css/jquery.mobile.forms.textinput.css index a2e4f519..3d640e45 100644 --- a/css/jquery.mobile.forms.textinput.css +++ b/css/jquery.mobile.forms.textinput.css @@ -4,7 +4,7 @@ * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ 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%; } +input.ui-input-text, textarea.ui-input-text { background-image: none; 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 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; } diff --git a/css/jquery.mobile.theme.css b/css/jquery.mobile.theme.css index b14201c6..93f13e46 100755 --- a/css/jquery.mobile.theme.css +++ b/css/jquery.mobile.theme.css @@ -103,8 +103,6 @@ a.ui-link-inherit { text-decoration: none !important; } .ui-btn-active { border: 1px solid #145072; background: #387bbe; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; background-image: -moz-linear-gradient(top, #4e89c5, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4e89c5),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; /*-webkit-tap-highlight-color: #387bbe;*/ } .ui-btn-active a.ui-link-inherit { color: #fff; } -.ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; } - .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); } @@ -188,4 +186,8 @@ a.ui-link-inherit { text-decoration: none !important; } .ui-shadow { -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3); } .ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); box-shadow: 0px 1px 0 rgba(255,255,255,.3); } +.ui-shadow-inset { -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); } .ui-icon-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4); box-shadow: 0px 1px 0 rgba(255,255,255,.4); } + +/* set focus state last */ +.ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; } diff --git a/js/jquery.mobile.clickable.js b/js/jquery.mobile.clickable.js index 74c56963..e66a36ed 100644 --- a/js/jquery.mobile.clickable.js +++ b/js/jquery.mobile.clickable.js @@ -15,17 +15,11 @@ $.fn.clickable = function(){ .mouseup(function(){ $(this).removeClass('ui-btn-down-'+theme).addClass('ui-btn-up-'+theme); }) - .bind('mouseover',function(){ + .bind('mouseover focus',function(){ $(this).removeClass('ui-btn-up-'+theme).addClass('ui-btn-hover-'+theme); }) - .bind('mouseout',function(){ + .bind('mouseout blur',function(){ $(this).removeClass('ui-btn-hover-'+theme).addClass('ui-btn-up-'+theme); - }) - .bind('focus',function(){ - $(this).addClass('ui-focus'); - }) - .bind('blur',function(){ - $(this).removeClass('ui-focus'); }); }); }; diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js index df36b906..e3e8f12d 100644 --- a/js/jquery.mobile.forms.checkboxradio.js +++ b/js/jquery.mobile.forms.checkboxradio.js @@ -11,14 +11,14 @@ $.fn.customCheckboxRadio = function(options){ var input = $(this); var o = $.extend({ - theme: 'b', - icon: !input.parents('[data-type="horizontal"]').length, + theme: $(this).data('theme'), + icon: $(this).data('icon') || !input.parents('[data-type="horizontal"]').length, checkedicon: 'ui-icon-'+input.attr('type')+'-on', uncheckedicon: 'ui-icon-'+input.attr('type')+'-off' },options); // get the associated label using the input's id - var label = $('label[for='+input.attr('id')+']').buttonMarkup({iconpos: o.icon ? 'left' : '', icon: o.icon ? o.uncheckedicon : null, shadow: false}); + var label = $('label[for='+input.attr('id')+']').buttonMarkup({iconpos: o.icon ? 'left' : '', theme: o.theme, icon: o.icon ? o.uncheckedicon : null, shadow: false}); var icon = label.find('.ui-icon'); diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 84b442a3..e8ad1b8e 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -17,7 +17,8 @@ $.fn.customSelect = function(options){ //extendable options o = $.extend({ closeText: "close", - chooseText: label.text() + chooseText: label.text(), + theme: select.data("theme") }, options), buttonId = selectID + "-button", @@ -37,7 +38,8 @@ $.fn.customSelect = function(options){ .insertBefore( select ) .buttonMarkup({ iconpos: 'right', - icon: 'arrow-d' + icon: 'arrow-d', + theme: o.theme }), menuPage = $( "
" + "
" + diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js index 65b34c45..93f01bf6 100644 --- a/js/jquery.mobile.forms.slider.js +++ b/js/jquery.mobile.forms.slider.js @@ -8,6 +8,9 @@ $.fn.slider = function(options){ return this.each(function(){ var control = $(this), + o = $.extend({ + theme: control.data("theme") || 'c' + },options), cType = control[0].nodeName.toLowerCase(), selectClass = (cType == 'select') ? 'ui-slider-switch' : '', controlID = control.attr('id'), @@ -18,10 +21,10 @@ $.fn.slider = function(options){ max = (cType == 'input') ? parseFloat(control.attr('max')) : control.find('option').length-1, percent = val / (max - min) * 100, snappedPercent = percent, - slider = $('
'), + slider = $('
'), handle = $('') .appendTo(slider) - .buttonMarkup({corners: true, theme: 'c', shadow: true}) + .buttonMarkup({corners: true, theme: o.theme, shadow: true}) .attr({ 'role': 'slider', 'aria-valuemin': min, @@ -40,7 +43,7 @@ $.fn.slider = function(options){ control.find('option').each(function(i){ var side = (i==0) ?'b':'a', corners = (i==0) ? 'right' :'left', - theme = (i==0) ?'c':'b'; + theme = (i==0) ? o.theme :'b'; $('
').prependTo(slider); $(''+$(this).text()+'').prependTo(handle); }); diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index 4a976f2e..b91ccced 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -10,13 +10,13 @@ jQuery.fn.customTextInput = function(options){ var input = $(this); var o = $.extend({ - search: input.is('[type="search"],[data-type="search"]') - //defaultTheme: "a" + search: input.is('[type="search"],[data-type="search"]'), + theme: input.data("theme") || "c" }, options); $('label[for='+input.attr('id')+']').addClass('ui-input-text'); - input.addClass('ui-input-text'); + input.addClass('ui-input-text ui-shadow-inset ui-body-'+ o.theme); var focusedEl = input; @@ -46,7 +46,7 @@ jQuery.fn.customTextInput = function(options){ input.keyup(toggleClear); } else{ - input.addClass('ui-corner-all ui-body-c'); + input.addClass('ui-corner-all'); } input diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index ee52ad26..3735ba6c 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -25,7 +25,13 @@ $.widget( "mobile.listview", $.mobile.widget, { //create listview markup this.element .addClass( "ui-listview" ) + .attr( "role", "listbox" ) .find( "li" ) + .attr("role","option") + .attr("tabindex","-1") + .focus(function(){ + $(this).attr("tabindex","0"); + }) .each(function() { var $li = $( this ), role = $li.data( "role" ), @@ -58,8 +64,55 @@ $.widget( "mobile.listview", $.mobile.widget, { else { $li.addClass( "ui-li-static ui-btn-up-" + o.theme ); } - }); - + }) + .eq(0) + .attr("tabindex","0"); + + + //keyboard events for menu items + this.element.keydown(function(event){ + //switch logic based on which key was pressed + switch(event.keyCode){ + //up or left arrow keys + case 38: + //if there's a previous option, focus it + if( $(event.target).closest('li').prev().length ){ + $(event.target).blur().attr("tabindex","-1").closest('li').prev().find('a').eq(0).focus(); + } + //prevent native scroll + return false; + break; + //down or right arrow keys + case 40: + + //if there's a next option, focus it + if( $(event.target).closest('li').next().length ){ + $(event.target).blur().attr("tabindex","-1").closest('li').next().find('a').eq(0).focus(); + } + //prevent native scroll + return false; + break; + case 39: + if( $(event.target).closest('li').find('a.ui-li-link-alt').length ){ + $(event.target).blur().closest('li').find('a.ui-li-link-alt').eq(0).focus(); + } + return false; + break; + case 37: + if( $(event.target).closest('li').find('a.ui-link-inherit').length ){ + $(event.target).blur().closest('li').find('a.ui-link-inherit').eq(0).focus(); + } + return false; + break; + //if enter or space is pressed, trigger click + case 13: + case 32: + $(event.target).trigger('click'); //should trigger select + return false; + break; + } + }); + if ( o.inset ) { this.element .addClass( "ui-listview-inset" )