From a92e2c8b504aef08bd99eb79bc8c1241567c3b47 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Sat, 28 Jan 2012 14:03:30 -0500 Subject: [PATCH] =?UTF-8?q?Added=20=E2=80=9Cmini=E2=80=9D=20form=20widget?= =?UTF-8?q?=20options,=20optional=20background=20on=20slider=20widgets.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/structure/jquery.mobile.button.css | 6 +- css/structure/jquery.mobile.forms.slider.css | 9 +- .../jquery.mobile.forms.textinput.css | 2 + docs/_assets/css/jqm-docs.css | 2 +- docs/toolbars/bars-fixed-forms.html | 411 ++++++++++++++++++ js/jquery.mobile.buttonMarkup.js | 11 +- js/jquery.mobile.forms.button.js | 8 +- js/jquery.mobile.forms.checkboxradio.js | 4 +- js/jquery.mobile.forms.select.js | 6 +- js/jquery.mobile.forms.slider.js | 13 +- js/jquery.mobile.forms.textinput.js | 9 +- 11 files changed, 462 insertions(+), 19 deletions(-) create mode 100644 docs/toolbars/bars-fixed-forms.html diff --git a/css/structure/jquery.mobile.button.css b/css/structure/jquery.mobile.button.css index 18de739f..60a3db18 100644 --- a/css/structure/jquery.mobile.button.css +++ b/css/structure/jquery.mobile.button.css @@ -1,9 +1,11 @@ .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; } -.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; max-width: 30%; } +.ui-btn-mini { margin: .25em 5px; } .ui-btn-inline { display: inline-block; } .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; } .ui-btn input, .ui-btn button { z-index: 2; } -.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; } +.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; } +.ui-btn-left .ui-btn-inner, .ui-btn-right .ui-btn-inner { padding: .55em 1.5em .5em; } +.ui-btn-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; } .ui-btn-icon-notext { width: 24px; height: 24px; } .ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; } .ui-btn-text { position: relative; z-index: 1; } diff --git a/css/structure/jquery.mobile.forms.slider.css b/css/structure/jquery.mobile.forms.slider.css index 56b525c4..1b96cdf7 100644 --- a/css/structure/jquery.mobile.forms.slider.css +++ b/css/structure/jquery.mobile.forms.slider.css @@ -1,11 +1,15 @@ label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; } + input.ui-slider-input, .ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; } 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-mini { height: 12px; overflow: hidden; margin-left: 10px; } +div.ui-slider-bg { border: none; height: 100%; padding-right: 8px; } div.ui-slider-switch { width: 99.8%; } .ui-field-contain div.ui-slider-switch { width: 50%; } a.ui-slider-handle { position: absolute; z-index: 1; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; } +div.ui-slider-mini a.ui-slider-handle { height: 10px; width: 10px; margin: -6px 0 0 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; } @@ -22,6 +26,9 @@ div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: .ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; } div.ui-slider-switch a.ui-slider-handle { z-index: 1; width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; } -span.ui-slider-label { width: 100%; position: absolute; height: 32px; font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; } +span.ui-slider-label { width: 100%; position: absolute; font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; } + +.ui-slider-inline { width: 120px; display: inline-block; } + span.ui-slider-label-a { left: -100%; margin-right: -1px } span.ui-slider-label-b { right: -100%; margin-left: -1px } diff --git a/css/structure/jquery.mobile.forms.textinput.css b/css/structure/jquery.mobile.forms.textinput.css index ec7432e4..b590ebe4 100644 --- a/css/structure/jquery.mobile.forms.textinput.css +++ b/css/structure/jquery.mobile.forms.textinput.css @@ -7,6 +7,8 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; .ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; } .ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; } .ui-input-search .ui-input-clear-hidden { display: none; } +.ui-input-mini, .ui-input-mini input { font-size: 14px !important; } +textarea.ui-input-mini { height: 45px; } /* orientation adjustments - incomplete!*/ @media all and (min-width: 450px){ diff --git a/docs/_assets/css/jqm-docs.css b/docs/_assets/css/jqm-docs.css index 61f0b5f2..cb8a5bc7 100644 --- a/docs/_assets/css/jqm-docs.css +++ b/docs/_assets/css/jqm-docs.css @@ -23,7 +23,7 @@ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } #jqm-homeheader img { width: 235px; } img { max-width: 100%; } -.ui-header .jqm-home { top:0.65em; } +.ui-header .jqm-home { top: 0; } nav { margin: 0; } p.intro { diff --git a/docs/toolbars/bars-fixed-forms.html b/docs/toolbars/bars-fixed-forms.html new file mode 100644 index 00000000..c4e1441b --- /dev/null +++ b/docs/toolbars/bars-fixed-forms.html @@ -0,0 +1,411 @@ + + + + + + jQuery Mobile Framework - Fixed Toolbars + + + + + + + + + +
+ +
+ +

