tabellajs

JavaScript

タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

tabellajsはタッチに対応したレスポンシブで操作性のよいテーブルを実装することができます。jQueryなどに依存しない、ピュアJavaScriptなテーブルプラグインです。オプションもたくさんあり、カスタマイズして使用することも可能です。

tabellajs

デモ

デモでは左右に矢印が付いたテーブルが設置されていて、矢印をクリックするとテーブル内の項目を移動できる仕組みになっています。モバイル版ではスワイプすることで項目を移動させることが可能です。

サクサクと操作できるので、とても見やすいテーブルですね。実際にiPhoneでも確認してみたところ、動作もスムーズで使いやすかったです。

オプションには、cellBreakpoints、descBreakpoints、from、to、currency、duration、easing、reboundSpeed、edgeThreshold、swipeSingleTick、onRefreshSize、headerRowDevider、emptyCell、fixedHeader、fixedHeaderBottomThreshold、fixedHeaderTopといった項目が用意されています。

オプションを利用して、細かい部分までカスタマイズできるのはうれしい仕様ですね。ちなみに、easingのデフォルト値はeaseInOutSineです。easingの値にはこの他にもeaseInSine、easeOutSine、easeInOutSine、easeInQuad、easeOutQuad、easeInCubic…など全部で24種類ものエフェクトがあります。

tabellajs

関連記事

  1. Vertical Fixed Navigation #2
  2. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  3. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  4. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  5. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  6. Salvattore

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP