Skip to content

Commit 5cc8179

Browse files
zachleatscottjehl
zachleat
authored and
scottjehl
committed
First stab at more consistent focus classes on form elements, using .ui-focus. Links will still contain outline property.
1 parent 5f4c0a4 commit 5cc8179

8 files changed

+96
-65
lines changed

‎css/structure/jquery.mobile.forms.slider.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ select.ui-slider-switch { display: none; }
55
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
66
div.ui-slider-switch { width: 99.8%; }
77
.ui-field-contain div.ui-slider-switch { width: 50%; }
8-
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
8+
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
99
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
1010
@media all and (min-width: 480px){
1111
.ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }

‎css/structure/jquery.mobile.forms.textinput.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
2-
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; }
2+
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; }
33
input.ui-input-text { -webkit-appearance: none; }
44
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; }
55
.ui-input-search { padding: 0 30px; background-image: none; position: relative; }

‎js/jquery.mobile.core.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ define( [ "jquery.mobile.widget" ], function() {
2626
// Class used for "active" button state, from CSS framework
2727
activeBtnClass: "ui-btn-active",
2828

29+
// Class used for "focus" form element state, from CSS framework
30+
focusClass: "ui-focus",
31+
2932
// Automatically handle clicks and form submissions through Ajax, when same-domain
3033
ajaxEnabled: true,
3134

‎js/jquery.mobile.forms.button.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $.widget( "mobile.button", $.mobile.widget, {
2020
},
2121
_create: function() {
2222
var $el = this.element,
23+
$button,
2324
o = this.options,
2425
type,
2526
name,
@@ -40,6 +41,7 @@ $.widget( "mobile.button", $.mobile.widget, {
4041
})
4142
.append( $el.addClass( "ui-btn-hidden" ) );
4243

44+
$button = this.button;
4345
type = $el.attr( "type" );
4446
name = $el.attr( "name" );
4547

@@ -66,6 +68,16 @@ $.widget( "mobile.button", $.mobile.widget, {
6668
});
6769
}
6870

71+
$el.bind({
72+
focus: function() {
73+
$button.addClass( $.mobile.focusClass );
74+
},
75+
76+
blur: function() {
77+
$button.removeClass( $.mobile.focusClass );
78+
}
79+
});
80+
6981
this.refresh();
7082
},
7183

‎js/jquery.mobile.forms.checkboxradio.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,11 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
115115
},
116116

117117
focus: function() {
118-
label.addClass( "ui-focus" );
118+
label.addClass( $.mobile.focusClass );
119119
},
120120

121121
blur: function() {
122-
label.removeClass( "ui-focus" );
122+
label.removeClass( $.mobile.focusClass );
123123
}
124124
});
125125

‎js/jquery.mobile.forms.select.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
129129
// Add active class to button
130130
self.button.addClass( $.mobile.activeBtnClass );
131131
})
132+
.bind( "focus", function() {
133+
self.button.addClass( $.mobile.focusClass );
134+
})
135+
.bind( "blur", function() {
136+
self.button.removeClass( $.mobile.focusClass );
137+
})
132138
.bind( "focus vmouseover", function() {
133139
self.button.trigger( "vmouseover" );
134140
})

