bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptExcelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」JavaScript2017.03.16Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋め込むための非常に軽量なjQueryプラグインです。js上の配列やCVSファイルからでもテーブルにデータを直接ロードすることができます。第三者のjqueryプラグインと統合して、独自のカスタム列、カスタムエディタなどを作成することもできます。これまでテーブルタグにより地道に作成する必要のあった表は、jExcelにより非常に簡単な作業となります。その上、様々なカスタマイズが可能ですので、サイトのクオリティを上げることができます。jExcel以下のページからjExcelのデモを確認できます。デモjExcelを使用する際、jQueryライブラリを必ず読み込みましょう。ダウンロードしたファイルから[jquery.jexcel.js][jquery.jexcel.css]の順で読み込みましょう。表のデータは<script>で囲って入力します。これは基本的な記述方法ですのでカスタマイズによって変わります。下記はデモサイトで紹介されているものです。});</script>1行目にGoogle、2行目にApple、3行目にYahooのデータが表示されることになります。後半の300,80,100は、1列目~3列目の幅を指示しています。カスタマイズについて、デモサイトでは様々な例が全部で10個紹介されています。中でも特に関心を持ったカスタマイズは「列単位での並び替え」です。列見出しをダブルクリックすると、昇順・降順を交互に並び替えることができます。ユーザーにデータを比較させる際、非常に役に立つカスタマイズだと思います。この他には「キー値のドロップダウン」「CSVの読み込み/書き出し」「複数のスプレッドシート」など多くの優れた機能をカスタマイズできるようです。jExcelは、デモサイトが非常に分かりやすく作られています。ユーザーのアイデアも含め、常に開発を行っているようなので要チェックです。詳細とダウンロードは以下からどうぞ。Gridは、Google画像検索っぽいイ...JavaScriptサイドからスライドでナビゲーションを表示できる「jquery-side-navi」jquery-side-naviは、サイドからスライドでタブコンテンツ...JavaScript多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue...JavaScript拡張性の高い美しいツールチップを実装できる「Drooltip.js」Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実...JavaScriptスライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「...シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。