jQueryで実装する進捗グラフ付き複数ファイルアップローダー:phpspot開発日誌
Multiple File Upload With Progress Bar Using jQuery jQueryで実装する進捗グラフ付き複数ファイルアップローダー。 次のようなマルチファイルアップローダーが実装できるjQuery＋PHPなソースが公開されています。 アップロード部分には swfupload を使っているみたい。 サイトではjQueryを使っていて、こういう機能を実装したいという場合に覚えておくと使えるかも。 関連エントリ jQueryでチェックボックスをすごい形にカッコよくしちゃう方法 jQueryでリアルタイムにCSSを書き換えるサンプル jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
PHPとjQueryのAjax連携の学習用チュートリアル:phpspot開発日誌
Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET PHPとjQueryのAjax連携の学習用チュートリアルが公開されています。 macスタイルのログインフォームからjQueryでAjax送信してリアルタイム認証を行うサンプルです。 それぞれ簡単なコードになっているので入門にも最適で、かつ成果物もクール。 デモページ 入門としてだけでなく、サンプルとして応用して使ってみるのもよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ jQueryでアコーディオン作成のチュートリアル 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
30 Ajax Lightboxから使えそうなものを9個ピックアップ
通称『 Lightbox 』のまとめ記事ですね。 jQuery、prototypeの両方をカバーしている記事で、非常にボリュームのあるエントリーがあったのでご紹介。 使い易いLightbox Lightboxって何？っという人がいたらまぁ以下の画像をクリックしてもらえればわかります。 （携帯ユーザーのアクセスが最近多いですが、携帯では確認出来ません） とりあえずページを全て読み込んでからでないとJavaScript動かないようにしてるので、このブログのページを全て読み込んでからクリックしてみてくださいませ。 こんな感じでちょっとコジャレた味のある演出効果が得られるスクリプトですね。 興味のある人は試して見ると良いかもしれない。 １）Lightbox2 Lightbox系という一つのジャンルを生み出した最もオーソドックスなタイプ。 prototype.jsが必要になります。 ２）Lightb
リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
凄い！jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT
MS Office 2007から採用されたリボンメニュー。今は（といっても2年前からあるが）まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー！ そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト（ulタグ）だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
パスワード強度を表示するインタフェースやスクリプト色々:phpspot開発日誌
10 Password Strength Meter Scripts For A Better Registration Interface パスワード強度を表示するインタフェースやスクリプト色々が紹介されていました。 パスワード作成時や、ログインフォーム作成時に使えそうです。 PasswordMeter 入力したパスワードの強度を色々な視点からチェックできる 色々な項目を集計してScoreという形で点数が出ます。 Yet Another Password Meter 上記と同様のパスワード強度チェッカー Ultimate Password Strength Meter script.aculo.us で強度をグラフ表示するようにしたスクリプト Password Strength Field (A jQuery Plugin) パスワード強度表示用のjQueryプラグイン How to M
複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」:phpspot開発日誌
James Smith ? loopj.com Blog Archive jQuery Plugin: Tokenizing Autocomplete Text Entry 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」。 利用者に入力してもらいたい項目が多数ある場合、たとえば検索用のＵＩで、複数の検索文字列を投げたいような場合に使えそう 入力ボックスに文字列を入れると、サジェストが現れます。 Enterキーで、候補を１つのクエリにできます。で、続けて入力するとまた、サジェスト。 という感じでアイテムをどんどん追加していけるＵＩになっています。 デモページ 使いどころが難しいものかもしれませんが、使い方を考えれば、色々と使えそうですね。 jQueryプラグインなので実装も簡単です。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQuery
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
複数選択のドロップダウンにチェックボックスを付ける·Dropdown Check List MOONGIFT
「神は細部に宿る」。ほんのちょっとした機能だからと見過ごすのではなく、ほんのちょっとしたことだからこそ誠心誠意作り込んでいくといったような意味合いが込められた言葉だ。コンピュータのGUIインタフェースはまだここ十年、二十年の話でありまだまだ改善の余地は大きい。 ドロップダウンリストが便利に！ 例えばファイルのアップロード、一つ一つファイルを指定するなんて愚の骨頂だ。さらに複数選択のドロップダウンも選んでいる途中のちょっとしたミスで全ての項目が非選択に戻ったりする。これも問題だが、解決策としてDropdown Check Listがある。 今回紹介するオープンソース・ソフトウェアはDropdown Check List、ドロップダウンリストにチェックボックスを付けるというjQueryプラグインだ。 これは良いアイディアだ。Dropdown Check Listを使うとドロップダウンの複数項目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌
Site Under Maintenance
[JS]パネルをiGoogleのように移動できるスクリプト -Easy Widgets
[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