array-indicator

easy to select one array item at a time

Usage no npm install needed!

<script type="module">
  import arrayIndicator from 'https://cdn.skypack.dev/array-indicator';
</script>

README

array-indicator

array-indicator可以將一個array放入,擁有一個指針,指向一個成員,並且提供移動指針的方法。這可以很方便地利用在一些一次只需要鎖定一個array成員的情境,例如圖片輪播器、簡報、導航列表項目的顯示⋯⋯。

安裝

npm install array-indicator --save

用法

CommonJS

var ArrayIndicator = require('array-indicator');

ES6

import ArrayIndicator from 'array-indicator';

ArrayIndicator返回一個實例對象。接受第一個參數必須為array,預設index為0,可以用point()設定指針指向的index。


var ai = ArrayIndicator(['foo', 'bar', 'baz']);

ai.current  // 'foo'

ai.point(2)

ai.current  // 'baz'

使用next()和prev()可以讓指針依序向前或向後,移動數量預設為1。

var ai = ArrayIndicator([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

ai.current  // 1

ai.next()

ai.current  // 2

ai.prev()

ai.current  // 1

ai.next(5)

ai.current  // 6

可以鏈式操作。

ai.current  // 6

ai.next(4).prev(2).prev(2).current  // 6

啟用循環模式。

var ai = ArrayIndicator([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {
  cycle: true,  
});

ai.current  // 1

ai.prev().current  // 10

ai.point(0).next(101).current  // 2

API

語法

ArrayIndicator(arr[, config])

參數

  • arr (Array) - 一個Array。
  • config (Object) - 選擇性設定。
    • init (Number) - 初始index值。預設為0。
    • cycle (Boolean) - 是否啟用循環模式。預設為false。

返回值

一個new ArrayIndicator() 實例。

實例屬性

  • index - 指針位置。read-only。
  • length - 陣列長度。read-only。
  • current - 指針指向的成員。read-only。
  • config - read-only。

實例方法

point([index])

將指針指向指定的index。

  • index (Number) - 存在於Array中的index。

next([step])

將指針往前指向step數量的位置。

  • step (Number) - 想要異動的數字。預設為1。

prev([step])

將指針往後指向step數量的位置。

  • step (Number) - 想要異動的數字。預設為1。

atEnd()

若指針在array最後一個成員上,返回true,否則false。

atStart()

若指針在array第一個成員上,返回true,否則false。