[JS]リストで実装したアイテムにページ機能をつけるスクリプト -Ono List Pager

サイト構築 -JavaScript

Post on:2011年5月30日

Ono List Pagerの実装

デモページを例にいくつか実装方法を紹介します。

実装には「jquery.js」「jquery.easing.1.3.js」と当スクリプト「jquery.onopager.js」を外部ファイルとして記述します。

最もベーシックなデモです。
パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。

HTML

各パネルはシンプルなリスト要素で実装されています。

<ul id="list1" class="onoPager_noJs">
	<li>This basic pager offers paging per item. It also offers a 'previous' and next 'next' button. it also offers direct links to each page item.</li>
	<li>...</li>
	<li>...</li>
</ul>

JavaScript

jQuery('#list1').onoPager({
  pagePerItem: true,
  listContainer: {
    width: '250px',
    height: '100px'
  },
  listItems: {
      width: '230px',
      height: '80px'
  },
  keyTriggersPage: true,
  swipeTriggersPage: true,
  animationType: 'linear',
  animationEasing: 'easeOutCubic',
  orientation: 'horizontal',
  animationSpeed: 1000
});

[ad#ad-2]

垂直方向に配置したデモです。
next, previousボタン、スクロールバーで操作ができます。

HTML

各パネルはシンプルなリスト要素で実装されています。

<ul id="list2" class="onoPager_noJs">
	<li>With the linearScroller the user can either scroll through the list by hovering over the 'next' or 'previous' button or dragging the handler of the scroller.</li>
	<li>...</li>
	<li>...</li>
</ul>

JavaScript

jQuery('#list2').onoPager({
  pagePerItem: true,
  orientation: 'vertical',
  listContainer: {
    width: '250px',
    height: '100px'
  },
  listItems: {
      width: '230px',
      height: '80px'
  },
  status: {
    active: false
  },
  labels: {
    next: '»',
    previous: '«'
  },
  scroller: {
    active: true,
    pixelMove: 2
  },
  pageByNumber: false,
  animationType: 'linearScroller',
  animationSpeed: 1000
});