我使用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>
答案 0 :(得分: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 UI写了一个小例子: