FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」:phpspot開発日誌
FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」 2012年07月25日- Infinite-social-wall FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」 jQueryのisotopeプラグインを使い、次のようにソーシャルサイトをまとめて表示。無限スクロール機能もあります Google Plus、Github、Pinterest、Twitter、StackOverflow、Reddit、Instagram等のメジャーなSNSサイトに対応。 これらを一目でみられ、Pinterest風のUIになっているというのはプロフィールページを作る際に便利かも 名刺なんかにTwitterやFacebook等色々載せ過ぎる
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかなり大変なものがありますが、簡単に実装できるというのはよいですね お絵かきというのは昔から人気の面白いコンテンツであるわけですが、実装したいってなった時に手軽に参考にできそうです 関連エントリ リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ コンテンツの折りたたみを楽々実装できるjQueryプラ
YiiでjQueryの重複読み込み回避 - astrsk_horiの日記
結局メニューなどでjQuery使っててレイアウトのヘッダで定義することが多いと思う。その際にwidgetなどでjQueryを利用していると重複してよびだしてしまう。 以下のようにconfigに定義することで回避可能。 'components'=>array( 'clientScript'=>array( 'scriptMap'=>array( 'jquery.js'=>false, ), ), Yiiとは編集 オブジェクト指向プログラミングで記述された、PHPのWebアプリケーションフレームワーク。 PHP5.1.0以上が必要。 続きを読むYii PHP Framework www.yiiframework.com このキーワードを含むブログを見る
レスポンシブデザインに使えるjQueryプラグイン集 – creamu
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
ユーザへの通知UI全部のせなjQueryプラグイン「noty」:phpspot開発日誌
noty - a jquery notification plugin ユーザへの通知UI全部のせなjQueryプラグイン「noty」 ページトップやボトム、あるいはページのセンターやポップアップでメッセージを表示することが出来るプラグインです noty({text: 'noty - a jquery notification library!'}); のように呼び出せばアラートが出せるみたいです。 各種オプション指定によって表示位置を変えられたりするようです 最近のWEBを見ていると通知ってやっぱり重要だなと感じるわけですが、こうしたもので分かりやすく表示してあげるといいですね。 関連エントリ faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 分かりやすい通知ボックスを作れる「Humane JS」 簡単なコードでアイコ
クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」:phpspot開発日誌
クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」 2012年01月23日- jQuery TextExt Plugin クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」。 テキストフィールドに入力するとオートコンプリートしつつ次のようにタグ風に入力できるフィールドが実装出来ます 実装コードは次のようにtextareaを初期化するだけで、補完用アイテムも配列かajaxで指定できるみたい。 こうしたインタフェースが最適な部分って最近のＷＥＢサイトでは結構ありそうですが、覚えておくと素早く簡単に実装できますね 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innov
Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」:phpspot開発日誌
Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」 2011年12月15日- Sisyphus Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」 せっかく大量に埋めたフォームが、ブラウザを間違って閉じてしまったり、ブラウザの不具合で落ちちゃったりして拳を握りしめた方もいるのではないでしょうか。 Sisyphusを使えば、$('#form').sisyphus() のような簡単な操作で、フォームのデータを自動保存できるようになります。 localStorageを使うのでサーバへの負担はないのでとても扱いやすそうです。 入力しているとほどよいタイミングで保存しましたメッセージが流れます。 試しにリロードしてみても、ブラウザを閉じて開き直してみても残っています。リストアメッセージも表
ページの右上等に分かりやすく通知を表示できたりする「jsMessage」:phpspot開発日誌
Message library ページの右上等に分かりやすく通知を表示できたりする「jsMessage」 ページの右上にアニメーションしながら流れるように通知を流すようなことが出来ます。 通知だけではなくてダイアログのような物を実装することも出来ます。 スキンにも対応しておりルックアンドフィールを変えることも容易 関連エントリ Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 Android風の簡単な通知を実現する「jQueryToast」
ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」:phpspot開発日誌
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」:phpspot開発日誌
EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力には ###-###-#### という形式の数字しか入れられなくなります。 フィールドを分けるのも面倒ですし、かといって単なるinputをおくだけだとちょっと不親切かもしれないですね。 ifとかelseも使えるので、携帯番号でも、固定電話でも使うことはできそうです。 電話番号以外にも 2011/10/01 のような日付を入れるのにも使えます。 ソフトウェアのシリアル番号っぽい入力をしてもらうことも
名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン:phpspot開発日誌
Simple yet sexy hovercard with minimum CSS 名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン 名前にカーソルを合わせると、名前のテキスト位置はそのままに次のようにプロフィールが浮かび上がるサンプルです。 ポップアップでもいいんですが、もとのテキストはそのままの位置というのがなかなかカッコイイのと技術的に面白いですね。 プロフィールが浮かび上がります。 マークアップとCSSが公開されていて、JSはjQueryを使って数行で実装されています。 ｊQueryプラグイン形式でも使うことができるみたいです 関連エントリ シンプルなツールチップ実装ができるjQueryプラグイン「mTip」 jQueryでツールチップ実装に迷ったらみるエントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリ
閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」:phpspot開発日誌
JQuery Magic Tabs Plugin | jQuery Plugins 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」。 次のように、横に長くなってもスクロールできつつ、閉じるボタンもついて、インタフェースもなかなかクールなタブUIが実現できます。 ありそうであまり無かったかもしれないプラグインですね。もちろん「タブの追加」みたいなのもできます。 実装コードはこちらに掲載されています。デモもあります ページの構成によっては使うことでより利便性の高いインタフェースを提供できそうですね 次のようなコードで比較的容易に実装が可能です。 関連エントリ 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」:phpspot開発日誌
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」 2011年08月18日- Smart sticky floating box | jQuery Plugins スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」。 スクロールするとアニメーションでついてくるサイドバー。いろんなところでよく見ますが、実装の仕方によっては酔っちゃったりかえってユーザ利便性をそこないかねないUIですが、常にサイドにあることで便利に使えるという目的で設置されているものです。 こういうUIを実装する際に使えるのがこのプラグインで、位置移動の際のアニメーション方法が多数選べるだけでなく、遅延やアニメーションの速度が自由に設定できます。 デモページで動作確
通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」:phpspot開発日誌
jQuery Notification Menu | Codebase Hero 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 次のようなメッセージ何件あるよ〜みたいな通知件数つきのメニューが実装できます。スタイリングがクールなのがいいですね。 一昔前ならどうやって実装するんだろうというこのメニューですが、WEBの進歩を感じますね 関連エントリ ブロックごとに独自の右クリックメニューが実装できるjQueryプラグイン「contextMenu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 かなりクールなjQueryのメニュープラグインやチュートリアル集
折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」:phpspot開発日誌
折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 2011年07月29日- Simple Tree Menu | jQuery Plugins 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」。 階層的なリストを単純に開いたり閉じたりできるというシンプルなメニューです。 メニューは最初からズラッと並べるより少なくしたほうが選び易いので、段階的にひらいていくインタフェースは使いやすい場面もおおそうですね。 全部開くと以下のようになります。 サイドメニューなんかにあるといいかもしれませんね。 関連エントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 かなり
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン:phpspot開発日誌
jQuery SelectBox plugin デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン。 次のようないい感じのデザインで、かつ、１つのselectボックスを変更すると他のselectボックスの内容を変更できるイベントハンドラの設定が可能。 イベントハンドラに、onOpen, onClose, onChange といったメソッドにその処理を書いておけばカスタマイズが可能です。 以下、サンプルコードです。実装がカンタンな上に後から見たときに分かりやすい。JavaScript最高です 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQ
ページ内のパンくず的なものを実装するjQueryプラグイン・Sausage
うまく説明出来ないんですがページ内の 右端にパンくずっぽいページ内リンクを 作成するjQueryプラグイン・Sausage。 視覚的に分かりやすくなり、コンテンツ内に 目次のようなものを置く必要も無くなります。 縦に長いページにせざるを得ないコンテンツ に良さそうです。 パンくずっていうとちょっと語弊あるかもですが他にいい表現が思いつかないのでこいつ頭悪いなと思ったらデモ見てください。URLに#も付かないのでSEO的に妨げることも無いかと思います。また、ツールチップも出るので今どこにいるかを把握しやすくなりそうです。 たぶん、ソーセージのようにパンくずっぽいものが繋がってるからだと思います・・デモを見れば納得出来る（といいんですけどね） 右端にこのようなパンくずのようなものを設置するプラグインです。クリックでその段落の頭に飛ぶことができます。 使い方<script type="text/j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Features | Elycharts
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