Permalink
Browse files

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

…ui-focus. Links will still contain outline property.
  • Loading branch information...
zachleat authored and Wilto committed Dec 16, 2011
1 parent de70400 commit 07efc02c9fa7850c7f9cd1799f6875988a357c47
@@ -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; }
@@ -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
@@ -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,
@@ -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();
},
@@ -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 );
}
});
@@ -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" );
})
@@ -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);
},
@@ -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.