Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

First stab at more consistent focus classes on form elements, using .ui-focus. Links will still contain outline property.

Browse source
This commit is contained in:
zachleat 2011-12-16 15:58:20 -06:00 committed by scottjehl
parent 5f4c0a4914
commit 5cc81797ba
8 changed files with 91 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/structure/jquery.mobile.forms.slider.css
View file

@ -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; }

2
css/structure/jquery.mobile.forms.textinput.css
View file

@ -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; }

3
js/jquery.mobile.core.js
View file

@ -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,

12
js/jquery.mobile.forms.button.js
View file

@ -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();
},

4
js/jquery.mobile.forms.checkboxradio.js
View file

@ -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 );
}
});

6
js/jquery.mobile.forms.select.js
View file

@ -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" );
})

118
js/jquery.mobile.forms.slider.js
View file

@ -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);
},

4
js/jquery.mobile.forms.textinput.js
View file

@ -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