mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-15 10:03:10 +00:00
added keyCodes, Home and End working for range slider
This commit is contained in:
John Bender
parent
171065a5e1
commit
8ec3ae594d
2 changed files with 192 additions and 66 deletions
|
|
@ -8,68 +8,104 @@
|
|||
*/
|
||||
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
|
||||
//jQuery.mobile configurable options
|
||||
$.extend( $.mobile, {
|
||||
|
||||
//define the url parameter used for referencing widget-generated sub-pages.
|
||||
|
||||
//define the url parameter used for referencing widget-generated sub-pages.
|
||||
//Translates to to example.html&ui-page=subpageIdentifier
|
||||
//hash segment before &ui-page= is used to make Ajax request
|
||||
subPageUrlKey: 'ui-page',
|
||||
|
||||
//anchor links with a data-rel, or pages with a data-role, that match these selectors will be untrackable in history
|
||||
|
||||
//anchor links with a data-rel, or pages with a data-role, that match these selectors will be untrackable in history
|
||||
//(no change in URL, not bookmarkable)
|
||||
nonHistorySelectors: 'dialog',
|
||||
|
||||
|
||||
//class assigned to page currently in view, and during transitions
|
||||
activePageClass: 'ui-page-active',
|
||||
|
||||
|
||||
//class used for "active" button state, from CSS framework
|
||||
activeBtnClass: 'ui-btn-active',
|
||||
|
||||
|
||||
//automatically handle link clicks through Ajax, when possible
|
||||
ajaxLinksEnabled: true,
|
||||
|
||||
|
||||
//automatically handle form submissions through Ajax, when possible
|
||||
ajaxFormsEnabled: true,
|
||||
|
||||
|
||||
//set default transition - 'none' for no transitions
|
||||
defaultTransition: 'slide',
|
||||
|
||||
|
||||
//show loading message during Ajax requests
|
||||
//if false, message will not appear, but loading classes will still be toggled on html el
|
||||
loadingMessage: "loading",
|
||||
|
||||
|
||||
//configure meta viewport tag's content attr:
|
||||
metaViewportContent: "width=device-width, minimum-scale=1, maximum-scale=1",
|
||||
|
||||
|
||||
//support conditions that must be met in order to proceed
|
||||
gradeA: function(){
|
||||
return $.support.mediaquery;
|
||||
},
|
||||
|
||||
//TODO might be useful upstream in jquery itself ?
|
||||
keyCode: {
|
||||
ALT: 18,
|
||||
BACKSPACE: 8,
|
||||
CAPS_LOCK: 20,
|
||||
COMMA: 188,
|
||||
COMMAND: 91,
|
||||
COMMAND_LEFT: 91, // COMMAND
|
||||
COMMAND_RIGHT: 93,
|
||||
CONTROL: 17,
|
||||
DELETE: 46,
|
||||
DOWN: 40,
|
||||
END: 35,
|
||||
ENTER: 13,
|
||||
ESCAPE: 27,
|
||||
HOME: 36,
|
||||
INSERT: 45,
|
||||
LEFT: 37,
|
||||
MENU: 93, // COMMAND_RIGHT
|
||||
NUMPAD_ADD: 107,
|
||||
NUMPAD_DECIMAL: 110,
|
||||
NUMPAD_DIVIDE: 111,
|
||||
NUMPAD_ENTER: 108,
|
||||
NUMPAD_MULTIPLY: 106,
|
||||
NUMPAD_SUBTRACT: 109,
|
||||
PAGE_DOWN: 34,
|
||||
PAGE_UP: 33,
|
||||
PERIOD: 190,
|
||||
RIGHT: 39,
|
||||
SHIFT: 16,
|
||||
SPACE: 32,
|
||||
TAB: 9,
|
||||
UP: 38,
|
||||
WINDOWS: 91 // COMMAND
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
|
||||
$( window.document ).trigger('mobileinit');
|
||||
|
||||
|
||||
//support conditions
|
||||
//support conditions
|
||||
//if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
|
||||
//otherwise, proceed with the enhancements
|
||||
if ( !$.mobile.gradeA() ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//define vars for interal use
|
||||
var $window = $(window),
|
||||
$html = $('html'),
|
||||
$head = $('head'),
|
||||
|
||||
|
||||
//loading div which appears during Ajax requests
|
||||
//will not appear if $.mobile.loadingMessage is false
|
||||
$loader = $.mobile.loadingMessage ?
|
||||
$loader = $.mobile.loadingMessage ?
|
||||
$('<div class="ui-loader ui-body-a ui-corner-all">'+
|
||||
'<span class="ui-icon ui-icon-loading spin"></span>'+
|
||||
'<h1>'+ $.mobile.loadingMessage +'</h1>'+
|
||||
|
|
@ -78,16 +114,16 @@
|
|||
|
||||
|
||||
//add mobile, initial load "rendering" classes to docEl
|
||||
$html.addClass('ui-mobile ui-mobile-rendering');
|
||||
|
||||
|
||||
//define & prepend meta viewport tag, if content is defined
|
||||
$.mobile.metaViewportContent ? $("<meta>", { name: "viewport", content: $.mobile.metaViewportContent}).prependTo( $head ) : undefined;
|
||||
$html.addClass('ui-mobile ui-mobile-rendering');
|
||||
|
||||
|
||||
//define & prepend meta viewport tag, if content is defined
|
||||
$.mobile.metaViewportContent ? $("<meta>", { name: "viewport", content: $.mobile.metaViewportContent}).prependTo( $head ) : undefined;
|
||||
|
||||
|
||||
|
||||
//expose some core utilities
|
||||
$.extend($.mobile, {
|
||||
|
||||
|
||||
// turn on/off page loading message.
|
||||
pageLoading: function ( done ) {
|
||||
if ( done ) {
|
||||
|
|
@ -95,57 +131,57 @@
|
|||
} else {
|
||||
if( $.mobile.loadingMessage ){
|
||||
$loader.appendTo($.mobile.pageContainer).css({top: $(window).scrollTop() + 75});
|
||||
}
|
||||
}
|
||||
$html.addClass( "ui-loading" );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
|
||||
silentScroll: function( ypos ) {
|
||||
// prevent scrollstart and scrollstop events
|
||||
$.event.special.scrollstart.enabled = false;
|
||||
setTimeout(function() {
|
||||
window.scrollTo( 0, ypos || 0 );
|
||||
},20);
|
||||
},20);
|
||||
setTimeout(function() {
|
||||
$.event.special.scrollstart.enabled = true;
|
||||
}, 150 );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
//dom-ready inits
|
||||
$(function(){
|
||||
|
||||
//find present pages
|
||||
|
||||
//find present pages
|
||||
var $pages = $("[data-role='page']");
|
||||
|
||||
|
||||
$pages.each(function(){
|
||||
$(this).attr('data-url', $(this).attr('id'));
|
||||
});
|
||||
|
||||
|
||||
//set up active page
|
||||
$.mobile.startPage = $.mobile.activePage = $pages.first();
|
||||
|
||||
|
||||
//set page container
|
||||
$.mobile.pageContainer = $.mobile.startPage.parent().addClass('ui-mobile-viewport');
|
||||
|
||||
|
||||
//cue page loading message
|
||||
$.mobile.pageLoading();
|
||||
|
||||
|
||||
//initialize all pages present
|
||||
$pages.page();
|
||||
|
||||
|
||||
//trigger a new hashchange, hash or not
|
||||
$window.trigger( "hashchange", [ true ] );
|
||||
|
||||
|
||||
//remove rendering class
|
||||
$html.removeClass('ui-mobile-rendering');
|
||||
});
|
||||
|
||||
|
||||
//window load event
|
||||
|
||||
|
||||
//window load event
|
||||
//hide iOS browser chrome on load
|
||||
$window.load( $.mobile.silentScroll );
|
||||
|
||||
$window.load( $.mobile.silentScroll );
|
||||
|
||||
})( jQuery, this );
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Copyright (c) jQuery Project
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
*/
|
||||
(function($, undefined ) {
|
||||
$.widget( "mobile.slider", $.mobile.widget, {
|
||||
options: {
|
||||
|
|
@ -11,19 +11,19 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
trackTheme: null,
|
||||
disabled: false
|
||||
},
|
||||
_create: function(){
|
||||
_create: function(){
|
||||
var self = this,
|
||||
|
||||
control = this.element,
|
||||
|
||||
parentTheme = control.parents('[class*=ui-bar-],[class*=ui-body-]').eq(0),
|
||||
|
||||
|
||||
parentTheme = control.parents('[class*=ui-bar-],[class*=ui-body-]').eq(0),
|
||||
|
||||
parentTheme = parentTheme.length ? parentTheme.attr('class').match(/ui-(bar|body)-([a-z])/)[2] : 'c',
|
||||
|
||||
|
||||
theme = this.options.theme ? this.options.theme : parentTheme,
|
||||
|
||||
|
||||
trackTheme = this.options.trackTheme ? this.options.trackTheme : parentTheme,
|
||||
|
||||
|
||||
cType = control[0].nodeName.toLowerCase(),
|
||||
selectClass = (cType == 'select') ? 'ui-slider-switch' : '',
|
||||
controlID = control.attr('id'),
|
||||
|
|
@ -56,32 +56,32 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
if(cType == 'select'){
|
||||
slider.wrapInner('<div class="ui-slider-inneroffset"></div>');
|
||||
var options = control.find('option');
|
||||
|
||||
|
||||
control.find('option').each(function(i){
|
||||
var side = (i==0) ?'b':'a',
|
||||
corners = (i==0) ? 'right' :'left',
|
||||
theme = (i==0) ? ' ui-btn-down-' + trackTheme :' ui-btn-active';
|
||||
$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side + theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);
|
||||
$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side + theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);
|
||||
$('<span class="ui-slider-label ui-slider-label-'+ side + theme +' ui-btn-corner-'+ corners+'" role="img">'+$(this).text()+'</span>').prependTo(handle);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
label.addClass('ui-slider');
|
||||
|
||||
|
||||
control
|
||||
.addClass((cType == 'input') ? 'ui-slider-input' : 'ui-slider-switch')
|
||||
.keyup(function(){
|
||||
self.refresh( $(this).val() );
|
||||
});
|
||||
|
||||
|
||||
$(document).bind($.support.touch ? "touchmove" : "mousemove", function(event){
|
||||
if ( self.dragging ) {
|
||||
self.refresh( event );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
slider
|
||||
.bind($.support.touch ? "touchstart" : "mousedown", function(event){
|
||||
self.dragging = true;
|
||||
|
|
@ -91,9 +91,9 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
self.refresh( event );
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
slider
|
||||
.add(document)
|
||||
.add(document)
|
||||
.bind($.support.touch ? "touchend" : "mouseup", function(){
|
||||
if ( self.dragging ) {
|
||||
self.dragging = false;
|
||||
|
|
@ -116,6 +116,96 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
});
|
||||
|
||||
slider.insertAfter(control);
|
||||
|
||||
// NOTE required to set focus properly :(
|
||||
this.handle
|
||||
.bind($.support.touch ? "touchstart" : "mousedown", function(){
|
||||
$(this).focus();
|
||||
});
|
||||
|
||||
this.handle.bind('keydown', function( event ) {
|
||||
var ret = true,
|
||||
index = $( this ).data( "aria-valuenow" ),
|
||||
allowed,
|
||||
curVal,
|
||||
newVal,
|
||||
step;
|
||||
|
||||
if ( self.options.disabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
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:
|
||||
ret = false;
|
||||
if ( !self._keySliding ) {
|
||||
self._keySliding = true;
|
||||
$( this ).addClass( "ui-state-active" );
|
||||
// allowed = self._start( event, index );
|
||||
// if ( allowed === false ) {
|
||||
// return;
|
||||
// }
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// step = self.options.step;
|
||||
// if ( self.options.values && self.options.values.length ) {
|
||||
// curVal = newVal = self.values( index );
|
||||
// } else {
|
||||
// curVal = newVal = self.value();
|
||||
// }
|
||||
|
||||
switch ( event.keyCode ) {
|
||||
case $.mobile.keyCode.HOME:
|
||||
self.refresh(min);
|
||||
break;
|
||||
case $.mobile.keyCode.END:
|
||||
self.refresh(max);
|
||||
break;
|
||||
case $.mobile.keyCode.PAGE_UP:
|
||||
newVal = self._trimAlignValue( curVal + ( (self._valueMax() - self._valueMin()) / numPages ) );
|
||||
break;
|
||||
case $.mobile.keyCode.PAGE_DOWN:
|
||||
newVal = self._trimAlignValue( curVal - ( (self._valueMax() - self._valueMin()) / numPages ) );
|
||||
break;
|
||||
case $.mobile.keyCode.UP:
|
||||
case $.mobile.keyCode.RIGHT:
|
||||
if ( curVal === self._valueMax() ) {
|
||||
return;
|
||||
}
|
||||
newVal = self._trimAlignValue( curVal + step );
|
||||
break;
|
||||
case $.mobile.keyCode.DOWN:
|
||||
case $.mobile.keyCode.LEFT:
|
||||
if ( curVal === self._valueMin() ) {
|
||||
return;
|
||||
}
|
||||
newVal = self._trimAlignValue( curVal - step );
|
||||
break;
|
||||
}
|
||||
|
||||
return ret;
|
||||
})
|
||||
.keyup(function( event ) {
|
||||
var index = $( this ).data( "aria-valuenow" );
|
||||
|
||||
if ( self._keySliding ) {
|
||||
self._keySliding = false;
|
||||
// self._stop( event, index );
|
||||
// self._change( event, index );
|
||||
$( this ).removeClass( "ui-state-active" );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
handle.bind('click', function(e){ return false; });
|
||||
this.refresh();
|
||||
},
|
||||
|
|
@ -155,7 +245,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
|
||||
//flip the stack of the bg colors
|
||||
if ( percent > 60 && cType === "select" ) {
|
||||
|
||||
|
||||
}
|
||||
this.handle.css("left", percent + "%");
|
||||
this.handle.attr({
|
||||
|
|
@ -197,4 +287,4 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
}
|
||||
});
|
||||
})( jQuery );
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue