From 5cc81797ba533d099e5bc06aa30d93b89554a1e1 Mon Sep 17 00:00:00 2001 From: zachleat Date: Fri, 16 Dec 2011 15:58:20 -0600 Subject: [PATCH] First stab at more consistent focus classes on form elements, using .ui-focus. Links will still contain outline property. --- css/structure/jquery.mobile.forms.slider.css | 2 +- .../jquery.mobile.forms.textinput.css | 2 +- js/jquery.mobile.core.js | 3 + js/jquery.mobile.forms.button.js | 12 ++ js/jquery.mobile.forms.checkboxradio.js | 4 +- js/jquery.mobile.forms.select.js | 6 + js/jquery.mobile.forms.slider.js | 118 ++++++++++-------- js/jquery.mobile.forms.textinput.js | 4 +- 8 files changed, 91 insertions(+), 60 deletions(-) diff --git a/css/structure/jquery.mobile.forms.slider.css b/css/structure/jquery.mobile.forms.slider.css index 70bf2eb4..7422a496 100644 --- a/css/structure/jquery.mobile.forms.slider.css +++ b/css/structure/jquery.mobile.forms.slider.css @@ -5,7 +5,7 @@ select.ui-slider-switch { display: none; } div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; } div.ui-slider-switch { width: 99.8%; } .ui-field-contain div.ui-slider-switch { width: 50%; } -a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; } +a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; } a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; } @media all and (min-width: 480px){ .ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; } diff --git a/css/structure/jquery.mobile.forms.textinput.css b/css/structure/jquery.mobile.forms.textinput.css index 028a34a3..ec7432e4 100644 --- a/css/structure/jquery.mobile.forms.textinput.css +++ b/css/structure/jquery.mobile.forms.textinput.css @@ -1,5 +1,5 @@ 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 { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; } +input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; outline: 0; } input.ui-input-text { -webkit-appearance: none; } 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 { padding: 0 30px; background-image: none; position: relative; } diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index c3dfe865..f620602a 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -26,6 +26,9 @@ define( [ "jquery.mobile.widget" ], function() { // Class used for "active" button state, from CSS framework activeBtnClass: "ui-btn-active", + // Class used for "focus" form element state, from CSS framework + focusClass: "ui-focus", + // Automatically handle clicks and form submissions through Ajax, when same-domain ajaxEnabled: true, diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js index 1fe9ded1..172fec71 100644 --- a/js/jquery.mobile.forms.button.js +++ b/js/jquery.mobile.forms.button.js @@ -20,6 +20,7 @@ $.widget( "mobile.button", $.mobile.widget, { }, _create: function() { var $el = this.element, + $button, o = this.options, type, name, @@ -40,6 +41,7 @@ $.widget( "mobile.button", $.mobile.widget, { }) .append( $el.addClass( "ui-btn-hidden" ) ); + $button = this.button; type = $el.attr( "type" ); name = $el.attr( "name" ); @@ -66,6 +68,16 @@ $.widget( "mobile.button", $.mobile.widget, { }); } + $el.bind({ + focus: function() { + $button.addClass( $.mobile.focusClass ); + }, + + blur: function() { + $button.removeClass( $.mobile.focusClass ); + } + }); + this.refresh(); }, diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js index 20e7cf8c..3e426120 100644 --- a/js/jquery.mobile.forms.checkboxradio.js +++ b/js/jquery.mobile.forms.checkboxradio.js @@ -115,11 +115,11 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { }, focus: function() { - label.addClass( "ui-focus" ); + label.addClass( $.mobile.focusClass ); }, blur: function() { - label.removeClass( "ui-focus" ); + label.removeClass( $.mobile.focusClass ); } }); diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 84bccfba..21c5f890 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -129,6 +129,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { // Add active class to button self.button.addClass( $.mobile.activeBtnClass ); }) + .bind( "focus", function() { + self.button.addClass( $.mobile.focusClass ); + }) + .bind( "blur", function() { + self.button.removeClass( $.mobile.focusClass ); + }) .bind( "focus vmouseover", function() { self.button.trigger( "vmouseover" ); }) diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js index a52dc2a1..9680ad25 100644 --- a/js/jquery.mobile.forms.slider.js +++ b/js/jquery.mobile.forms.slider.js @@ -184,65 +184,75 @@ $.widget( "mobile.slider", $.mobile.widget, { slider.insertAfter( control ); // NOTE force focus on handle - this.handle - .bind( "vmousedown", function() { - $( this ).focus(); - }) - .bind( "vclick", false ); + this.handle.bind({ + focus: function() { + slider.addClass( $.mobile.focusClass ); + }, - this.handle - .bind( "keydown", function( event ) { - var index = val(); + blur: function() { + slider.removeClass( $.mobile.focusClass ); + }, - if ( self.options.disabled ) { - return; - } + vmousedown: function() { + $( this ).focus(); + }, - // In all cases prevent the default and mark the handle as active - switch ( event.keyCode ) { - case $.mobile.keyCode.HOME: - case $.mobile.keyCode.END: - case $.mobile.keyCode.PAGE_UP: - case $.mobile.keyCode.PAGE_DOWN: - case $.mobile.keyCode.UP: - case $.mobile.keyCode.RIGHT: - case $.mobile.keyCode.DOWN: - case $.mobile.keyCode.LEFT: - event.preventDefault(); + vclick: false, - if ( !self._keySliding ) { - self._keySliding = true; - $( this ).addClass( "ui-state-active" ); - } - break; - } + keydown: function( event ) { + var index = val(); + + if ( self.options.disabled ) { + return; + } + + // In all cases prevent the default and mark the handle as active + switch ( event.keyCode ) { + case $.mobile.keyCode.HOME: + case $.mobile.keyCode.END: + case $.mobile.keyCode.PAGE_UP: + case $.mobile.keyCode.PAGE_DOWN: + case $.mobile.keyCode.UP: + case $.mobile.keyCode.RIGHT: + case $.mobile.keyCode.DOWN: + case $.mobile.keyCode.LEFT: + event.preventDefault(); + + if ( !self._keySliding ) { + self._keySliding = true; + $( this ).addClass( "ui-state-active" ); + } + break; + } + + // move the slider according to the keypress + switch ( event.keyCode ) { + case $.mobile.keyCode.HOME: + self.refresh( min ); + break; + case $.mobile.keyCode.END: + self.refresh( max ); + break; + case $.mobile.keyCode.PAGE_UP: + case $.mobile.keyCode.UP: + case $.mobile.keyCode.RIGHT: + self.refresh( index + step ); + break; + case $.mobile.keyCode.PAGE_DOWN: + case $.mobile.keyCode.DOWN: + case $.mobile.keyCode.LEFT: + self.refresh( index - step ); + break; + } + }, // remove active mark - // move the slider according to the keypress - switch ( event.keyCode ) { - case $.mobile.keyCode.HOME: - self.refresh( min ); - break; - case $.mobile.keyCode.END: - self.refresh( max ); - break; - case $.mobile.keyCode.PAGE_UP: - case $.mobile.keyCode.UP: - case $.mobile.keyCode.RIGHT: - self.refresh( index + step ); - break; - case $.mobile.keyCode.PAGE_DOWN: - case $.mobile.keyCode.DOWN: - case $.mobile.keyCode.LEFT: - self.refresh( index - step ); - break; - } - }) // remove active mark - .keyup( function( event ) { - if ( self._keySliding ) { - self._keySliding = false; - $( this ).removeClass( "ui-state-active" ); - } - }); + keyup: function( event ) { + if ( self._keySliding ) { + self._keySliding = false; + $( this ).removeClass( "ui-state-active" ); + } + } + }); this.refresh(undefined, undefined, true); }, diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index 1e853a7c..772607c1 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -73,10 +73,10 @@ $.widget( "mobile.textinput", $.mobile.widget, { } input.focus(function() { - focusedEl.addClass( "ui-focus" ); + focusedEl.addClass( $.mobile.focusClass ); }) .blur(function(){ - focusedEl.removeClass( "ui-focus" ); + focusedEl.removeClass( $.mobile.focusClass ); }); // Autogrow