From 3cfe7983f5b2d3a73dfbab314434c77ad8cb1266 Mon Sep 17 00:00:00 2001 From: Mottie Date: Thu, 29 May 2014 10:27:55 -0500 Subject: [PATCH] Update Mobile extension & demos --- css/keyboard.css | 46 ++++---- demo/demo.css | 3 +- jquery-mobile-1.4.html | 13 ++- js/jquery.keyboard.extension-mobile.js | 73 ++++++++----- mobile.html | 141 +++++++++++-------------- 5 files changed, 139 insertions(+), 137 deletions(-) diff --git a/css/keyboard.css b/css/keyboard.css index 2a2e77d6..5786cf12 100644 --- a/css/keyboard.css +++ b/css/keyboard.css @@ -2,7 +2,7 @@ .ui-keyboard { padding: .3em; z-index: 16000; } .ui-keyboard-has-focus { z-index: 16001; } .ui-keyboard div { font-size: 1.1em; } -.ui-keyboard-button { height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; -moz-user-focus: ignore; } +.ui-keyboard-button { min-height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; -moz-user-focus: ignore; } .ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; display: inline-block; } .ui-keyboard-button-endrow { clear: left; } .ui-keyboard-widekey { min-width: 4em; width: auto; } @@ -12,7 +12,7 @@ .ui-keyboard-preview { text-align: left; margin: 0 0 3px 0; display: inline; width: 99%;} /* width is calculated in IE, since 99% = 99% full browser width =( */ .ui-keyboard-keyset { text-align: center; white-space: nowrap; } .ui-keyboard-input { text-align: left; } -.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #00f; -webkit-box-shadow: 1px 1px 10px #00f; box-shadow: 1px 1px 10px #00f; } +.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #5e9ed6; -webkit-box-shadow: 1px 1px 10px #5e9ed6; box-shadow: 1px 1px 10px #5e9ed6; } .ui-keyboard-placeholder { color: #888; } .ui-keyboard-nokeyboard { color: #888; border-color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */ .ui-keyboard-button.disabled { opacity: 0.5; filter: alpha(opacity=50); } /* used by the acceptValid option to make the accept button appear faded */ @@ -29,16 +29,16 @@ button.ui-keyboard-accept.ui-keyboard-invalid-input:hover { background: #a00; } /*** jQuery Mobile definitions ***/ /* jQuery Mobile styles - need wider buttons because of font size and text-overflow:ellipsis */ -.ui-bar .ui-keyboard-button { width: 3em; display: inline-block; } -.ui-bar .ui-keyboard-widekey { width: 5.5em; } -.ui-bar .ui-keyboard-space { width: 15em; } -.ui-bar .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */ -.ui-bar .ui-keyboard-keyset { line-height: 0.5em; } -.ui-bar input.ui-input-text, .ui-bar textarea.ui-input-text { width: 95%; } +.ui-body .ui-keyboard-button { width: 3em; display: inline-block; } +.ui-body .ui-keyboard-widekey { width: 5.5em; } +.ui-body .ui-keyboard-space { width: 15em; } +.ui-body .ui-keyboard-space span { visibility: hidden; } /* hides the ellipsis */ +.ui-body .ui-keyboard-keyset { line-height: 0.5em; } +.ui-body input.ui-input-text, .ui-body textarea.ui-input-text { width: 95%; } /* over-ride padding set by mobile ui theme - needed because the mobile script wraps button text with several more spans */ -.ui-bar .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; } -.ui-bar .ui-btn { margin: 0; font-size: 13px; } /* mobile default size is 13px */ +.ui-body .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; } +.ui-body .ui-btn { margin: 0; font-size: 13px; } /* mobile default size is 13px */ /* Media Queries (optimized for jQuery UI themes; may be slightly off in jQuery Mobile themes) */ /* 240 x 320 (small phone) */ @@ -46,11 +46,11 @@ button.ui-keyboard-accept.ui-keyboard-invalid-input:hover { background: #a00; } .ui-keyboard div { font-size: 9px; } .ui-keyboard .ui-keyboard-input { font-size: 12px; } /* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */ - .ui-bar .ui-btn { margin: 0; font-size: 9px; } - .ui-bar .ui-keyboard-button { width: 1.8em; height: 2.5em; } - .ui-bar .ui-keyboard-widekey { width: 4em; } - .ui-bar .ui-keyboard-space { width: 8em; } - .ui-bar .ui-btn-inner { height: 2.5em; padding: 0.3em 0; } + .ui-body .ui-btn { margin: 0; font-size: 9px; } + .ui-body .ui-keyboard-button { width: 1.8em; height: 2.5em; } + .ui-body .ui-keyboard-widekey { width: 4em; } + .ui-body .ui-keyboard-space { width: 8em; } + .ui-body .ui-btn-inner { height: 2.5em; padding: 0.3em 0; } } /* 320 x 480 (iPhone) */ @@ -58,18 +58,18 @@ button.ui-keyboard-accept.ui-keyboard-invalid-input:hover { background: #a00; } .ui-keyboard div { font-size: 9px; } .ui-keyboard .ui-keyboard-input { font-size: 14px; } /* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */ - .ui-bar .ui-btn { margin: 0; font-size: 11px; } - .ui-bar .ui-keyboard-button { width: 1.8em; height: 3em; } - .ui-bar .ui-keyboard-widekey { width: 4.5em; } - .ui-bar .ui-keyboard-space { width: 10em; } - .ui-bar .ui-btn-inner { height: 3em; padding: 0.7em 0; } + .ui-body .ui-btn { margin: 0; font-size: 11px; } + .ui-body .ui-keyboard-button { width: 1.8em; height: 3em; } + .ui-body .ui-keyboard-widekey { width: 4.5em; } + .ui-body .ui-keyboard-space { width: 10em; } + .ui-body .ui-btn-inner { height: 3em; padding: 0.7em 0; } } /* 480 x 640 (small tablet) */ @media all and (min-width: 480px) and (max-width: 767px) { .ui-keyboard div { font-size: 13px; } .ui-keyboard .ui-keyboard-input { font-size: 14px; } - .ui-bar .ui-btn { margin: 0; font-size: 10px; } - .ui-bar .ui-keyboard-button { height: 2.5em; } - .ui-bar .ui-btn-inner { height: 2.5em; padding: 0.5em 0; } + .ui-body .ui-btn { margin: 0; font-size: 10px; } + .ui-body .ui-keyboard-button { height: 2.5em; } + .ui-body .ui-btn-inner { height: 2.5em; padding: 0.5em 0; } } \ No newline at end of file diff --git a/demo/demo.css b/demo/demo.css index c3333110..2cf15914 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -104,10 +104,9 @@ textarea, input { width: 260px; background: #333; color: #ddd; border: #777 1px #mobile #switcher fieldset { text-align: center; white-space: nowrap; margin: 0; height: 20px; } #mobile #switcher input { visibility: hidden; } #mobile .ui-icon-radio-on, #mobile .ui-icon-radio-off { display: none; } -#mobile #switcher .ui-btn-active { box-shadow: 0 1px 5px rgba(255, 255, 255, 0.7); } #mobile #switcher .ui-controlgroup-label { display: block; margin: 0 0 15px 0; width: auto; } #mobile #switcher .ui-btn-inner { padding: 0; } -#mobile #switcher .ui-radio, #mobile #switcher .ui-radio label { font-size: 10px; width: 20px; height: 20px; margin: 0; display: inline-block; } +#mobile #switcher .ui-radio, #mobile #switcher .ui-radio label { font-size: 10px; margin: 0; display: inline-block; } #mobile #switcher .ui-btn-text { position: relative; top: 2px; left: 5px; width: 10px; } #footer { height: 150px; } diff --git a/jquery-mobile-1.4.html b/jquery-mobile-1.4.html index 692c59c4..6d05dda5 100644 --- a/jquery-mobile-1.4.html +++ b/jquery-mobile-1.4.html @@ -61,7 +61,7 @@ by Brandon White (https://github.com/BrandonLWhite) */ $.widget("bw.virtualNumericKeyboard", { - initSelector: "input[type='number']", + initSelector: "input.numeric", _create: function () { var self = this; @@ -180,24 +180,29 @@

