Jump to content

Featured Replies

comment_124620

plagin нет .... но ето подобное:

HTML:

Спойлер

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>


  <link href="https://creator.ionic.io/api/v1/getcss?app_id=659ad4dc9e6e&amp;v=22&fontfix=1" rel="stylesheet">


  <link href="/css/share-frame.css" rel="stylesheet">
  <!-- ionic/angularjs js -->
  <script src="/lib/ionic/release/js/ionic.bundle.js"></script>
  <script src="/lib/ionicuirouter/ionicUIRouter.js"></script>

  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Poppins:400,300,500,600,700|Crimson+Text:400,400italic,600,600italic,700,700italic|Lora:400,400italic,700,700italic|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic|Noto+Sans:400,400italic,700,700italic|Lato:400,100,100italic,300italic,300,400italic,700,700italic,900,900italic|Muli:400,300,300italic,400italic'
    rel='stylesheet' type='text/css'>

  <link id='android-default-font' rel='text/css' href='/css/android-default-font.css'>
  <link id='ios-default-font' rel='text/css' href='/css/ios-default-font.css'>

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

  <style type="text/css">
    .platform-ios .manual-ios-statusbar-padding{
        padding-top:20px;
      }
      .manual-remove-top-padding{
        padding-top:0px !important;
      }
      .manual-remove-top-padding .scroll{
        padding-top:0px !important;
      }
      ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
        margin-left:-10px;
        margin-right:-10px;
      }
      ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
        border-radius:0px;
        border-left:0px;
        border-right: 0px;
      }
  </style>

</head>

<body ng-app="app" animation="slide-left-right-ios7">
  <div>
    <ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21">
      <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
          <ion-nav-back-button></ion-nav-back-button>
          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-side-menu-content>
      <ion-side-menu side="left" id="side-menu21">
        <ion-header-bar class="bar-positive">
          <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
          <ion-list id="menu-list1" data-componentid="list1">
            <ion-item id="menu-list-item1" ui-sref="tabsController.livescore" menu-close="" data-componentid="list-item1">Live Now</ion-item>
            <ion-item id="menu-list-item2" ui-sref="tabsController.standing" menu-close="" data-componentid="list-item2">Standing</ion-item>
            <ion-item id="menu-list-item3" ui-sref="topscoreCtrl" menu-close="" data-componentid="list-item3">League</ion-item>
            <ion-item id="menu-list-item4" ui-sref="topscore" menu-close="" data-componentid="list-item4">Topscore</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
  </div>
  <script id="templates/livescore.html" type="text/ng-template">
    <ion-view title="Livescore" id="page2" ng-controller="livescoreCtrl">
      <ion-content padding="false" class="has-header">
        <div class="spacer" style="width: 320px; height: 28px;"></div>
        <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>

        <ion-list id="livescore-list2" ng-repeat="match in matches">
          <div class="item-divider ">{{match.league}}</div>
          <ion-item id="livescore-list-item5">
            <div class="row">
              <div class="col-10 mins">{{match.live}}'</div>
              <div class="col-33 home">{{match.home}}</div>
              <div class="col-10 score">{{match.score}}</div>
              <div class="col-33 away">{{match.away}}</div>
            </div>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script id="templates/standing.html" type="text/ng-template">
    <ion-view title="Standing" id="page3">
      <ion-content padding="false" class="has-header">
        <form id="standing-form1" class="list ">
          <label class="item item-select " id="standing-select1">
                <span class="input-label">Select</span>
                <select>
                    <option>League</option>
                    <option>League 1</option>
                    <option>League 2</option>
                </select>
            </label>
        </form>
        <ion-list id="standing-list3">
          <ion-item id="standing-list-item6">Team A 23
            <span class="item-note">44</span>
          </ion-item>
          <ion-item id="standing-list-item7">Item 2</ion-item>
          <ion-item id="standing-list-item8">Item 3</ion-item>
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script id="templates/league.html" type="text/ng-template">
    <ion-view title="League" id="page4">
      <ion-content padding="false" class="has-header">
        <ion-list id="league-list4">
          <ion-item class="item-thumbnail-left  " id="league-list-item9">
            <img src="/img/thumbnail-img.png">
            <h2>Item 1</h2>
          </ion-item>
          <ion-item class="item-thumbnail-left  " id="league-list-item12">
            <img src="/img/thumbnail-img.png">
            <h2>Item 1</h2>
          </ion-item>
          <ion-item class="item-thumbnail-left  " id="league-list-item13">
            <img src="/img/thumbnail-img.png">
            <h2>Item 1</h2>
          </ion-item>
          <ion-item class="item-thumbnail-left  " id="league-list-item14">
            <img src="/img/thumbnail-img.png">
            <h2>Item 1</h2>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script id="templates/topscore.html" type="text/ng-template">
    <ion-view title="Topscore" id="page5">
      <ion-content padding="false" class="has-header">
        <ion-list id="topscore-list5">
          <ion-item class="item-avatar  " id="topscore-list-item15">
            <img src="/img/avatar-img.png">
            <h2>Item</h2>
          </ion-item>
          <ion-item class="item-avatar  " id="topscore-list-item16">
            <img src="/img/avatar-img.png">
            <h2>Item</h2>
          </ion-item>
          <ion-item class="item-avatar  " id="topscore-list-item17">
            <img src="/img/avatar-img.png">
            <h2>Item</h2>
          </ion-item>
          <ion-item class="item-avatar  " id="topscore-list-item18">
            <img src="/img/avatar-img.png">
            <h2>Item</h2>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script id="templates/tabsController.html" type="text/ng-template">
    <ion-view title="Tabs Controller" id="page1">
      <ion-tabs class="tabs-stable tabs-icon-top " id="tabsController-tabs1">
        <ion-tab title="Livescore" icon="ion-ios-football" href="#/page1/livescore" id="tabsController-tab1">
          <ion-nav-view name="tab1"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Cart Tab" icon="ion-ios-photos-outline" href="#/page1/standing" id="tabsController-tab2">
          <ion-nav-view name="tab2"></ion-nav-view>
        </ion-tab>
        <ion-tab title="League" icon="ion-ios-drag" href="#/page1/league" id="tabsController-tab3">
          <ion-nav-view name="tab3"></ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </ion-view>
  </script>
