これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集:phpspot開発日誌
16 Free Ajax Contact Forms - For A Better User Experience Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site. より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集。 JavaScript, Ajax等を使い、バリデーションやフォーム入力のしやすさなどについて考えられたフォーム集がまとまってました。 LightForm - Demo - ファンシーなフォームデザインにクールな入力チェック Proto Form - 入力チェック機能や現在位置強調機能 jQuery - Ajax Contact Form (Tutorial & Files) - D
フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌
Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるＪＳライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なＪＳを読み込みます。 <script type="text/javascript" src="jquery
リッチなselectボックスが実装できる「Select Box Factory」:phpspot開発日誌
TheUiGuy: Select Box Factory v1.0 Here, the factory has produced a multiple-select box, with "sifting" tool attached. リッチなselectボックスが実装できる「Select Box Factory」 次のような、ＵＩを変えたリッチなselectボックスが実装できます。 文字を入力して項目をフィルタする機能をつけることもできるみたい。 カラーリングも可能。 使いどころがありそうですね。 関連エントリ jQueryでリッチなグリッドを実装「jqGrid」 Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」
JavaScriptのアラートボックスをセクシーにする仕組み:phpspot開発日誌
Sexy Alert Box JavaScriptのアラートボックスをセクシーにする仕組み。 普通のalertはあじけなくて音もなってよくない、ということで独自のalertボックスは色々 Sexy.alert('Hello world!'); で、alertを表示できます。 デモページはこちら。アニメーションしてちょっといい感じになりました。 デザインをもうちょっと洗練すれば更にセクシーになるでしょう。 関連エントリ JSによるカスタムダイアログボックス作成ライブラリ 多機能LightBoxのiBoxがバージョンアップ「iBox v2」
プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」:phpspot開発日誌
prettyCheckboxes - custom checkboxes / radio buttons - by Stephane Caron プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」 チェックボックスは以下のように。 ラジオボックスは以下のように。 ＣＳＳでデザインできます。 jQueryベース。 関連エントリ チェックボックス、ラジオボックスをオシャレに表示するJS CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
CSSでデザインしたクールなテーブルのサンプル集:phpspot開発日誌
Top 10 CSS Table Designs | CSS, Events | Smashing Magazine CSSでデザインしたクールなテーブルサンプル集がSmashingMagazineにて特集されてます。 テーブルデザインというと単調になりそうですが、次のような凝ったデザインにすることも出来ます。 テーブルデザインだけみても、沢山のデザインのアプローチがあるものですね。 関連エントリ 秀逸なサイトフッターのデザイン集７６ 心を奪われるような美しいタイポグラフィー集 クールなプロフェッショナルWEBデザイン集 デザインの勉強になる物凄い画像集 CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集
シンプルにクールで使用感のよいボタンを作るサンプル:phpspot開発日誌
Particletree Rediscovering the Button Element Creating a consistent interface for your users is a constant struggle for every application designer. シンプルにクールで使用感のよいボタンを作るサンプル。 次のようなボタン、あったらつい押したくなりそうです。 フラットなデザインで、押した感じが心地よいです。 単純に、ボタンタグで <button type="submit" class="positive"><img src="/images/icons/tick.png" alt=""/>Save</button> のように定義してスタイルしている感じで、マークアップとCSSが公開されています。 ボタン作成の際の１参考にできそう。
チェックボックス、ラジオボックスをオシャレに表示するJS:phpspot開発日誌
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう:phpspot開発日誌
"jQuery checkbox v.1.0.0" demo iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう。 「jQuery checkbox」を使うことで次のようなＵＩが作れるようです。 ON/OFFを分かりやすく選択してもらいたい場合、チェックボックスよりも適切なＵＩかもしれませんね。 Safari skin というSafariのチェックボックス風にすることも出来るよう。
フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」:phpspot開発日誌
フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」 2007年11月13日- Ext.ux.PasswordMeter These forms do not do anything and have very little validation. フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」。 Ext.ux.PasswordMeterを使えば、次のように、パスワードフィールドの入力に対して強度をメーターで表示することが可能です。 パスワードの強度を表示すれば、利用者のパスワード強度の強化に繋がりますね。 関連エントリ Ext2.0のアルファ版がリリース あのJavaScriptライブラリ「Ext」のバージョン2「Ext 2.0」のプレビュー
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
HOWTO: spruce up your search box with CSS and a background image d’bug Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. CSSで独自デザインされた検索ボックスを作成。 次のような検索ボックスを作成するサンプルが公開されています。 画像は１枚だけで、構成は結構シンプルなつくりになっているようです。 デザインにこだわるなら、こういった部分もちゃんとデザインしたいですね。 具体サンプルのページ
CSSでクールなテーブルを作成するサンプル:phpspot開発日誌
A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル１（解説記事） サンプル２（解説記事） テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ
ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」:phpspot開発日誌
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryベースの多機能グリッドテーブル「DataTables」:phpspot開発日誌
http://www.designwalker.com/2009/01/table.html
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス