亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

響應時更改頁面大小

響應時更改頁面大小

PHP
慕田峪4524236 2023-09-22 14:32:46
我正在使用引導程序......我的問題是如何更改我在腳本中聲明的頁面大小。避免分頁時出現異??臻g。 這是一張圖片當 Col-xl-3 時,我的頁面大小將為 12當 Col-lg-4 時,我的頁面大小將為 9當 Col-md-6 時,我的頁面大小將為 8(更改響應時顯示的頁面內容量)pageSize = 8;pagesCount = $(".content").length;var totalPages = Math.ceil(pagesCount / pageSize);$('.pagination').twbsPagination({  totalPages: totalPages,  visiblePages: 3,  onPageClick: function(event, page) {    var startIndex = (pageSize * (page - 1));    var endIndex = startIndex + pageSize;    $('.content').hide().filter(function() {      var idx = $(this).index();      return idx >= startIndex && idx < endIndex;    }).show();  }});<div class="row">  <div class="content col-6 col-md-6 col-lg-4 col-xl-3 mt-4">    <div class="content-head">      <img src="image.png">    </div>    <div class="content-title">      <h3 class="text-center">CARD TITLE</h3>    </div>  </div></div>這是腳本和 Html 特定代碼塊。
查看完整描述

1 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

首先,您必須檢測您的窗口大?。?/p>


var detect = function(width) {

if (width < 576) {

    callPagination(12);

} else if (width >= 576 && width < 768) {

    callPagination(10);

} else if (width >= 768 && width < 992) {

    callPagination(9);

} else if (width >= 992) {

    callPagination(8);

}};

并且您必須創建函數:


var callPagination = function(pageSize) {

pageSize = pageSize;

pagesCount = $('.content').length;

var totalPages = Math.ceil(pagesCount / pageSize);


$('.pagination').twbsPagination({

    totalPages: totalPages,

    visiblePages: 3,

    onPageClick: function(event, page) {

        var startIndex = pageSize * (page - 1);

        var endIndex = startIndex + pageSize;

        $('.content')

            .hide()

            .filter(function() {

                var idx = $(this).index();

                return idx >= startIndex && idx < endIndex;

            })

            .show();

    }

});};

并在頁面準備好時調用函數


$(document).ready(function() {

var width = window.innerWidth;

detect(width)


$(window).resize(function() {

    var width = window.innerWidth;

    detect(width)

});});


查看完整回答
反對 回復 2023-09-22
  • 1 回答
  • 0 關注
  • 102 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號