</body>

</html>

 

CSS:

Спойлер

.min {
  position: left, width: 15%''
}

.away {
  position: right, width: 35%,
}

 

JS:

Спойлер

<script src='https://creator.ionic.io/lib/ionic/release/js/ionic.bundle.js'></script><script src='https://creator.ionic.io/lib/ionicuirouter/ionicUIRouter.js'></script>
<script>//app.js
angular.module('app', ['ionic', 'app.controllers', 'ionicUIRouter', 'app.directives','app.services',])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  

  .state('tabsController.livescore', {
    url: '/livescore',
    views: {
      'tab1': {
        templateUrl: 'templates/livescore.html',
        controller: 'livescoreCtrl'
      }
    }
  })

  .state('tabsController.standing', {
    url: '/standing',
    views: {
      'tab2': {
        templateUrl: 'templates/standing.html',
        controller: 'standingCtrl'
      }
    }
  })

  .state('tabsController.league', {
    url: '/league',
    views: {
      'tab3': {
        templateUrl: 'templates/league.html',
        controller: 'leagueCtrl'
      }
    }
  })

  .state('topscore', {
    url: '/topscore',
    templateUrl: 'templates/topscore.html',
    controller: 'topscoreCtrl'
  })

  .state('tabsController', {
    url: '/page1',
    templateUrl: 'templates/tabsController.html',
    abstract:true
  })

$urlRouterProvider.otherwise('/page1/livescore')

  

})

//controllers.js
angular.module('app.controllers', [])
 
.controller('livescoreCtrl', ['$scope', 'matches', function($scope, matches) {
  matches.success(function(data) {
    //$scope.matches = data.data.matches;
    $scope.matches = data;
  })
}])


// .controller('livescoreCtrl', ['$scope', '$stateParams', 
// function ($scope, $stateParams) {


// }])
   
.controller('standingCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('leagueCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('topscoreCtrl', ['$scope', '$stateParams', 
function ($scope, $stateParams) {

}])
       



     
    angular.module('app.directives', [])

.directive('blankDirective', [function(){

}]);
 
//service.js
    angular.module('app.services', [])

.factory('BlankFactory', [function(){

}])

.factory('matches', ['$http', function($http) {
       return $http.get('https://mmlivesoccer.herokuapp.com/livescore')                .success(function(data) {
      return data;
    }).error(function(err) {
      return err;
    })
}]);
   
// .factory('matchService', ['$http', function($http) {
//   return $http.get('https://sportsop-soccer-sports-open-data-v1.p.mashape.com/v1/leagues/uefa-euro-2016/seasons/16/rounds/round-1/matches', {
//       headers: {
//         'X-Mashape-Key': '32jnRgtOormshtgNye0yfOBF827yp1svNfljsn3dKx3WxZHD6H'
//       }
//     }).success(function(data) {
//       return data;
//     }).error(function(err) {
//       return err;
//     })
// }]);

</script>

 

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.