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

jQuery GoUp!ページ上部にスクロール移動してくれる「jQuery GoUp!」前のページ

軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」次のページMacy.js

関連記事

  1. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  2. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  3. Expanding Bar Navigation Concept
  4. Square Menu
  5. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  6. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

最近の記事

  1. ゴールデンパイナップル
  2. 雪がつもった公園
  3. ハンガリー産 純粋アカシアはちみつ
  4. COMOLI ダブルレイヤー L/Sクルー
  5. メキシコ オアハカ

アーカイブ

PAGE TOP