Merge branch 'master' of git://github.com/jquery/jquery-mobile

Author: louy

.gitignore

@@ -5,3 +5,4 @@
 .DS_Store
 cache/
 combined/
+combine/

Makefile

@@ -10,10 +10,14 @@ CSSMIN = ${DIR}.min.css
 
 FILES = js/jquery.ui.widget.js \
   js/jquery.mobile.widget.js \
+  js/jquery.mobile.media.js \
   js/jquery.mobile.support.js \
   js/jquery.mobile.event.js \
   js/jquery.mobile.hashchange.js \
+  js/jquery.mobile.core.js \
+  js/jquery.mobile.navigation.js \
   js/jquery.mobile.page.js \
+  js/jquery.ui.position.js \
   js/jquery.mobile.fixHeaderFooter.js \
   js/jquery.mobile.forms.checkboxradio.js \
   js/jquery.mobile.forms.textinput.js \
@@ -28,8 +32,7 @@ FILES = js/jquery.ui.widget.js \
   js/jquery.mobile.listview.filter.js \
   js/jquery.mobile.dialog.js \
   js/jquery.mobile.navbar.js \
-  js/jquery.mobile.grid.js \
-  js/jquery.mobile.js
+  js/jquery.mobile.grid.js
 
 CSSFILES =  themes/default/jquery.mobile.theme.css \
   themes/default/jquery.mobile.core.css \
@@ -54,19 +57,19 @@ clean:
 	@@rm -rf ${DIR}*
 
 css:
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${CSS}
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSS}
 	@@cat ${CSSFILES} >> ${CSS}
 
 cssmin: css
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${CSSMIN}
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSSMIN}
 	@@java -jar build/yuicompressor-2.4.2.jar --type css ${CSS} >> ${CSSMIN}
 
 mobile:
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${MAX}
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MAX}
 	@@cat ${FILES} >> ${MAX}
 
 min: mobile
-	@@head -8 js/jquery.mobile.js | ${SED_VER} > ${MIN}
+	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MIN}
 	@@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
 	@@cat ${MIN}.tmp >> ${MIN}
 	@@rm -f ${MIN}.tmp

README.md

@@ -16,4 +16,4 @@ You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_h
 Whenever this configuration becomes inconvenient, we can remove it, obviously it's not meant to stay!
 
 - when adding a js or css file, add it to the manifest in its directory and it'll be included in the request
-- As far as JS files go, jQuery.mobile.js is the starting point.
+- As far as JS files go, jQuery.mobile.core.js is the starting point.

build.xml

@@ -20,29 +20,32 @@
 	jquery.mobile.theme.css,
 	jquery.mobile.transitions.css"/>
 	<property name="js-sources" value="jquery.js,
+	jquery.ui.position.js,
+	jquery.ui.widget.js,
+	jquery.mobile.widget.js,
+	jquery.mobile.media.js,
+	jquery.mobile.support.js,
+	jquery.mobile.event.js,
+	jquery.mobile.hashchange.js,
+	jquery.mobile.core.js,
+	jquery.mobile.navigation.js,
+	jquery.mobile.page.js,
 	jquery.mobile.buttonMarkup.js,
 	jquery.mobile.collapsible.js,
 	jquery.mobile.controlGroup.js,
 	jquery.mobile.dialog.js,
-	jquery.mobile.event.js,
 	jquery.mobile.fieldContain.js,
 	jquery.mobile.fixHeaderFooter.js,
-	jquery.mobile.forms.ajaxform.js,
 	jquery.mobile.forms.button.js,
 	jquery.mobile.forms.checkboxradio.js,
 	jquery.mobile.forms.select.js,
 	jquery.mobile.forms.slider.js,
 	jquery.mobile.forms.textinput.js,
 	jquery.mobile.grid.js,
-	jquery.mobile.hashchange.js,
-	jquery.mobile.js,
-	jquery.mobile.listview.filter.js,
 	jquery.mobile.listview.js,
-	jquery.mobile.navbar.js,
-	jquery.mobile.page.js,
-	jquery.mobile.support.js,
-	jquery.mobile.widget.js,
-	jquery.ui.widget.js"/>
+	jquery.mobile.listview.filter.js,
+	jquery.mobile.navbar.js"
+	/>
 
 	<target name="merge">
 		<antcall target="merge_css" />

docs/_assets/js/jqm-docs.js

@@ -1,7 +1,7 @@
 //set up the theme switcher on the homepage
 $('div').live('pagecreate',function(event){
 	if( !$(this).is('.ui-dialog')){ 
-		$('<a href="#">Switch theme</a>')
+		$('<a href="#themeswitcher" data-rel="dialog" data-transition="pop">Switch theme</a>')
 			.buttonMarkup({
 				'icon':'gear',
 				'inline': true,
@@ -12,7 +12,6 @@ $('div').live('pagecreate',function(event){
 			.wrap('<div class="jqm-themeswitcher">')
 			.click(function(){
 				$.themeswitcher();
-				return false;
 			});
 	}	
 	event.stopPropagation();

docs/api/events.html

@@ -82,6 +82,7 @@ <h2>Page show/hide events</h2>
 });
 		</code>
 		</pre>
+		<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes.  This can be done in the <code>mobileinit</code> handler, as described on the <a href="globalconfig.html">global config</a> page.
 		<h2>Page initialization events</h2>
 
 		<p>Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an <code>input</code> element with a <code>type</code> of <code>range</code> will automatically generate a custom slider control.</p>
@@ -95,10 +96,33 @@ <h2>Page initialization events</h2>
 			<dd>Triggered on the page being initialized, after initialization occurs.</dd>
 		</dl>	
 
+		
+				<pre>
+		<code>
+$('#aboutPage').live('pagebeforecreate',function(event){
+  alert('This page was just inserted into the dom!');
+});
+
+$('#aboutPage').live('pagecreate',function(event){
+  alert('This page was just enhanced by jQuery Mobile!');
+});
+		</code>
+		</pre>
+		
 		<p>Note that by binding to <code>pagebeforecreate</code> and returning <code>false</code>, you can prevent the page plugin from making its manipulations.</p>
 
+<pre>
+		<code>
+$('#aboutPage').live('pagebeforecreate',function(event){
+  //run your own enhancement scripting here...
+  return false;
+});
+
+		</code>
+		</pre>		
+		
 		<div class="ui-body ui-body-e">
-			<p><strong>Note on Page IDs: </strong> Page elements in jQuery Mobile utilize the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
+			<p><strong>Note on Page IDs in Alpha 2 release (<em>no longer an issue</em>): </strong> In jQuery Mobile Alpha 2 and older, page elements utilized the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
 		</div>
 
 

docs/api/globalconfig.html

@@ -86,11 +86,6 @@ <h2>Configurable options</h2>
 	<dt>ajaxFormsEnabled (<em>boolean</em>, default: true):</dt> 
 	<dd>jQuery Mobile will automatically handle form submissions through Ajax, when possible.</dd>
 
-
-	<dt>transitions (<em>array</em>, default: ['slide', 'slideup', 'slidedown', 'pop', 'flip', 'fade']):</dt> 
-	<dd>Available CSS transitions in the CSS.</dd>
-
-
 	<dt>defaultTransition (<em>string</em>, default: 'slide'):</dt> 
 	<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
 

docs/api/methods.html

@@ -120,8 +120,10 @@ <h1>Methods</h1>
 			<dd>Examples:
 			<pre>
 			<code>
-<strong>//scroll to Y 100px</strong> 			
-$.mobile.silentScroll(100);	
+<strong>//add a 400px breakpoint</strong> 			
+$.mobile.addResolutionBreakpoints(400);	
+<strong>//add 2 more breakpoints</strong> 			
+$.mobile.addResolutionBreakpoints([600,800]);	
 			</code>
 			</pre>
 

docs/forms/docs-forms.html

@@ -34,6 +34,28 @@ <h2>Form structure</h2>
 <h2>Markup Conventions</h2>
 <p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via normal HTTP post or get still apply. However, one thing to keep in mind is that the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time, so you must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM (and of course, be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute).</p>
 
+	<h2>Auto-initialization of form elements</h2>
+	<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods (see documentation on available methods here: <a href="plugin-eventsmethods.html">Form Plugin Methods</a>). </p>
+	
+	<h2>Preventing auto-initialization of form elements</h2>
+	<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code>data-role="none"</code>. For example:</p>
+	<pre><code>				
+&lt;label for=&quot;foo&quot;&gt;
+&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong>data-role=&quot;none&quot;</strong>&gt;
+	&lt;option value="a" &gt;A&lt;/option&gt;
+	&lt;option value="b" &gt;B&lt;/option&gt;
+	&lt;option value="c" &gt;C&lt;/option&gt;
+&lt;/select&gt;
+</code></pre>
+	
+	
+	<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>"[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
+		<pre><code>
+$(document).bind('mobileinit',function(){
+	<strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
+});	
+		</pre></code>
+	
 			<h2>Dynamic form layout</h2>
 
 			<p>In jQuery Mobile, all form elements are designed to be a flexible width so they will comfortably fit the width of any mobile device. One optimization built into the framework is that we present labels and form elements differently based on screen width. </p>

docs/forms/forms-sample.html

@@ -32,8 +32,7 @@ <h2>Form submission</h2>
 							<option value="Overnight shipping">Overnight</option>
 						</select>
 					</div>
-					
-					<button type="submit" data-theme="a">Submit</button>
+					<button type="submit" data-theme="a" name="submit" value="submit-value">Submit</button>
 				</fieldset>
 			</form>