Benjaming1312/pagination

最新消息分類頁面切換功能

最新消息分類切換功能

因學習途中遇到需要使用下一頁來切換內容的功能，常常只有找到元件找不到實際上是如何運用的，所以做了一個這樣的套件來使用:D

範例網址

範例

使用到的元件

• boostrap
• jquery
• animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

引入套件包

```
<link rel="stylesheet" href="https://rawgit.com/Benjaming1312/bcpageing/master/bcpageing.css">
<script src="https://rawgit.com/Benjaming1312/bcpageing/master/bcpageing.js"></script>

```

建置HTML

```
<ul class="test">
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
    <li><img src="http://placehold.it/150/92c952" alt=""></li>
</ul>

```

使用套件

在你指定的ul element使用套件，如果沒有特別設定，預設值是一次顯示6個

提醒必須將套件使用在ul那一層級，此套件是抓他下面的li元素

$('.test').bcpagein()

---

相關控制項

顯示幾則新聞

userlimt: number

使用animate.css

animate: Boolean

animateIn: String

animateOut: String

實際應用

一次顯示四則，使用animate,設定進入與出去的動畫效果

$('.test').bcpagein({
    userlimt: 4,
    animate: true,
    animateIn: 'flipInX',
    animateOut: 'flipOutX'
})