checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」:phpspot開発日誌
ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」。 次のようなデザインにすることが可能です。CSSをカスタマイズしてiPhoneっぽくすることも出来ます $(element).ezMark() とするだけでスタイリングできるのはいいですね。 関連エントリ フォームのユーザビリティに貢献するjQueryプラグイン ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「
iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」:phpspot開発日誌
iPhone UI iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」。 iPhoneアプリケーションのようなUIパーツが揃っており、PCのブラウザで見ると、iPhone枠が次のように表示され、iPhoneで見ると枠なしでそのまま動作するというものです。 PCで見ても、iPhoneで見ても同じように見れるサイトを作る際に役立ちそうです。 まだバグがそれなりにあるっぽいですが、面白い仕組みですね。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 iPhoneにインスタントメッセージをPHPからpushme.to経由で送るサンプル
ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン:phpspot開発日誌
MITYA.CO.UK | Scripts | Animated table sort (REGEXP friendly) ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン。 どこからどこに移動するというのが目視で確認できるので、無駄に、というのは言い過ぎかもで便利かもしれません。 テーブルの内容が、「ほげほげ(111)」のような文字を含む値であっても、正規表現で数値をマッチさせることでソートするなんて機能もあるみたいです。 比較テーブルなんかで使うと分かりやすい比較のUIが作れそうです。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 CSV形式のデータを簡単にテーブルに出来るjQueryプラグイン「csvtotable」 ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMe
22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」:phpspot開発日誌
PrimaryCSS 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」。 単体のCSSで予め用意されている22のレイアウトを簡単に実装できるものです。 レイアウトの種類は沢山あります。幅は固定されているので好みに応じて一括置換すればよいでしょう。 サイト上でHTMLコードの発行もできるので、サクッと複雑な段組レイアウトを作成したいような場合に便利そうです。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 使えるCSSレイアウトテンプレート集「mycelly.com」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」:phpspot開発日誌
どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」 2010年08月18日- jQuery Image Scale Carousel どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」。 画像というと、最初から規定サイズにまるめられているわけではなく、指定サイズの枠に表示するには部分的にカットしなければいけませんが、このプラグインを使えば配列形式で画像のURLを並べて特定のエレメントに適応してあげるだけで、そのエレメントのサイズに収まるギャラリーが作れます。例えば、200x200のdivがあった場合、$(div).isc( options ); のように初期化するだけで、そのdiv内でフルに動作するギャラリーを作れます。 URLを配列で渡すだけで簡単に実装でき
選択テキストをTwitter等ソーシャルサイトに瞬時に共有できるようにするjQueryプラグイン:phpspot開発日誌
選択テキストをTwitter等ソーシャルサイトに瞬時に共有できるようにするjQueryプラグイン 2010年08月16日- Jquery selected text sharer - Demo 選択テキストをTwitter等ソーシャルサイトに瞬時に共有できるようにするjQueryプラグイン。 テキストを選択すると次のようにポップアップが表示され即座にソーシャルサイトに共有できるプラグインです。 シェア先は、汎用的にプラグインへのオプションで指定できており、カスタマイズも容易です。 次のようにTwitterをシェア先として定義します。パラメータが渡せればどんなサイトでもOK。 $('.demo1').selectedTextSharer({ lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://.
複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」:phpspot開発日誌
複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」 2010年08月12日- jQuery - So So Social - jQuery News Feed from your Social Networks 複数のソーシャルサイトのRSSを読み込んでまとめて表示できるjQueryプラグイン「So So Social」。 ソーソーソーシャルという名前もなかなかいいですね。 TwitterやFlickr、Deliciousの情報を次のように一括して表示することが出来ます。 TumblrやWordPress、Last.fm、Facebookなども統合して表示することが可能。 自サイトに自分のアクティビティを一括して載せられるので便利ですね。 利用するには、so.so.social.init.js によってフィードのURL等を入力して
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」:phpspot開発日誌
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 2010年08月11日- Zoom.it 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」。 こういうものを実現するライブラリ等はありましたが、Zoom.itはサイトにURLを貼りつけて送信するだけで、インスタントに実現でき、更に自サイトに埋めこむことだって出来ます。 大きなサイズの画像をうまく指定のサイズに収めつつ、拡大もさせたいという場合にかなり使えそうです。 コントロールボタンが右下に表示されるのでここで拡大・縮小が可能 めいっぱい拡大してこんな感じ。本来の美しさは損なわれません。 使い方によっては非常に便利に使えそうですね。 以下に実際に埋め込んでみました。
軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」:phpspot開発日誌
CLEditor - WYSIWYG HTML Editor 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」。 次のようなすっきりしたデザインのWYSIWYGエディタを実装出来ます。ボタンはデフォルトで多数ありますが、カスタマイズ可能です。 全てダウンロードしても10KB以内という軽量なものになっています。 内容に応じてサイズを自動で変えたりすることも出来るようです。 IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+で動作確認しているそうです。 jQueryプラグインというのもいいですね。 これは覚えておいてよさそう。 関連エントリ WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」 まだまだあったJavaScript製のWYSIWYGエディタコンプリート
1つのselectボックスに連動させて2個目のselectボックスの内容を変えるjQueryサンプル:phpspot開発日誌
1つのselectボックスに連動させて2個目のselectボックスの内容を変えるjQueryサンプル 2010年08月09日- Dynamic Dependent Select Box using Jquery and Ajax 1つのselectボックスに連動させて2個目のselectボックスの内容を変えるjQueryサンプルが公開されています。 これは、国を選んだ後、都市を選ぶような場合に使われますが、データをAjaxで取得するので、HTMLが肥大化せずに便利に使えます。 日本だと、東京都を選んだ後、何区を選ぶようなシチューエーションで使えますね。 サーバサイドのスクリプトはPHP+MySQLで組まれていて、データ量が多くなっても対応できそうです。 利用前に注意点として、配布されているphpのソースではSQLインジェクションの問題があるので、もし実際に利用する場合は書き換えてあげる必要
画像の内側にボーダーをひいてクールに画像をみせるjQueryプラグイン:phpspot開発日誌
Inset Border Effect jQuery Plugin | CSS-Tricks 画像の内側にボーダーをひいてクールに画像をみせるjQueryプラグイン。 通常、ボーダーというと外側に付けられますが、掲載されているサンプルでは内側にボーダーを表示し、更にカーソルを合わせるとアニメーションしながらボーダーが消えるというカッコいい演出が実装できます。 内側に白いボーダー カーソルを合わせるとアニメーションしながら消える こちらのデモを御覧ください。 ギャラリーなんかに実装するとカッコ良さそうです。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル 泡のアニメーションで癒しを演出できるjQueryプラグイン「Bubble Engine」 キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景
飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」:phpspot開発日誌
飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」 2010年08月04日- longSHORE - The missing URL service 飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」。 bit.ly なんかで短縮されたURLの上にカーソルを合わせると次のようにポップアップが表示され、リンク先に関する情報が分かります。 なんと、驚くことに５４５のURL短縮サービスに対応しています。 →対応サービスはこちら 実装は、単にプラグインを読み込むだけで超簡単ですね。 英語部分は直接日本語化しちゃえばすぐ使えそうです。 関連エントリ PHP25行で書くURL短縮プログラム PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」:phpspot開発日誌
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 2010年08月03日- Plugins | jQuery Plugins チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 通常、チェックボックスといえばONかOFFかですが、中間の意味を持つ状態を次のように表せるようになります。 例えば、Header1 の下位のアイテムが全部チェックされていないけど、部分的にチェックされているという状態を表せます。 ウイルスソフトの部分指定なんかにデスクトップアプリケーションでは採用されているUIですね。 下位のアイテムを全部チェックすると、Header1は通常のチェック状態になります。 使いどころによっては便利なUIづくりに役立てられそうですね。 関連エントリ フォームに簡易電卓を組み込める
Bit.lyのクリック数をエントリにjQueryで表示するコード:phpspot開発日誌
Showing Off bit.ly Clicks of Your Posts With jQuery | AEXT.NET MAGAZINE Bit.lyのクリック数をエントリにjQueryで表示するコードが公開されています。 Twitterに投稿した自分のブログエントリ。そこからbit.ly をクリックしてエントリに辿りつくわけですがbit.lyではクリック数を取得できます。 そのクリック数をエントリ自体にjQueryで表示してしまおうというものです。 デモページはこちら どういったエントリがクリックされやすいかという部分を知る意味でも導入してみるといいかもしれませんね。 関連エントリ Bit.lyのAPIバージョン3でPHPを使いURLを短縮するコード例 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 Y
テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」:phpspot開発日誌
テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」 2010年08月02日- InputNotes jQuery Plugin テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」。 テキスト入力を行うとリアルタイムにヒントが反映されます。 NGワードの入力チェック、入力形式のエラーチェックに使えそうです。地味にアニメーションする点もナイスです。 こうした機能は手間は増えますが、送信してからエラーを表示するよりもベターなので使いやすさを考えると入れておきたいですね。 こうしたライブラリで、できるだけ簡単に実装できますね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ Java
ホバー開始、終了時のアクションタイマーを実装できるjQueryプラグイン「hoverTimer」:phpspot開発日誌
CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaEleme... 次の記事 ≫：Bit.lyのクリック数をエントリにjQueryで表示するコード Plugins | jQuery Plugins ホバー開始、終了時のアクションタイマーを実装できるjQueryプラグイン「hoverTimer」。 cssの:hoverなどを使うと、マウスホバー時の動作を指定できたりしますが、hoverTimerを使えば、ホバー開始や終了から何秒後という風にタイミングをずらせて処理を行うことが容易です。 ヘルプやヒントなんかで、マウスを乗せたらしばらくはマウス操作に関わらず数秒表示しておくというような部分に応用できますね。 実装は次のようにhoverTimerメソッドにオプションを渡せば動きます。 $(element).hoverTimer({ waitover:200, //
CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」:phpspot開発日誌
HTML5 video player in CSS with Silverlight and Flash : MediaElement.js CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 HTML5非対応ブラウザ向けに、Flashはもちろん、こちらのライブラリではSilverlightもサポートしています。 こうしたライブラリも多数出揃ってきていますが、どれがよく使われるようになるんでしょうね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 MooTools用のHTML5動画プレイヤー「Moovie」
Amazonスタイルのアイテムスクローラー実装jQueryプラグイン:phpspot開発日誌
Plugins | jQuery Plugins Amazonスタイルのアイテムスクローラー実装jQueryプラグイン。 amazonでよく見る次のようなアイテムスクローラーをjQueryで簡単に実装できます。 <ul>でアイテムリストを定義しておいて、$(element).amazon_scroller({options}); のようにして簡単に初期化することが可能です。 ブログエントリの下部でのオススメ商品なんかの紹介に使えそうですね。 関連エントリ 画像を縦・横にゆっくりスライドさせたい場合に使えるjQueryプラグイン「PanoScroll」 カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み コンテンツを滑らかにスライドさせるjQueryプラグイン
軽量かつ柔軟にカスタマイズが可能なJavaScript ColorPicker:phpspot開発日誌
ColorPicker 0.6 軽量かつ柔軟にカスタマイズが可能なJavaScript ColorPicker。 次のような様々なUIデザインを選べる上に、CSSでデザインできるカラーピッカーです。 カラーピッカーは色々ありますが高機能な部類に入るのではないでしょうか。 特定のライブラリに依存しない点もいいですね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ リッチなカラーピッカーウィジェット「Free Advanced DHTML Color Picker」 単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」 PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」
背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例:phpspot開発日誌
Beautiful Background Image Navigation with jQuery | Codrops 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例。 デモページを見ていただくとそのクールさ加減が分かると思います。Flashを使わずになかなかクールな効果が出てますね。 ちょっとしたプロモーションサイトなんかに導入してみるのもよさそうです。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル 泡のアニメーションで癒しを演出できるjQueryプラグイン「Bubble Engine」 キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム jQueryでアニメーションするソート可能なデータグリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