‎js/jquery.mobile.forms.slider.js‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -184,65 +184,75 @@ $.widget( "mobile.slider", $.mobile.widget, {
184184
slider.insertAfter( control );
185185

186186
// NOTE force focus on handle
187-
this.handle
188-
.bind( "vmousedown", function() {
189-
$( this ).focus();
190-
})
191-
.bind( "vclick", false );
192-
193-
this.handle
194-
.bind( "keydown", function( event ) {
195-
var index = val();
196-
197-
if ( self.options.disabled ) {
198-
return;
199-
}
200-
201-
// In all cases prevent the default and mark the handle as active
202-
switch ( event.keyCode ) {
203-
case $.mobile.keyCode.HOME:
204-
case $.mobile.keyCode.END:
205-
case $.mobile.keyCode.PAGE_UP:
206-
case $.mobile.keyCode.PAGE_DOWN:
207-
case $.mobile.keyCode.UP:
208-
case $.mobile.keyCode.RIGHT:
209-
case $.mobile.keyCode.DOWN:
210-
case $.mobile.keyCode.LEFT:
211-
event.preventDefault();
212-
213-
if ( !self._keySliding ) {
214-
self._keySliding = true;
215-
$( this ).addClass( "ui-state-active" );
216-
}
217-
break;
218-
}
219-
220-
// move the slider according to the keypress
221-
switch ( event.keyCode ) {
222-
case $.mobile.keyCode.HOME:
223-
self.refresh( min );
224-
break;
225-
case $.mobile.keyCode.END:
226-
self.refresh( max );
227-
break;
228-
case $.mobile.keyCode.PAGE_UP:
229-
case $.mobile.keyCode.UP:
230-
case $.mobile.keyCode.RIGHT:
231-
self.refresh( index + step );
232-
break;
233-
case $.mobile.keyCode.PAGE_DOWN:
234-
case $.mobile.keyCode.DOWN:
235-
case $.mobile.keyCode.LEFT:
236-
self.refresh( index - step );
237-
break;
238-
}
239-
}) // remove active mark
240-
.keyup( function( event ) {
241-
if ( self._keySliding ) {
242-
self._keySliding = false;
243-
$( this ).removeClass( "ui-state-active" );
244-
}
245-
});
187+
this.handle.bind({
188+
focus: function() {
189+
slider.addClass( $.mobile.focusClass );
190+
},
191+
192+
blur: function() {
193+
slider.removeClass( $.mobile.focusClass );
194+
},
195+
196+
vmousedown: function() {
197+
$( this ).focus();
198+
},
199+
200+
vclick: false,
201+
202+
keydown: function( event ) {
203+
var index = val();
204+
205+
if ( self.options.disabled ) {
206+
return;
207+
}
208+
209+
// In all cases prevent the default and mark the handle as active
210+
switch ( event.keyCode ) {
211+
case $.mobile.keyCode.HOME:
212+
case $.mobile.keyCode.END:
213+
case $.mobile.keyCode.PAGE_UP:
214+
case $.mobile.keyCode.PAGE_DOWN:
215+
case $.mobile.keyCode.UP:
216+
case $.mobile.keyCode.RIGHT:
217+
case $.mobile.keyCode.DOWN:
218+
case $.mobile.keyCode.LEFT:
219+
event.preventDefault();
220+
221+
if ( !self._keySliding ) {
222+
self._keySliding = true;
223+
$( this ).addClass( "ui-state-active" );
224+
}
225+
break;
226+
}
227+
228+
// move the slider according to the keypress
229+
switch ( event.keyCode ) {
230+
case $.mobile.keyCode.HOME:
231+
self.refresh( min );
232+
break;
233+
case $.mobile.keyCode.END:
234+
self.refresh( max );
235+
break;
236+
case $.mobile.keyCode.PAGE_UP:
237+
case $.mobile.keyCode.UP:
238+
case $.mobile.keyCode.RIGHT:
239+
self.refresh( index + step );
240+
break;
241+
case $.mobile.keyCode.PAGE_DOWN:
242+
case $.mobile.keyCode.DOWN:
243+
case $.mobile.keyCode.LEFT:
244+
self.refresh( index - step );
245+
break;
246+
}
247+
}, // remove active mark
248+
249+
keyup: function( event ) {
250+
if ( self._keySliding ) {
251+
self._keySliding = false;
252+
$( this ).removeClass( "ui-state-active" );
253+
}
254+
}
255+
});
246256

247257
this.refresh(undefined, undefined, true);
248258
},

‎js/jquery.mobile.forms.textinput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ $.widget( "mobile.textinput", $.mobile.widget, {
7373
}
7474

7575
input.focus(function() {
76-
focusedEl.addClass( "ui-focus" );
76+
focusedEl.addClass( $.mobile.focusClass );
7777
})
7878
.blur(function(){
79-
focusedEl.removeClass( "ui-focus" );
79+
focusedEl.removeClass( $.mobile.focusClass );
8080
});
8181

8282
// Autogrow

0 commit comments

Comments
 (0)