Skip to content

Commit a92e2c8

Browse files
WiltoWilto
committed
Added “mini” form widget options, optional background on slider widgets.
1 parent dc27600 commit a92e2c8

11 files changed

+462
-19
lines changed

‎css/structure/jquery.mobile.button.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
2-
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; max-width: 30%; }
2+
.ui-btn-mini { margin: .25em 5px; }
33
.ui-btn-inline { display: inline-block; }
44
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
55
.ui-btn input, .ui-btn button { z-index: 2; }
6-
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; }
6+
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
7+
.ui-btn-left .ui-btn-inner, .ui-btn-right .ui-btn-inner { padding: .55em 1.5em .5em; }
8+
.ui-btn-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; }
79
.ui-btn-icon-notext { width: 24px; height: 24px; }
810
.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; }
911
.ui-btn-text { position: relative; z-index: 1; }

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
2+
23
input.ui-slider-input,
34
.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
45
select.ui-slider-switch { display: none; }
56
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
7+
div.ui-slider-mini { height: 12px; overflow: hidden; margin-left: 10px; }
8+
div.ui-slider-bg { border: none; height: 100%; padding-right: 8px; }
69
div.ui-slider-switch { width: 99.8%; }
710
.ui-field-contain div.ui-slider-switch { width: 50%; }
811
a.ui-slider-handle { position: absolute; z-index: 1; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
12+
div.ui-slider-mini a.ui-slider-handle { height: 10px; width: 10px; margin: -6px 0 0 0; }
913
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
1014
@media all and (min-width: 480px){
1115
.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:
2226
.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; }
2327

2428
div.ui-slider-switch a.ui-slider-handle { z-index: 1; width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
25-
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; }
29+
span.ui-slider-label { width: 100%; position: absolute; font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
30+
31+
.ui-slider-inline { width: 120px; display: inline-block; }
32+
2633
span.ui-slider-label-a { left: -100%; margin-right: -1px }
2734
span.ui-slider-label-b { right: -100%; margin-left: -1px }

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
77
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
88
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
99
.ui-input-search .ui-input-clear-hidden { display: none; }
10+
.ui-input-mini, .ui-input-mini input { font-size: 14px !important; }
11+
textarea.ui-input-mini { height: 45px; }
1012

1113
/* orientation adjustments - incomplete!*/
1214
@media all and (min-width: 450px){

‎docs/_assets/css/jqm-docs.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
2323
#jqm-homeheader img { width: 235px; }
2424
img { max-width: 100%; }
2525

26-
.ui-header .jqm-home { top:0.65em; }
26+
.ui-header .jqm-home { top: 0; }
2727
nav { margin: 0; }
2828

2929
p.intro {

‎docs/toolbars/bars-fixed-forms.html‎

Lines changed: 411 additions & 0 deletions
Large diffs are not rendered by default.

‎js/jquery.mobile.buttonMarkup.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ $.fn.buttonMarkup = function( options ) {
1818
inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
1919
shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
2020
corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
21-
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" )
21+
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
22+
mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" ),
2223
}, options ),
2324

2425
// Classes Defined
@@ -30,9 +31,6 @@ $.fn.buttonMarkup = function( options ) {
3031
buttonText = document.createElement( o.wrapperEls ),
3132
buttonIcon = o.icon ? document.createElement( "span" ) : null;
3233

33-
// if so, prevent double enhancement, and continue with rest of the elements.
34-
if( e.tagName === "INPUT" && el.jqmData('role') === "button" ) continue;
35-
3634
// if this is a button, check if it's been enhanced and, if not, use the right function
3735
if( e.tagName === "BUTTON" ) {
3836
if ( !$( e.parentNode ).hasClass( "ui-btn" ) ) $( e ).button();
@@ -51,9 +49,14 @@ $.fn.buttonMarkup = function( options ) {
5149
buttonClass = "ui-btn ui-btn-up-" + o.theme;
5250

5351
if ( o.inline ) {
52+
console.log( 'inline' );
5453
buttonClass += " ui-btn-inline";
5554
}
5655

56+
if ( o.mini ) {
57+
buttonClass += " ui-btn-mini";
58+
}
59+
5760
if ( o.icon ) {
5861
o.icon = "ui-icon-" + o.icon;
5962
o.iconpos = o.iconpos || "left";

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ $.widget( "mobile.button", $.mobile.widget, {
1515
corners: true,
1616
shadow: true,
1717
iconshadow: true,
18-
initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
18+
initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']",
19+
mini: false
1920
},
2021
_create: function() {
2122
var $el = this.element,
@@ -27,7 +28,7 @@ $.widget( "mobile.button", $.mobile.widget, {
2728

2829
// if this is a link, check if it's been enhanced and, if not, use the right function
2930
if( $el[ 0 ].tagName === "A" ) {
30-
if ( !$el.hasClass( "ui-btn" ) ) $el.buttonMarkup();
31+
!$el.hasClass( "ui-btn" ) && $el.buttonMarkup();
3132
return;
3233
}
3334

@@ -42,7 +43,8 @@ $.widget( "mobile.button", $.mobile.widget, {
4243
inline: o.inline,
4344
corners: o.corners,
4445
shadow: o.shadow,
45-
iconshadow: o.iconshadow
46+
iconshadow: o.iconshadow,
47+
mini: o.mini
4648
})
4749
.append( $el.addClass( "ui-btn-hidden" ) );
4850

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
2222
// filter works though.
2323
label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label" ).filter( "[for='" + input[ 0 ].id + "']" ),
2424
inputtype = input.attr( "type" ),
25+
mini = input.closest( "form,fieldset" ).jqmData('mini'),
2526
checkedState = inputtype + "-on",
2627
uncheckedState = inputtype + "-off",
2728
icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
@@ -53,7 +54,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
5354
label.buttonMarkup({
5455
theme: this.options.theme,
5556
icon: icon,
56-
shadow: false
57+
shadow: false,
58+
mini: mini
5759
});
5860

5961
// Wrap the input + label in a div

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
2222
closeText: "Close",
2323
nativeMenu: true,
2424
preventFocusZoom: true,
25-
initSelector: "select:not(:jqmData(role='slider'))"
25+
initSelector: "select:not(:jqmData(role='slider'))",
26+
mini: false
2627
},
2728

2829
_button: function(){
@@ -88,7 +89,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
8889
inline: options.inline,
8990
corners: options.corners,
9091
shadow: options.shadow,
91-
iconshadow: options.iconshadow
92+
iconshadow: options.iconshadow,
93+
mini: options.mini
9294
});
9395

9496
// Opera does not properly support opacity on select elements

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ $.widget( "mobile.slider", $.mobile.widget, {
1111
theme: null,
1212
trackTheme: null,
1313
disabled: false,
14-
initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
14+
initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",
15+
mini: false
1516
},
1617

1718
_create: function() {
@@ -47,8 +48,14 @@ $.widget( "mobile.slider", $.mobile.widget, {
4748

4849
step = window.parseFloat( control.attr( "step" ) || 1 ),
4950

51+
inlineClass = ( this.options.inline || control.jqmData("inline") == true ) ? " ui-slider-inline" : "",
52+
53+
miniClass = ( this.options.mini || control.jqmData("mini") ) ? " ui-slider-mini" : "",
54+
5055
slider = $( "<div class='ui-slider " + selectClass + " ui-btn-down-" + trackTheme +
51-
" ui-btn-corner-all' role='application'></div>" ),
56+
" ui-btn-corner-all" + inlineClass + miniClass + "' role='application'></div>" ),
57+
58+
valuebg = control.jqmData("highlight") && cType != "select" ? $( "<div class='ui-slider-bg ui-btn-active ui-btn-corner-all'></div>" ).prependTo( slider ) : false,
5259

5360
handle = $( "<a href='#' class='ui-slider-handle'></a>" )
5461
.appendTo( slider )
@@ -67,6 +74,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
6774
$.extend( this, {
6875
slider: slider,
6976
handle: handle,
77+
valuebg: valuebg,
7078
dragging: false,
7179
beforeStart: null,
7280
userModified: false,
@@ -330,6 +338,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
330338
"aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
331339
title: cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText()
332340
});
341+
this.valuebg && this.valuebg.css( "width", percent + "%" );
333342

334343
// add/remove classes for flip toggle switch
335344
if ( cType === "select" ) {

0 commit comments

Comments
 (0)