可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。 吹出しには背景画像が指定されているので、 CSSを変更してオリジナルの吹出しにする事も簡単そうでした。 使い方 以下のようなスクリプトを追加する事で表示する事ができました。 $('h1').grumble({ text: 'ここにメッセージを入れます!', angle: 85, distance: 100, showAfter: 500 }); オプションの説明 text:表示する文章 angle:角度 distance:距離 showAfter:指定した秒数後に表示（ミリ秒） オプショには他にもコールバック処理なんかもありました。 詳細&ダウンロードは下のリンクからどうぞ！

ドットインストール代表のライフハックブログ

「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。 使い方はこんな感じです。 var url = $.url('http://example.com/folder/index.php?item=value'); url.param('item'); こうするとクエリーのitemの値”value”が取得できるというわけです。 他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。 これはいいかも。 詳細＆ダウンロードは以下からどうぞ。

HTMLでアプリを作る際にいつか使いそうなのでメモ的にエントリー。 iPhoneの通知バッジ風のUIを作れるjQueryプラグイン「Badger」が良さそうです。 ↑画面のように、divの右上の方に アイコンと数値を表示してくれます。 ↑NEWマークにした所。 何かを告知したいときに便利ですね。 使ってみたい方は下のリンクからどうぞ。

いつか使いそうなのでエントリー。jQueryを使ってタグを入力するためのプラグインです。 オートコンプリート機能もあるし、カンマで次のタグをどんどん入力できるようになっていてかなり便利そうでした。 使ってみた様子 ↑オートコンプリートの様子 ↑ダブルクリックで編集モードになり、保存とキャンセルボタンが表示されます。 使い方 使い方もシンプルで、オートコンプリートのデータを取得するURLを指定するだけでOKです。 $( "#tagform-full" ).find('input.tag').tagedit({ autocompleteURL: 'server/autocomplete.php', }); 使い勝手が良さそうですね。 詳細＆ダウンロードは以下からどうぞ。

料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex

なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ

Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. […] Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either

A 10 jQuery Accordian Plugins 20 jQuery AJAX Plugins 10 Ajax and jQuery Plugins 10 jQuery Ajax Widgets 10 jQuery Alert Windows Plugins 15 jQuery Animation and Effects Plugins 8 jQuery Animation Controls Plugins 10 jQuery ASP Plugins 10 jQuery Audio Plugins B 7 jQuery Browser Tweak Plugins 1 10 jQuery Browser Plugins 2 10 …

レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール

When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this - your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse. This is why today we are going to demonstrate the proce