[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい!!コードを見せるならこれがよさそうですね! さて、かっこいいGoogle Prettifyですが、こ
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 (利用する際はそれぞれライセンスをご確認くださいね) 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです=オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC(IE以外)でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも(IE6でも)よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
テキストリンクなどのa要素を内包するdiv要素の全部をクリック可能にするjQueryのプラグインを紹介します。 Div Linker デモページ [ad#ad-2] Div Linkerの実装 実装は非常にシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.divlinker1.0.js"></script> HTML デモのようにテキストリンク(a要素)をdiv要素で内包します。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <
ユニークだったのでご紹介。グローバル メニューに連動してアコーディオンが 連動して開閉するコンテンツを実装する jQueryプラグイン。使いどころはあまり 無さそうですけど、もしかしたら、とい うことで・・ IE6や7でも動いてくれます・・・が、tableに置き換える事でなんとか実装してるようです。少しチカチカするので使いどころに悩みますが・・ グローバルメニューにマウスを乗せると、下部のアコーディオンが開閉します。なかなかインパクトありますねー。 下層メニューも作れる。 IETesterによるIE6のキャプチャです。 こういうのも出来るそうな。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script> <script t
カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 2011年09月30日- jBubbles - jQuery plugin to make links or other elements bubble カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 正直、魚以外に誰が得するんだろうと思うプラグインですが、面白かったのでご紹介です。 プラグインを改良してカーソルを合わせると超気持ちいい演出に応用できるかもしれません。 使い方は以下のように超簡単です。が手間に見合わない効果かもしれません。 $( selector ).mouseover(function () { $(this).jBubbles(); }); 関連エントリ Windowsのスピンボタンコントロールを実装できるjQueryプラグ
jQuery Floater Plugin ? Examples Design Chemical Lab 面白いフローティングナビゲーションを実装できる「jQuery Floater」 特定のブロックをページの特定の位置に配置し、スクロールさせてもアニメーションしながら位置を記憶することができます。 要素をバウンドさせながらもとの位置に戻す効果などもあって使いようによってはなかなか面白い使い方ができそう ちょっと文章では説明しづらいのでサンプルページを見てみてください サンプルページにサンプルと一緒にコードが載っているので実装は簡単にできそうです。 関連エントリ テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 Yahoo!Incのお天気ウィジェット実装jQueryプラグ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く