Fixed #296 - scrollview dynamic sizing

2026-03-13 10:22:08 +08:00 · 2013-12-08 20:34:27 -06:00
parent c08007d248
commit 2e87fe306e
10 changed files with 143 additions and 6 deletions
--- a/examples/starters/flickr/README.md
+++ b/examples/starters/flickr/README.md
--- a/examples/starters/flickr/index.html
+++ b/examples/starters/flickr/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html ng-app="myApp">
+
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+  <!-- Sets initial viewport load and disables zooming  -->
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+
+  <title></title>
+
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" type="text/css" href="/dist/css/ionic.css">
+
+  <script src="/dist/js/ionic.js"></script>
+  <script src="/dist/js/angular/angular.js"></script>
+  <script src="/dist/js/angular/angular-animate.js"></script>
+  <script src="/dist/js/angular/angular-route.js"></script>
+  <script src="/dist/js/angular/angular-touch.js"></script>
+  <script src="/dist/js/angular/angular-sanitize.js"></script>
+  <script src="/dist/js/angular/angular-resource.js"></script>
+  <script src="/dist/js/ionic-angular.js"></script>
+
+
+  <script src="script.js"></script>
+</head>
+
+<body>
+
+  <div ng-controller="FlickrCtrl">
+    <header-bar title="'Flickr Search'" type="bar-dark">
+    </header-bar>
+    <content has-header="true">
+      <div class="list">
+        <div class="item item-input-inset">
+          <label class="item-input-wrapper" id="search-input">
+            <i class="icon ion-search placeholder-icon"></i>
+            <input type="text" placeholder="Search" ng-model="query" ng-change="search()">
+          </label>
+        </div>
+      </div>
+      <div id="photos" class="clearfix">
+        <div class="photo" ng-repeat="photo in photos.items">
+          <img ng-src="{{ photo.media.m }}">
+        </div>
+      </div>
+    </content>
+  </div>
+
+</body>
+
+</html>
--- a/examples/starters/flickr/script.js
+++ b/examples/starters/flickr/script.js
@@ -0,0 +1,34 @@
+angular.module('myApp', ['ionic', 'ngResource'])
+
+.factory('Flickr', function($resource, $q) {
+  var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne', 
+      { format: 'json', jsoncallback: 'JSON_CALLBACK' }, 
+      { 'load': { 'method': 'JSONP' } });
+      
+  return {
+    search: function(query) {
+      var q = $q.defer();
+      photosPublic.load({
+        tags: query
+      }, function(resp) {
+        q.resolve(resp);
+      }, function(err) {
+        q.reject(err);
+      })
+      
+      return q.promise;
+    }
+  }
+})
+.controller('FlickrCtrl', function($scope, Flickr) {
+  var doSearch = ionic.debounce(function(query) {
+    Flickr.search(query).then(function(resp) {
+      $scope.photos = resp;
+    });
+  }, 300);
+  
+  $scope.search = function() {
+    doSearch($scope.query);
+  }
+
+});
--- a/examples/starters/flickr/style.css
+++ b/examples/starters/flickr/style.css
@@ -0,0 +1,18 @@
+#search-input {
+  text-align: center;
+}
+
+#photos {
+-webkit-flex-wrap: wrap; 
+-webkit-flex-direction: row;
+}
+
+.photo {
+  width: 25%;
+  min-width: 150px;
+  max-width: 200px;
+  max-height: 200px;
+  margin: 10px;
+  float: left;
+}
+.photo img { width: 100%; }