Virtual Keyboard jQuery Mobile v1.4 Demo

by Brandon White

+ +
diff --git a/js/jquery.keyboard.extension-mobile.js b/js/jquery.keyboard.extension-mobile.js index 99cae14d..489c5fde 100644 --- a/js/jquery.keyboard.extension-mobile.js +++ b/js/jquery.keyboard.extension-mobile.js @@ -30,17 +30,19 @@ $.fn.addMobile = function(options){ var o, defaults = { // keyboard wrapper theme - container : { theme:'a' }, + container : { theme:'b', cssClass:'ui-body' }, + // keyboard duplicate input + input : { theme:'b', cssClass:'' }, // theme added to all regular buttons - buttonMarkup : { theme:'a', shadow:'true', corners:'true' }, + buttonMarkup : { theme:'b', cssClass:'ui-btn', shadow:'true', corners:'true' }, // theme added to all buttons when they are being hovered - buttonHover : { theme:'c' }, + buttonHover : { theme:'b', cssClass:'ui-btn-hover' }, // theme added to action buttons (e.g. tab, shift, accept, cancel); // parameters here will override the settings in the buttonMarkup - buttonAction : { theme:'b' }, + buttonAction : { theme:'b', cssClass:'ui-btn-active' }, // theme added to button when it is active (e.g. shift is down) // All extra parameters will be ignored - buttonActive : { theme:'e' } + buttonActive : { theme:'b', cssClass:'ui-btn-active' } }; return this.each(function(){ @@ -49,7 +51,7 @@ $.fn.addMobile = function(options){ // Stop if no keyboard attached or if jQuery Mobile isn't loaded if (!base || typeof($.fn.textinput) === 'undefined') { return; } - base.mobile_options = o = $.extend({}, defaults, options); + base.mobile_options = o = $.extend(true, {}, defaults, options); // Setup base.mobile_init = function(){ @@ -63,12 +65,13 @@ $.fn.addMobile = function(options){ } // Setup mobile theme on keyboard once it is visible. - // Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'. + // Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'. // Since we are restyling here, the user will experience FlashOfUnstyledContent (FOUC). - // This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we + // This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we // set it visible. // - base.$el.on('beforeVisible.keyboard', function () { + base.$el + .on('beforeVisible.keyboard', function () { base.$keyboard.css("visibility", "hidden"); }) .on('visible.keyboard', function () { @@ -80,50 +83,64 @@ $.fn.addMobile = function(options){ }; base.mobile_setup = function(){ - var p, actn = $.extend({}, o.buttonMarkup, o.buttonAction); + var p, + opts = base.options, + markup = o.buttonMarkup.cssClass || '', + actions = opts.css.buttonAction; + + opts.css.buttonAction += ' ' + o.buttonAction.cssClass; base.$keyboard // 'ui-bar ui-bar-a' classes to apply swatch theme - .addClass('ui-bar ui-bar-' + o.container.theme) + .addClass( base.modOptions(o.container, o.container) ) + // preview input + .find('.ui-keyboard-preview').addClass( base.modOptions(o.input, o.input) ).end() // removing 'ui-widget-content' will prevent jQuery UI theme from applying to the keyboard .removeClass('ui-widget ui-widget-content') + .find('.' + actions).addClass( base.modOptions(o.buttonAction, o.buttonMarkup) ).end() // apply jQuery Mobile button markup - // removed call to jQuery Mobile buttonMarkup function; replaced with base.modButton - .find('button:not(.' + base.options.css.buttonAction + ')').addClass( base.modButton(o.buttonMarkup) ).end() - .find('.' + base.options.css.buttonAction).addClass( base.modButton(actn) ).end() - .find('button').removeClass('ui-corner-all ui-state-default') + // removed call to jQuery Mobile buttonMarkup function; replaced with base.modOptions + .find('button') + .removeClass('ui-corner-all ui-state-default') + .addClass( base.modOptions(o.buttonMarkup) ) .hover(function(){ - $(this).addClass('ui-btn-hover-' + o.buttonHover.theme); + $(this) + .removeClass( markup ? markup + '-' + o.buttonMarkup.theme : '' ) + .addClass( base.modOptions(o.buttonHover, o.buttonMarkup) ); },function(){ - $(this).removeClass('ui-btn-hover-' + o.buttonHover.theme); + $(this) + .removeClass( markup ? markup + '-' + o.buttonHover.theme : '' ) + .addClass( base.modOptions(o.buttonMarkup, o.buttonMarkup) ); }); - // set actionClass (default for jQuery UI = 'ui-state-active'), - // which is the active state of the button (shift is down) - base.options.css.buttonAction = 'ui-btn-down-' + o.buttonActive.theme; - // update keyboard width if preview is showing... after applying mobile theme if (base.msie && base.$preview[0] !== base.el) { base.$preview.hide(); base.$keyboard.css('width',''); base.width = base.$keyboard.outerWidth(); - base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10)); // add about 1em to input width for extra padding + // add about 1em to input width for extra padding + base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10)); base.$preview.width(base.width); base.$preview.show(); } // adjust keyboard position after applying mobile theme - p = base.options.position; - p.of = p.of || base.$el.data('keyboardPosition') || base.$el; - p.collision = (base.options.usePreview) ? p.collision || 'fit fit' : 'flip flip'; - base.$keyboard.position(p); + if ($.ui && $.ui.position) { + p = opts.position; + p.of = p.of || base.$el.data('keyboardPosition') || base.$el; + p.collision = p.collision || 'flipfit flipfit'; + base.$keyboard.position(p); + } }; - base.modButton = function(t){ + base.modOptions = function(t, btn){ + var css = ' ' + ( t.cssClass || '' ); // Using this instead of the jQuery Mobile buttonMarkup because it is expecting 's instead of