Как разбить список на страницы в рамках OnsenUI

Я использовал плагин OnsenUI и Justified Gallery для отображения ряда продуктов в списке для моего гибридного мобильного приложения. и что я действительно хочу - это разбить список на страницы для каждых 4 продуктов. Я пробовал большинство плагинов jquery, и это не сработало.

Вот мое полное кодирование https://www.dropbox.com/s/d2jeymdxqgdkyun/project.zip?dl=0

<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Project Lira</title>  



<link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">  
<link rel="stylesheet" href="styles/app.css"/>

<script src="lib/onsen/js/angular/angular.js"></script>    
<script src="lib/onsen/js/onsenui.js"></script>    

<script src="cordova.js"></script>

<script>
var module = angular.module('app', ['onsen']);
</script>

<style>
.page--menu-page__background {
  background-color: #333;
}

.page--menu-page__content {
  color: white;
}

.menu-close,
.menu-close > .toolbar-button {
  color: #999;
}

.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
  background-color: transparent;
  background-image: none !important;
  border-color: transparent;
  color: #fff;
}

.menu-item {
  padding: 0 0 0 20px;
  line-height: 52px;
  height: 52px;
  text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}

.menu-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-notification {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  height: 16px;
  line-height: 16px;
  min-width: 16px;
  font-weight: 600;
}

.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
  border-color: #393939;
  background-color: transparent;
  background-image: none !important;
  color: #ccc;
}

.bottom-menu-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

</head>

<body>    

<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
<ons-page modifier="menu-page">
  <ons-toolbar modifier="transparent"></ons-toolbar>

  <ons-list class="menu-list">
    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
      <ons-icon icon="fa-plus"></ons-icon>
      Justified Gallery
    </ons-list-item>

  </ons-list>
  </ons-page>
  </ons-template>

  <ons-template id="page1.html">
`enter code here`  <ons-page>
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()">
        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">Justified Gallery</div>
  </ons-toolbar>

  <ons-row style="margin-top: 100px;">
    <ons-col align="center">
    <div class="holder">
    </div>
      <ul id="cd-gallery-items" class="cd-container">
    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
            <li class="cd-item-out"><a href="#0"><img src="img/thumb-4.jpg" alt="Preview image"></a></li>
            <!-- <li class="cd-item-out">...</li> -->
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-4.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-4.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-4.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>

    <li>
        <ul class="cd-item-wrapper">
            <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="Preview image"></a></li>
            <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="Preview image"></a></li>
            <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="Preview image"></a></li>
        </ul> <!-- cd-item-wrapper -->

        <div class="cd-item-info">
            <b><a href="#0">Product Name</a></b>
            <em>$9.99</em>
        </div> <!-- cd-item-info -->

        <nav>
            <ul class="cd-item-navigation">
                <li><a class="cd-img-replace" href="#0">Prev</a></li>
                <li><a class="cd-img-replace" href="#0">Next</a></li>
            </ul>
        </nav>

        <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
    </li>
   </ul> <!-- cd-gallery-items -->
    </ons-col>
   </ons-row>
   </ons-page>
   </ons-template>


  <!-- Justified Scripts & Styles -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->



</body>
</html>
Источник

1 ответ

Решение

Вы используете AngularJS? В AngularJS довольно легко реализовать разбиение на страницы без помощи внешних плагинов / библиотек.

Это простой контроллер, который выполняет разбиение на страницы для списка элементов:

module.controller('PaginationController', function($scope) {
  $scope.itemsPerPage = 4;
  $scope.items = [1,2,3,4,5,6,7,8,9,10,11];
  $scope.currentPage = 0;

  $scope.getCurrentPage = function() {
    return $scope.items.slice($scope.currentPage * $scope.itemsPerPage, 
                              $scope.currentPage * $scope.itemsPerPage + $scope.itemsPerPage);
  };

  $scope.nextPage = function() {
    $scope.currentPage = Math.min(parseInt(($scope.items.length - 1) / $scope.itemsPerPage),
                                  $scope.currentPage + 1);
  }

  $scope.prevPage = function() {
    $scope.currentPage = Math.max(0, $scope.currentPage - 1);
  }
});

Конечно, это может сделать не все, что вы хотели бы сделать, но довольно легко добавить другие функции.

Я написал небольшой пример, используя пользовательский интерфейс Onsen со списком:

http://codepen.io/argelius/pen/wBWKOo

Источник
Другие вопросы по тегам