Skip to content
This repository
Browse code

Ensured link buttons, form buttons, and selects obey ui-btn-left/righ…

…t classes.
  • Loading branch information...
commit ddc7f6452ea9c6716abb7338394a980c93ffc9f3 1 parent a47daa0
Mat Marquis authored February 14, 2012
10  css/structure/jquery.mobile.core.css
@@ -45,8 +45,14 @@ div.ui-mobile-viewport { overflow-x: hidden; }
45 45
 .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
46 46
 
47 47
 .ui-header, .ui-footer { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
48  
-.ui-header .ui-btn-left { position: absolute; left: 5px; top: -2px;  }
49  
-.ui-header .ui-btn-right { position: absolute; right: 5px; top: -2px; }
  48
+.ui-header .ui-btn-left,
  49
+.ui-header .ui-btn-right { position: absolute; top: -5px; }
  50
+.ui-header .ui-btn-left,
  51
+.ui-footer .ui-btn-left { left: 5px; }
  52
+.ui-header .ui-btn-right,
  53
+.ui-footer .ui-btn-right { right: 5px; }
  54
+.ui-footer .ui-btn-icon-notext,
  55
+.ui-header .ui-btn-icon-notext { top: -1px; }
50 56
 .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em;  padding: 0;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
51 57
 .ui-footer .ui-title { margin: .6em 15px .8em;  }
52 58
 
19  css/structure/jquery.mobile.forms.fieldcontain.css
... ...
@@ -1,5 +1,22 @@
1 1
 .ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
2 2
 .ui-field-contain:first-child { border-top-width: 0; }
  3
+.ui-header .ui-field-contain,
  4
+.ui-footer .ui-field-contain {
  5
+	width: 25%;
  6
+}
  7
+.ui-header .ui-field-contain-left,
  8
+.ui-header .ui-field-contain-right {
  9
+	position: absolute;
  10
+	top: 0;
  11
+}
  12
+
  13
+.ui-header .ui-field-contain-left {
  14
+	left: 1em;
  15
+}
  16
+.ui-header .ui-field-contain-right {
  17
+	right: 1em;
  18
+}
  19
+
3 20
 @media all and (min-width: 450px){
4 21
 	.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
5  
-}	
  22
+}
19  docs/toolbars/bars-fixed-forms.html
@@ -7,10 +7,8 @@
7 7
 	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
8 8
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9 9
 
  10
+	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
10 11
 	<script src="../../js/jquery.js"></script>
11  
-	<script src="../../docs/_assets/js/jqm-docs.js"></script>
12  
-	<script src="../../js/"></script>
13  
-
14 12
 
15 13
 </head> 
16 14
 <body> 
@@ -18,6 +16,15 @@
18 16
 <div data-role="page" class="type-interior">
19 17
 
20 18
 	<div data-role="header" data-theme="a">
  19
+		<!-- <input type="submit" value="submitBtn" class="ui-btn-left" /> -->
  20
+		
  21
+		<select name="slider2" id="slider2" class="ui-btn-left">
  22
+			<option value="off">Off</option>
  23
+			<option value="on">On</option>
  24
+		</select>
  25
+		
  26
+		<button type="submit" class="ui-btn-right">Cancel</button>
  27
+		
21 28
 		<h1>Fixed + Forms</h1>
22 29
 	</div>
23 30
 	
@@ -29,12 +36,6 @@
29 36
 		</div>
30 37
 	</div><!-- /content -->
31 38
 
32  
-	<div data-role="footer" data-theme="a" data-position="fixed">
33  
-		<a href="#" data-role="button">Default</a>
34  
-		<a href="#" data-role="button" data-mini="true">Mini True</a>
35  
-		<a href="#" data-role="button" data-mini="false">Mini False</a>
36  
-	</div>
37  
-
38 39
 </div><!-- /page -->
39 40
 
40 41
 </body>
2  js/jquery.mobile.buttonMarkup.js
@@ -78,7 +78,7 @@ $.fn.buttonMarkup = function( options ) {
78 78
 
79 79
 		if ( o.mini ) {
80 80
 			buttonClass += " ui-mini";
81  
-		} else if ( o.mini === false ) {
  81
+		} else if ( o.mini && o.mini === false ) {
82 82
 			buttonClass += " ui-fullsize"; // Used to control styling in headers/footers, where buttons default to `mini` style.
83 83
 		}
84 84
 
15  js/jquery.mobile.forms.button.js
@@ -25,6 +25,7 @@ $.widget( "mobile.button", $.mobile.widget, {
25 25
 			o = this.options,
26 26
 			type,
27 27
 			name,
  28
+			classes = "",
28 29
 			$buttonPlaceholder;
29 30
 
30 31
 		// if this is a link, check if it's been enhanced and, if not, use the right function
@@ -32,6 +33,19 @@ $.widget( "mobile.button", $.mobile.widget, {
32 33
 	 	 	!$el.hasClass( "ui-btn" ) && $el.buttonMarkup();
33 34
 	 	 	return;
34 35
  	 	}
  36
+		
  37
+		
  38
+		// TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
  39
+		/* if( $el[0].className.length ) {
  40
+			classes = $el[0].className;
  41
+		} */
  42
+		if( !!~$el[0].className.indexOf( "ui-btn-left" ) ) {
  43
+			classes = "ui-btn-left";
  44
+		}
  45
+		
  46
+		if(  !!~$el[0].className.indexOf( "ui-btn-right" ) ) {
  47
+			classes = "ui-btn-right";
  48
+		}
35 49
 
36 50
 		// Add ARIA role
37 51
 		this.button = $( "<div></div>" )
@@ -47,6 +61,7 @@ $.widget( "mobile.button", $.mobile.widget, {
47 61
 				iconshadow: o.iconshadow,
48 62
 				mini: o.mini
49 63
 			})
  64
+			.addClass( classes )
50 65
 			.append( $el.addClass( "ui-btn-hidden" ) );
51 66
 
52 67
         $button = this.button;
14  js/jquery.mobile.forms.select.js
@@ -52,7 +52,19 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
52 52
 
53 53
 	// setup items that are generally necessary for select menu extension
54 54
 	_preExtension: function(){
55  
-		this.select = this.element.wrap( "<div class='ui-select'>" );
  55
+		// TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
  56
+		/* if( $el[0].className.length ) {
  57
+			classes = $el[0].className;
  58
+		} */
  59
+		if( !!~this.element[0].className.indexOf( "ui-btn-left" ) ) {
  60
+			classes =  " ui-btn-left";
  61
+		}
  62
+		
  63
+		if(  !!~this.element[0].className.indexOf( "ui-btn-right" ) ) {
  64
+			classes = " ui-btn-right";
  65
+		}
  66
+		
  67
+		this.select = this.element.wrap( "<div class='ui-select" + classes + "'>" );
56 68
 		this.selectID  = this.select.attr( "id" );
57 69
 		this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
58 70
 		this.isMultiple = this.select[ 0 ].multiple;

0 notes on commit ddc7f64

Please sign in to comment.
Something went wrong with that request. Please try again.