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

jefflembeck · Oct 26, 2012 · 43d3a0a · 43d3a0a
2 parents 7a7601a + 6fe7844
commit 43d3a0a
Show file tree

Hide file tree

Showing 38 changed files with 26,874 additions and 24 deletions.
diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css
@@ -34,7 +34,6 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin
 .ui-selectmenu { padding: 6px; min-width: 160px; }
 .ui-selectmenu .ui-listview { margin: 0; }
 .ui-selectmenu .ui-btn.ui-li-divider { cursor: default; }
-.ui-selectmenu-hidden { top: -99999px; left: -9999px; }
 .ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; }
 .ui-selectmenu-list .ui-li .ui-icon { display: block; }
 .ui-li.ui-selectmenu-placeholder { display: none; }

diff --git a/css/structure/jquery.mobile.popup.css b/css/structure/jquery.mobile.popup.css
@@ -169,4 +169,6 @@
 .ui-popup.ui-corner-all > .ui-footer:only-child {
 	-webkit-border-radius: inherit;
 	border-radius:         inherit;
-}
+}
+
+.ui-popup-hidden { top: -99999px; left: -9999px; }
diff --git a/docs/pages/Backbone-Require/index.html b/docs/pages/Backbone-Require/index.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html class="no-js ui-mobile-rendering" lang="en">
+<head>
+      <title>Backbone.js, Require.js, and jQuery Mobile</title>
+      <meta name="description" content="">
+
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+
+      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+      <script src="js/libs/require.js" data-main="js/mobile"></script>
+</head>
+<body>
+
+<div id="categories" data-role="page" data-title="Categories">
+
+      <div data-role="header">
+            <h1>Categories</h1>
+      </div><!-- /header -->
+
+      <div data-role="content">
+            <h2>Select a Category Below:</h2>
+            <ul data-role="listview" data-inset="true">
+                  <li><a href="#category?animals" class="animals">Animals</a></li>
+                  <li><a href="#category?colors" class="colors">Colors</a></li>
+                  <li><a href="#category?vehicles" class="vehicles">Vehicles</a></li>
+            </ul>
+      </div><!-- /content -->
+
+</div>
+
+<div id="animals" data-role="page" data-title="Animals">
+
+      <div data-role="header">
+	    <h1>Animals</h1>
+      </div><!-- /header -->
+
+      <div data-role="content">
+            <ul data-role="listview" data-inset="true">
+            </ul>
+      </div><!-- /content -->
+</div>
+
+<div id="colors" data-role="page" data-title="Colors">
+
+      <div data-role="header">
+	    <h1>Colors</h1>
+      </div><!-- /header -->
+
+      <div data-role="content">
+            <ul data-role="listview" data-inset="true">
+            </ul>
+      </div><!-- /content -->
+
+</div>
+
+<div id="vehicles" data-role="page" data-title="Vehicles">
+
+      <div data-role="header">
+	    <h1>Vehicles</h1>
+      </div><!-- /header -->
+
+      <div data-role="content">
+            <ul data-role="listview" data-inset="true">
+            </ul>
+      </div><!-- /content -->
+
+</div>
+
+<!-- Underscore Template that is used to display all of the Category Models -->
+<script id="categoryItems" type="text/template">
+
+      <% _.each( collection.toJSON(), function( category, id ) { %>
+
+            <li class="ui-li ui-li-static ui-btn-up-c ui-corner-top">
+                  <%= category.type %>
+            </li>
+
+      <% }); %>
+
+</script>
+
+</body>
+</html>
diff --git a/docs/pages/Backbone-Require/js/collections/CategoriesCollection.js b/docs/pages/Backbone-Require/js/collections/CategoriesCollection.js
@@ -0,0 +1,98 @@
+// Category Collection
+// ===================
+
+// Includes file dependencies
+define([ "jquery","backbone","models/CategoryModel" ], function( $, Backbone, CategoryModel ) {
+
+    // Extends Backbone.Router
+    var Collection = Backbone.Collection.extend( {
+
+        // The Collection constructor
+        initialize: function( models, options ) {
+
+            // Sets the type instance property (ie. animals)
+            this.type = options.type;
+
+        },
+
+        // Sets the Collection model property to be a Category Model
+        model: CategoryModel,
+
+        // Sample JSON data that in a real app will most likely come from a REST web service
+        jsonArray: [
+
+            { "category": "animals", "type": "Pets" },
+
+            { "category": "animals", "type": "Farm Animals" },
+
+            { "category": "animals", "type": "Wild Animals" },
+
+            { "category": "colors", "type": "Blue" },
+
+            { "category": "colors", "type": "Green" },
+
+            { "category": "colors", "type": "Orange" },
+
+            { "category": "colors", "type": "Purple" },
+
+            { "category": "colors", "type": "Red" },
+
+            { "category": "colors", "type": "Yellow" },
+
+            { "category": "colors", "type": "Violet" },
+
+            { "category": "vehicles", "type": "Cars" },
+
+            { "category": "vehicles", "type": "Planes" },
+
+            { "category": "vehicles", "type": "Construction" }
+
+        ],
+
+        // Overriding the Backbone.sync method (the Backbone.fetch method calls the sync method when trying to fetch data)
+        sync: function( method, model, options ) {
+
+            // Local Variables
+            // ===============
+
+            // Instantiates an empty array
+            var categories = [],
+
+                // Stores the this context in the self variable
+                self = this,
+
+                // Creates a jQuery Deferred Object
+                deferred = $.Deferred();
+
+            // Uses a setTimeout to mimic a real world application that retrieves data asynchronously
+            setTimeout( function() {
+
+                // Filters the above sample JSON data to return an array of only the correct category type
+                categories = _.filter( self.jsonArray, function( row ) {
+
+                    return row.category === self.type;
+
+                } );
+
+                // Calls the options.success method and passes an array of objects (Internally saves these objects as models to the current collection)
+                options.success( categories );
+
+                // Triggers the custom `added` method (which the Category View listens for)
+                self.trigger( "added" );
+
+                // Resolves the deferred object (this triggers the changePage method inside of the Category Router)
+                deferred.resolve();
+
+            }, 1000);
+
+            // Returns the deferred object
+            return deferred;
+
+        }
+
+    } );
+
+    // Returns the Model class
+    return Collection;
+
+} );