3 docs/content/content-grids.html
View file
@@ -74,7 +74,8 @@ <h2>Two column grids</h2>
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>


<p>The framework adds left and right margin to buttons in a grid. To align a single (full width) button with those in the grid you can wrap the button in a div with class <code>ui-grid-a</code> without a <code>ui-block</code> class.</p>

<p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>

3 js/jquery.mobile.controlGroup.js
View file
@@ -28,10 +28,11 @@ $.fn.controlgroup = function( options ) {
groupheading = $el.children( "legend" ),
flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
type = $el.find( "input" ).first().attr( "type" );

$el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );

// Replace legend with more stylable replacement div
if ( groupheading.length ) {
$el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
$( "<div role='heading' class='ui-controlgroup-label'>" + groupheading.html() + "</div>" ).insertBefore( $el.children(0) );
groupheading.remove();
}
7 js/jquery.mobile.fieldContain.js
View file
@@ -9,8 +9,13 @@ define( [ "jquery" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {

// filter function removes whitespace between label and form element so we can use inline-block (nodeType 3 = text)
$.fn.fieldcontain = function( options ) {
return this.addClass( "ui-field-contain ui-body ui-br" );
return this
.addClass( "ui-field-contain ui-body ui-br" )
.contents().filter( function() {
return ( this.nodeType === 3 && !/\S/.test( this.nodeValue ) );
}).remove();
};

//auto self-init widgets
5 js/jquery.mobile.forms.button.js
View file
@@ -54,6 +54,11 @@ $.widget( "mobile.button", $.mobile.widget, {
classes = "ui-btn-right";
}

if( $el.attr( "type" ) == "submit" || $el.attr( "type" ) == "reset" ) {
classes += "ui-submit";
}
$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );

// Add ARIA role
this.button = $( "<div></div>" )
.text( $el.text() || $el.val() )
14 js/jquery.mobile.forms.select.js
View file
@@ -89,6 +89,10 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {

options = this.options,

inline = options.inline || this.select.jqmData( "inline" ),
mini = options.mini || this.select.jqmData( "mini" ),
iconpos = options.icon ? ( options.iconpos || this.select.jqmData( "iconpos" ) ) : false,

// IE throws an exception at options.item() function when
// there is no selected item
// select first in this case
@@ -101,21 +105,21 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.buttonMarkup( {
theme: options.theme,
icon: options.icon,
iconpos: options.iconpos,
inline: options.inline,
iconpos: iconpos,
inline: inline,
corners: options.corners,
shadow: options.shadow,
iconshadow: options.iconshadow,
mini: options.mini
mini: mini
});

// Opera does not properly support opacity on select elements
// In Mini, it hides the element, but not its text
// On the desktop,it seems to do the opposite
// for these reasons, using the nativeMenu option results in a full native select in Opera
if ( options.nativeMenu && window.opera && window.opera.version ) {
this.select.addClass( "ui-select-nativeonly" );
}
button.addClass( "ui-select-nativeonly" );
}

// Add counter for multi selects
if ( this.isMultiple ) {