Fixed + Forms

+ Home +
+ + +
+
+ +
+
+ +
+ + +
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+ Normal + Mini + + Normal Inline + Mini Inline + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ Snacks: + + + + + + +
+ +
+ Snacks: + + + + + + + +
+ +
+ +
+
+ Font styling: + + + + + + + + +
+ +
+ Font styling: + + + + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +

Fixed toolbars

+

This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view the framework will dynamically re-position them into view if the browser supports this feature, otherwise they will simply stay inline.

+

To enable this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.

+ + +

Tap to toggle visibility

+

To toggle the visibility of fixed toolbars, tap the screen. For example, if the fixed toolbars are visible, tap the screen to hide the toolbars and take full advantage of the screen real estate for content. Tapping again will bring the toolbars back into view.

+

It's possible to turn off the the tap to toggle visibility behavior like this:

+

+$.mobile.fixedToolbars
+   .setTouchToggleEnabled(false);
+
+ +

Updating toolbar positioning

+

If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use $.mobile.fixedToolbars.show();. To have them appear immediately without the fade:

+

+$.mobile.fixedToolbars
+   .show(true);
+
+ +

There is also an updatelayout event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this updatelayout event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the updatelayout event to update the widget in response.

+ + +

Known limitations

+ +

jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the position:fixed CSS property. Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page. We have optimized this as much as we possibly can, but there are going to be situations where fixed toolbars won't work perfectly due to browser limitations, so this is important to note when considering whether to use this feature.

+ +

True fixed toolbars: touchOverflowEnabled

+ +

In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called touchOverflowEnabled that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows us to position the toolbars outside the scrolling body so they truly stay fixed in place at all times. Learn more about this feature on the global options page or demo this feature (currently iOS5 only, other browsers will fall back to dynamically re-positioned fixed toolbars).

+ +
+ + +

The rest of the page is just sample content to make the page very long

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

+ + +

And an inset list

+ + + +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

+ + +

Embedded form

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+ + +
+
+
+
+
+
+
+ +

A bit more text

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

