个人中心
gpt4 book ai didi

jquery - 如何在 OnsenUI 框架中对列表进行分页

转载 作者：行者123 更新时间：2023-12-01 04:47:19 25 4
gpt4 key购买 nike

我使用 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>

最佳答案

你在使用 AngularJS 吗？在 AngularJS 中实现分页非常容易，无需外部插件/库的帮助。

这是一个简单的 Controller ，可以对项目列表进行分页:

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 编写了一个带有列表的小示例:

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

关于jquery - 如何在 OnsenUI 框架中对列表进行分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27499328/

25 4 0
文章推荐： utf-8 - 自动识别wildfly10中的mime类型
文章推荐： Python，-1返回值
文章推荐： couchdb - 如何在不提供 "limit"字段的情况下使用 Mango 查询 couchDB 获取无限文档？
文章推荐： python - Django csrf_token 未实现隐藏字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com