Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
１つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」:phpspot開発日誌
μllinx - Multi Directional Links jQuery plugin １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 通常ハイパーリンクは１テキストをクリックで単一URLに移動しますが、こちらを利用すればポップアップでリンクの選択肢が選べるようになる、というものです。 マークアップ的には以下のようにシンプル。 シンプルですが、ありそうであまりなかったかもしれないプラグインですね 関連エントリ タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 高解像度のディスプレイ用に2-4倍迄の画像に置き換えられる「jQuery.imgx」 リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 selectの複
オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」:phpspot開発日誌
sutara79/jquery.ajax-combobox GitHub オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」。 選択肢が膨大にあっても対応可能なプルダウンを実装できます 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 フラットなクールデザインのselectを実装できる「Select or Die」 selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」
複雑な検索式等を入力する際に最適なUIを提供できる「structured-filter」:phpspot開発日誌
structured-filter Demo 複雑な検索式等を入力する際に最適なUIを提供できる「structured-filter」 名前が〜で、電話番号が○○、という検索式を入れたい場合に、沢山の入力欄をずらずらと並べるのはスマートではないですね。 こちらのjQueryプラグインを使えば、複雑な検索式をいい感じのUIで入力できます 関連エントリ フォームにて入力の入力UIを追加できる「jquery.signfield」 フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 フォームでの洗練されたアイテムへのタグ付けUI実装jQueryプラグイン「taggingJS」
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
検索ページ等で詳細な検索条件を指定する際のUIが作れるjQueryプラグイン「QueryBuilder」:phpspot開発日誌
jQuery QueryBuilder 検索ページ等で詳細な検索条件を指定する際のUIが作れるjQueryプラグイン「QueryBuilder」 検索というと、特定の項目にマッチするなど、より細かな検索ができたりするのは便利で、そのための分かりやすいUIが作れます。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 リストのインクリメンタル検索を可能にするjQueryプラグイン「HideSeek」 iOSの検索窓風UIが作れるjQueryプラグイン「jquery-searchinput」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」
ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」:phpspot開発日誌
PgwBrowser - Browser & OS / platform detection plugin for jQuery / Zepto ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」。 次のようにJSON値でブラウザ、OS、viewport情報を受け取れます。iOS、Androidなどにも対応 関連エントリ ブラウザ上で動くイラストレーターのOSS「mondrian」 SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」
入力フォームを更に便利にするjQueryプラグイン5つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 以前こちらの記事「入力フォームをユーザーフレンドリーにする便利なJSプラグイン」でもいくつか紹介させていただきましたが、今回また新たに制作された入力フォームが更に便利になるプラグインを5つほど紹介したいと思います。 flexselect http://rmm5t.github.io/jquery-flexselect/ セレクトボックスの各項目をフレキシブルに表示できるjQueryプラグイン。 選択だけでなく、フォームに文字を入力させることでソートも行えるようになっています。項目数が多い場合に有効活用できそうです。 Multi-Column-Dropdown http://djsmithme.github.io/Multi-Column-Select/ セレクトボックスのUIをボタンで選択する形式に変更し使いやすくするjQueryプラグイン。 一項
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」:phpspot開発日誌
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 2014年05月29日- jquery.formsaver.js by hackprime localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquery.formsaver.js」 ブラウザが落ちてフォームが消えてしまった、というのに備えるためのライブラリです $("#form_id").saveForm(); $("#form_id").restoreForm(); のようなAPIで簡単にlocalStorageにフォーム内容を保存、リストアを可能にします。好きなタイミングで保存、リストアが可能となるので、扱いやすそう。 関連エントリ Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」
タッチ端末でドラッグ＆ドロップできるようにするjQueryプラグイン「touch-dnd」:phpspot開発日誌
touch-dnd by rkusa タッチ端末でドラッグ＆ドロップできるようにするjQueryプラグイン「touch-dnd」 Sortable, Draggable, Droppableをタッチ端末で実現できるようにするものです。 関連エントリ タッチデバイスでリストを並び替えたり削除したりできるUI実装ができる「Slip.js」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 タッチに最適化されたLightBox実装jQueryプラグイン レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
確認ダイアログ（window.confirm）の実装をクロスブラウザで統一できる「jquery.confirm」:phpspot開発日誌
Photoshopばりの画像編集エディタをサイト上で使えるようにするjQueryプラグイン「Classypicozu」:phpspot開発日誌
JSON読込を並列にページ表示を高速化するJSライブラリ「Pegasus」:phpspot開発日誌
GitHub - jackocnr/intl-tel-input: A JavaScript plugin for entering and validating international telephone numbers. Now includes React and Vue components.
GitHub - cihadturhan/jquery-aim: jQuery plugin which guesses which element user is going to be hovered/clicked.
IDEA * IDEA
ページ内の文字をハイライトさせることができるjQueryプラグイン「FilteringHighlight」:phpspot開発日誌
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
