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. Babylon Grid
  2. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  3. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  4. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  5. no-image

    JavaScript

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

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

  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

最近の記事

  1. グーディオ オーガニックチョコレート(ミント)
  2. チキンバターマサラとシュリンプバターマサラ
  3. 恵比寿のダ・ミケーレのピザ
  4. ハムエッグホットサンドとドリップコーヒー
  5. 高輪ゲートウェイ駅のスタバ

アーカイブ

PAGE TOP