API tools faq
paste
Advertisement
Guest User

DemoApp

a guest
Dec 22nd, 2014
181
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.01 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="apple-mobile-web-app-capable" content="yes">
  6.   <meta name="mobile-web-app-capable" content="yes">
  7.   <title>My App</title>  
  8.   <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  9.  
  10.   <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
  11.   <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
  12.   <script src="js/modernizr.js"></script> <!-- Modernizr -->
  13.   <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  14.   <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">  
  15.   <link rel="stylesheet" href="styles/app.css"/>
  16.  
  17.   <script src="lib/onsen/js/angular/angular.js"></script>    
  18.   <script src="lib/onsen/js/onsenui.js"></script>    
  19.  
  20.   <script src="cordova.js"></script>
  21.  
  22.   <script>
  23.     var module = angular.module('app', ['onsen']);
  24.   </script>
  25.  
  26.   <style>
  27.     .page--menu-page__background {
  28.       background-color: #333;
  29.     }
  30.    
  31.     .page--menu-page__content {
  32.       color: white;
  33.     }
  34.  
  35.     .menu-close,
  36.     .menu-close > .toolbar-button {
  37.       color: #999;
  38.     }
  39.  
  40.     .menu-list,
  41.     .menu-item:first-child,
  42.     .menu-item:last-child,
  43.     .menu-item {
  44.       background-color: transparent;
  45.       background-image: none !important;
  46.       border-color: transparent;
  47.       color: #fff;
  48.     }
  49.  
  50.     .menu-item {
  51.       padding: 0 0 0 20px;
  52.       line-height: 52px;
  53.       height: 52px;
  54.       text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
  55.     }
  56.  
  57.     .menu-item:active {
  58.       background-color: rgba(255, 255, 255, 0.1);
  59.     }
  60.  
  61.     .menu-notification {
  62.       display: inline-block;
  63.       margin-top: 12px;
  64.       font-size: 14px;
  65.       height: 16px;
  66.       line-height: 16px;
  67.       min-width: 16px;
  68.       font-weight: 600;
  69.     }
  70.  
  71.     .bottom-menu-list,
  72.     .bottom-menu-item:first-child,
  73.     .bottom-menu-item:last-child,
  74.     .bottom-menu-item {
  75.       border-color: #393939;
  76.       background-color: transparent;
  77.       background-image: none !important;
  78.       color: #ccc;
  79.     }
  80.  
  81.     .bottom-menu-item:active {
  82.       background-color: rgba(255, 255, 255, 0.1);
  83.     }
  84.   </style>
  85.  
  86. </head>
  87.  
  88. <body>    
  89.  
  90.   <ons-sliding-menu
  91.    menu-page="menu.html" main-page="page1.html" side="left"
  92.    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
  93.   </ons-sliding-menu>
  94.  
  95.   <ons-template id="menu.html">
  96.     <ons-page modifier="menu-page">
  97.       <ons-toolbar modifier="transparent"></ons-toolbar>
  98.  
  99.       <ons-list class="menu-list">
  100.         <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
  101.           <ons-icon icon="fa-plus"></ons-icon>
  102.           First Category
  103.         </ons-list-item>
  104.  
  105.       </ons-list>
  106.  
  107.     </ons-page>
  108.   </ons-template>
  109.  
  110.   <ons-template  id="page1.html">
  111.    
  112.   <!-- //Thanks Andreas Argelius(Stackoverflow) for his solution to Grid effect// -->
  113.  
  114.   <ons-navigator title="Navigator" var="myNavigator">
  115.       <ons-page ng-controller="myController">
  116.       <ons-toolbar>
  117.         <div class="left">
  118.           <ons-toolbar-button ng-click="menu.toggle()">
  119.             <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
  120.           </ons-toolbar-button>
  121.         </div>
  122.         <div class="center">Page 1</div>
  123.       </ons-toolbar>
  124.      <ons-bottom-toolbar>
  125.      <div class="tab-bar">
  126.     <label ng-click="prevPage()" class="tab-bar__item">
  127.       <input type="radio" name="tab-bar-b" checked="checked">
  128.       <button id="stop" class="tab-bar__button">
  129.         <i class="fa fa-arrow-left"></i>
  130.       </button>
  131.     </label>
  132.     <label class="tab-bar__item">
  133.       <input type="radio" name="tab-bar-b" checked="checked">
  134.       <button class="tab-bar__button">
  135.         Page  {{ currentPage + 1 }}
  136.       </button>
  137.     </label>
  138.     <label ng-click="nextPage()" class="tab-bar__item">
  139.       <input type="radio" name="tab-bar-b">
  140.       <button id="pie" class="tab-bar__button">
  141.         <i class="fa fa-arrow-right"></i>
  142.       </button>
  143.     </label>
  144.   </div>
  145. </div>
  146.      </ons-bottom-toolbar>
  147.       <ons-row style="margin-top: 100px;">
  148.         <ul id="cd-gallery-items" class="cd-container">
  149.         <li ng-repeat="product in getCurrentPage()">
  150.             <ul class="cd-item-wrapper">
  151.                 <li class="cd-item-front"><a ng-click="#"><img ng-src="http://varanjith.com/opencart/image/{{product.Imageo}}" height=250px width=100% alt="Preview image"></a></li>
  152.                 <!-- <li class="cd-item-out">...</li> -->
  153.             </ul> <!-- cd-item-wrapper -->
  154.  
  155.             <div class="cd-item-info">
  156.                 <b><a href="#0">{{product.Name}}</a></b>
  157.                 <em>{{product.Price}}</em>
  158.             </div> <!-- cd-item-info -->
  159.  
  160.         </li>
  161.    
  162.     </ul> <!-- cd-gallery-items -->
  163.       </ons-row>
  164.      
  165.     </ons-page>
  166.    
  167.   </ons-template>
  168.  
  169.   <ons-template id="detail.html">
  170.      <ons-page>
  171.  
  172.    
  173.     </ons-page>
  174.   </ons-template>
  175.  
  176.  <script>
  177.  
  178.  module.factory('productsFactory',function($http){
  179.      return{
  180.          getProducts: function(callback){
  181.              $http.get('http://varanjith.com/opencart/API/getDetail.php').success(callback);
  182.          }
  183.      };
  184.  });
  185.  
  186.  <!-- //Thanks Andreas Argelius(Stackoverflow) for his solution to pagination// -->
  187.  
  188.  module.controller('myController', myController);
  189.  function myController($scope,productsFactory) {
  190.       productsFactory.getProducts(function(results){
  191.           $scope.products=results;
  192.       })
  193.      
  194.       $scope.itemsPerPage = 6;
  195.       $scope.currentPage = 0;
  196.      
  197.       $scope.getCurrentPage = function() {
  198.         return $scope.products.slice($scope.currentPage * $scope.itemsPerPage,
  199.                                   $scope.currentPage * $scope.itemsPerPage + $scope.itemsPerPage);
  200.       };
  201.      
  202.       $scope.nextPage = function() {
  203.         $scope.currentPage = Math.min(parseInt(($scope.products.length - 1) / $scope.itemsPerPage),
  204.                                       $scope.currentPage + 1);
  205.       }
  206.      
  207.       $scope.prevPage = function() {
  208.         $scope.currentPage = Math.max(0, $scope.currentPage - 1);
  209.       }
  210.  }
  211.  
  212. </script>
  213.  
  214.  
  215. </body>
  216. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!