+ + + + +
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js index 884025de..3bac6a15 100755 --- a/js/jquery.mobile.buttonMarkup.js +++ b/js/jquery.mobile.buttonMarkup.js @@ -18,7 +18,8 @@ $.fn.buttonMarkup = function( options ) { inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ), shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ), corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ), - iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ) + iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ), + mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" ), }, options ), // Classes Defined @@ -30,9 +31,6 @@ $.fn.buttonMarkup = function( options ) { buttonText = document.createElement( o.wrapperEls ), buttonIcon = o.icon ? document.createElement( "span" ) : null; - // if so, prevent double enhancement, and continue with rest of the elements. - if( e.tagName === "INPUT" && el.jqmData('role') === "button" ) continue; - // if this is a button, check if it's been enhanced and, if not, use the right function if( e.tagName === "BUTTON" ) { if ( !$( e.parentNode ).hasClass( "ui-btn" ) ) $( e ).button(); @@ -51,9 +49,14 @@ $.fn.buttonMarkup = function( options ) { buttonClass = "ui-btn ui-btn-up-" + o.theme; if ( o.inline ) { + console.log( 'inline' ); buttonClass += " ui-btn-inline"; } + if ( o.mini ) { + buttonClass += " ui-btn-mini"; + } + if ( o.icon ) { o.icon = "ui-icon-" + o.icon; o.iconpos = o.iconpos || "left"; diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js index bd0fe3a0..176c7a63 100644 --- a/js/jquery.mobile.forms.button.js +++ b/js/jquery.mobile.forms.button.js @@ -15,7 +15,8 @@ $.widget( "mobile.button", $.mobile.widget, { corners: true, shadow: true, iconshadow: true, - initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']" + initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']", + mini: false }, _create: function() { var $el = this.element, @@ -27,7 +28,7 @@ $.widget( "mobile.button", $.mobile.widget, { // if this is a link, check if it's been enhanced and, if not, use the right function if( $el[ 0 ].tagName === "A" ) { - if ( !$el.hasClass( "ui-btn" ) ) $el.buttonMarkup(); + !$el.hasClass( "ui-btn" ) && $el.buttonMarkup(); return; } @@ -42,7 +43,8 @@ $.widget( "mobile.button", $.mobile.widget, { inline: o.inline, corners: o.corners, shadow: o.shadow, - iconshadow: o.iconshadow + iconshadow: o.iconshadow, + mini: o.mini }) .append( $el.addClass( "ui-btn-hidden" ) ); diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js index 7fd71075..08593df0 100644 --- a/js/jquery.mobile.forms.checkboxradio.js +++ b/js/jquery.mobile.forms.checkboxradio.js @@ -22,6 +22,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { // filter works though. label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label" ).filter( "[for='" + input[ 0 ].id + "']" ), inputtype = input.attr( "type" ), + mini = input.closest( "form,fieldset" ).jqmData('mini'), checkedState = inputtype + "-on", uncheckedState = inputtype + "-off", icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState, @@ -53,7 +54,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { label.buttonMarkup({ theme: this.options.theme, icon: icon, - shadow: false + shadow: false, + mini: mini }); // Wrap the input + label in a div diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 72a6456e..8655ea8d 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -22,7 +22,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { closeText: "Close", nativeMenu: true, preventFocusZoom: true, - initSelector: "select:not(:jqmData(role='slider'))" + initSelector: "select:not(:jqmData(role='slider'))", + mini: false }, _button: function(){ @@ -88,7 +89,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { inline: options.inline, corners: options.corners, shadow: options.shadow, - iconshadow: options.iconshadow + iconshadow: options.iconshadow, + mini: options.mini }); // Opera does not properly support opacity on select elements diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js index 76ca9d59..cd26ea2a 100644 --- a/js/jquery.mobile.forms.slider.js +++ b/js/jquery.mobile.forms.slider.js @@ -11,7 +11,8 @@ $.widget( "mobile.slider", $.mobile.widget, { theme: null, trackTheme: null, disabled: false, - initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')" + initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')", + mini: false }, _create: function() { @@ -47,8 +48,14 @@ $.widget( "mobile.slider", $.mobile.widget, { step = window.parseFloat( control.attr( "step" ) || 1 ), + inlineClass = ( this.options.inline || control.jqmData("inline") == true ) ? " ui-slider-inline" : "", + + miniClass = ( this.options.mini || control.jqmData("mini") ) ? " ui-slider-mini" : "", + slider = $( "
" ), + " ui-btn-corner-all" + inlineClass + miniClass + "' role='application'>" ), + + valuebg = control.jqmData("highlight") && cType != "select" ? $( "
" ).prependTo( slider ) : false, handle = $( "" ) .appendTo( slider ) @@ -67,6 +74,7 @@ $.widget( "mobile.slider", $.mobile.widget, { $.extend( this, { slider: slider, handle: handle, + valuebg: valuebg, dragging: false, beforeStart: null, userModified: false, @@ -330,6 +338,7 @@ $.widget( "mobile.slider", $.mobile.widget, { "aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(), title: cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText() }); + this.valuebg && this.valuebg.css( "width", percent + "%" ); // add/remove classes for flip toggle switch if ( cType === "select" ) { diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index bca87149..cb09867c 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -18,6 +18,8 @@ $.widget( "mobile.textinput", $.mobile.widget, { o = this.options, theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ), themeclass = " ui-body-" + theme, + mini = input.jqmData("mini") == true, + miniclass = mini ? " ui-input-mini" : "", focusedEl, clearbtn; $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" ); @@ -42,7 +44,7 @@ $.widget( "mobile.textinput", $.mobile.widget, { //"search" input widget if ( input.is( "[type='search'],:jqmData(type='search')" ) ) { - focusedEl = input.wrap( "
" ).parent(); + focusedEl = input.wrap( "
" ).parent(); clearbtn = $( "clear text" ) .tap(function( event ) { input.val( "" ).focus(); @@ -55,7 +57,8 @@ $.widget( "mobile.textinput", $.mobile.widget, { icon: "delete", iconpos: "notext", corners: true, - shadow: true + shadow: true, + mini: mini }); function toggleClear() { @@ -69,7 +72,7 @@ $.widget( "mobile.textinput", $.mobile.widget, { input.bind('paste cut keyup focus change blur', toggleClear); } else { - input.addClass( "ui-corner-all ui-shadow-inset" + themeclass ); + input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass ); } input.focus(function() {