Skip to content
Browse files

First stab at more consistent focus classes on form elements, using .…

…ui-focus. Links will still contain outline property.
  • Loading branch information...
1 parent de70400 commit 07efc02c9fa7850c7f9cd1799f6875988a357c47 @zachleat zachleat committed with Wilto Dec 16, 2011
View
2 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; }
View
2 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; }
View
3 js/jquery.mobile.core.js
@@ -23,6 +23,9 @@
// 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,
View
12 js/jquery.mobile.forms.button.js
@@ -17,6 +17,7 @@ $.widget( "mobile.button", $.mobile.widget, {
},
_create: function() {
var $el = this.element,
+ $button,
o = this.options,
type,
name,
@@ -37,6 +38,7 @@ $.widget( "mobile.button", $.mobile.widget, {
})
.append( $el.addClass( "ui-btn-hidden" ) );
+ $button = this.button;
type = $el.attr( "type" );
name = $el.attr( "name" );
@@ -63,6 +65,16 @@ $.widget( "mobile.button", $.mobile.widget, {
});
}
+ $el.bind({
+ focus: function() {
+ $button.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ $button.removeClass( $.mobile.focusClass );
+ }
+ });
+
this.refresh();
},
View
4 js/jquery.mobile.forms.checkboxradio.js
@@ -112,11 +112,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 );
}
});
View
6 js/jquery.mobile.forms.select.js
@@ -126,6 +126,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" );
})
View
128 js/jquery.mobile.forms.slider.js
@@ -182,65 +182,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( "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
- .keyup( function( event ) {
- if ( self._keySliding ) {
- self._keySliding = false;
- $( this ).removeClass( "ui-state-active" );
- }
- });
+ this.handle.bind({
+ focus: function() {
+ slider.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ slider.removeClass( $.mobile.focusClass );
+ },
+
+ vmousedown: function() {
+ $( this ).focus();
+ },
+
+ vclick: false,
+
+ 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
+
+ keyup: function( event ) {
+ if ( self._keySliding ) {
+ self._keySliding = false;
+ $( this ).removeClass( "ui-state-active" );
+ }
+ }
+ });
this.refresh(undefined, undefined, true);
},
View
4 js/jquery.mobile.forms.textinput.js
@@ -71,10 +71,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

0 comments on commit 07efc02

Please sign in to comment.
Something went wrong with that request. Please try again.