如何同步分页和输入范围？

时间：2019-03-28 23:38:54

标签： javascript jquery html css pagination

我使用jQuery插件pagination.js。

我想做什么

我想同步自己的输入范围（滑块）和分页，以便可以在输入范围侧进行操作。

即：

  

它只能使用滑块来切换页面。

有5页或更多页面时：

  

like this

我认为如果可以与pagination.js完全同步，这也是可能的。

我当前的代码

当前，将pagination.js应用于<div>以显示页码，但是将pagination.js应用于滑块会更好吗？

在以下代码段中，显示损坏，因此请查看JSFiddle。 

/*  pagination  */
function tpl(data) {
  var html = '';
  $.each(data, function(index, item) {
    html += '<section class="item">' + item + '</section>';
  });
  return html;
}

$(function() {
  var len = $('.item').length;

  $('#no-p').pagination({
    dataSource: function(done) {
      var result = [];
      for (var i = 0; i < len; i++) {
        var $item = $('.item').get(i);
        if ($item) result.push($item.innerHTML);
      }
      done(result);
    },
    pageSize: 4,
    showPageNumbers: false,
    showNavigator: true,
    autoHidePrevious: true,
    autoHideNext: true,
    callback: function(data, pagination) {
      var html = tpl(data);
      $('#items').html(html);
    }
  });
});
html {
  font-size: 62.5%;
}

.list {
  display: grid;
  grid-template-columns: 12.8rem 1fr;
}

input[type=range]:focus {
  outline: none;
}
#filter {
  position: sticky;
  position: -webkit-sticky;
  top: 5rem;
  left: 5.7rem;
  width: 1.3rem;
  height: 19.6rem + 3rem;
}

#filter input[type=range][orient=vertical] {
  writing-mode: bt-lr;  /* IE */
  -webkit-appearance: none;
  width: 19.6rem;
  right: 25rem;
  bottom: 5.7rem;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  transform-origin: bottom left;
}
/* Chrome */
#filter input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 1.3rem;
  background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184123.png');
}
#filter input[type="range"][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.7rem + 1.9rem;
  height: 3.5rem;
  margin-top: -1.1rem;
  background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184120.png') no-repeat center center;
}
/* Firefox */
#filter input[type=range]::-moz-range-track {
  height: 1.3rem;
}
#filter input[type="range"]::-moz-range-thumb {
  width: 3.5rem + 1.1rem;
  height: 3.5rem;
  margin-top: -1.1rem;
  background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190328/20190328184120.png') no-repeat center center;
}

/* labels */
#filter p {
  font-size: 1.7rem;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.pageNum {
  font-size: 1.5rem;
  list-style: none;
  margin: 0 0 0 -3rem;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  li {
    margin-bottom: 1.8rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.item {
  text-align: center;
  img {
    width: 100%;
    height: auto;
  }
  h2 {
    font-size: 1.6rem;
    margin-top: 1.6rem;
    margin-bottom: 1.5rem;
  }
  p {
    font-size: 1.5rem;
    margin-bottom: .8rem;
  }
  h2,
  p {
    text-align: left;
  }
}

#no-p {
  font-size: 1.1rem;
  text-align: center;
  margin: 3.7rem 0 7.3rem 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.js"></script>

<!-- For now, there is an arrow in <div> that shows the page number,
but I want to put it on the slider side. -->
<div class="list">

  <div id="filter">
    <p>p</p>
    <input id="sliderP" type="range" name="page" orient="vertical" step="25" list="pagelist" value="0" />
    <ul class="pageNum">
      <li>1 -</li>
      <li>2 -</li>
      <li>3 -</li>
      <li>4 -</li>
      <li>5 -</li>
    </ul>

<!-- ↓ I don't know if this is necessary ↓ -->
    <datalist class="pagelist">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
    </datalist>
  </div>

  <div id="items">
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="1" />
      <h2>title1</h2>
      <p>description1 description1</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="2" />
      <h2>title2</h2>
      <p>description2 description2</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="3" />
      <h2>title3</h2>
      <p>description3 description3</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="4" />
      <h2>title4</h2>
      <p>description4 description4</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="5" />
      <h2>title5</h2>
      <p>description5 description5</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="6" />
      <h2>title6</h2>
      <p>description6 description6</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="7" />
      <h2>title7</h2>
      <p>description7 description7</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="8" />
      <h2>title8</h2>
      <p>description8 description8</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="9" />
      <h2>title9</h2>
      <p>description9 description9</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="10" />
      <h2>title10</h2>
      <p>description10 description10</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="11" />
      <h2>title11</h2>
      <p>description11 description11</p>
    </section>
    <section class="item">
      <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="12" />
      <h2>title12</h2>
      <p>description12 description12</p>
    </section>
  </div>
</div>

<div id="no-p"></div>

1 个答案:

答案 0 :(得分：0)

如果编写了按给定步骤（或每页项目）滚动或翻页的函数，则可以与范围类型输入同步。 我写了我的一段代码。请看一下：https://github.com/caglarorhan/input-type-range-sync

相关问题
最新问题