Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…t classes.
  • Loading branch information...
commit ddc7f6452ea9c6716abb7338394a980c93ffc9f3 1 parent a47daa0
@Wilto Wilto authored
View
10 css/structure/jquery.mobile.core.css
@@ -45,8 +45,14 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.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; }
.ui-header, .ui-footer { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
-.ui-header .ui-btn-left { position: absolute; left: 5px; top: -2px; }
-.ui-header .ui-btn-right { position: absolute; right: 5px; top: -2px; }
+.ui-header .ui-btn-left,
+.ui-header .ui-btn-right { position: absolute; top: -5px; }
+.ui-header .ui-btn-left,
+.ui-footer .ui-btn-left { left: 5px; }
+.ui-header .ui-btn-right,
+.ui-footer .ui-btn-right { right: 5px; }
+.ui-footer .ui-btn-icon-notext,
+.ui-header .ui-btn-icon-notext { top: -1px; }
.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; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
View
19 css/structure/jquery.mobile.forms.fieldcontain.css
@@ -1,5 +1,22 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
.ui-field-contain:first-child { border-top-width: 0; }
+.ui-header .ui-field-contain,
+.ui-footer .ui-field-contain {
+ width: 25%;
+}
+.ui-header .ui-field-contain-left,
+.ui-header .ui-field-contain-right {
+ position: absolute;
+ top: 0;
+}
+
+.ui-header .ui-field-contain-left {
+ left: 1em;
+}
+.ui-header .ui-field-contain-right {
+ right: 1em;
+}
+
@media all and (min-width: 450px){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
-}
+}
View
19 docs/toolbars/bars-fixed-forms.html
@@ -7,10 +7,8 @@
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
- <script src="../../docs/_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-
</head>
<body>
@@ -18,6 +16,15 @@
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="a">
+ <!-- <input type="submit" value="submitBtn" class="ui-btn-left" /> -->
+
+ <select name="slider2" id="slider2" class="ui-btn-left">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+
+ <button type="submit" class="ui-btn-right">Cancel</button>
+
<h1>Fixed + Forms</h1>
</div>
@@ -29,12 +36,6 @@
</div>
</div><!-- /content -->
- <div data-role="footer" data-theme="a" data-position="fixed">
- <a href="#" data-role="button">Default</a>
- <a href="#" data-role="button" data-mini="true">Mini True</a>
- <a href="#" data-role="button" data-mini="false">Mini False</a>
- </div>
-
</div><!-- /page -->
</body>
View
2  js/jquery.mobile.buttonMarkup.js
@@ -78,7 +78,7 @@ $.fn.buttonMarkup = function( options ) {
if ( o.mini ) {
buttonClass += " ui-mini";
- } else if ( o.mini === false ) {
+ } else if ( o.mini && o.mini === false ) {
buttonClass += " ui-fullsize"; // Used to control styling in headers/footers, where buttons default to `mini` style.
}
View
15 js/jquery.mobile.forms.button.js
@@ -25,6 +25,7 @@ $.widget( "mobile.button", $.mobile.widget, {
o = this.options,
type,
name,
+ classes = "",
$buttonPlaceholder;
// 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, {
!$el.hasClass( "ui-btn" ) && $el.buttonMarkup();
return;
}
+
+
+ // 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
+ /* if( $el[0].className.length ) {
+ classes = $el[0].className;
+ } */
+ if( !!~$el[0].className.indexOf( "ui-btn-left" ) ) {
+ classes = "ui-btn-left";
+ }
+
+ if( !!~$el[0].className.indexOf( "ui-btn-right" ) ) {
+ classes = "ui-btn-right";
+ }
// Add ARIA role
this.button = $( "<div></div>" )
@@ -47,6 +61,7 @@ $.widget( "mobile.button", $.mobile.widget, {
iconshadow: o.iconshadow,
mini: o.mini
})
+ .addClass( classes )
.append( $el.addClass( "ui-btn-hidden" ) );
$button = this.button;
View
14 js/jquery.mobile.forms.select.js
@@ -52,7 +52,19 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
// setup items that are generally necessary for select menu extension
_preExtension: function(){
- this.select = this.element.wrap( "<div class='ui-select'>" );
+ // 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
+ /* if( $el[0].className.length ) {
+ classes = $el[0].className;
+ } */
+ if( !!~this.element[0].className.indexOf( "ui-btn-left" ) ) {
+ classes = " ui-btn-left";
+ }
+
+ if( !!~this.element[0].className.indexOf( "ui-btn-right" ) ) {
+ classes = " ui-btn-right";
+ }
+
+ this.select = this.element.wrap( "<div class='ui-select" + classes + "'>" );
this.selectID = this.select.attr( "id" );
this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
this.isMultiple = this.select[ 0 ].multiple;
Please sign in to comment.
Something went wrong with that request. Please try again.