雑誌風のレイアウトが作れるjQueryプラグイン「jQuery Masonry」 | Web活メモ帳
垂直方向の高低差を最小限にする事ができるようで, 雑誌風のレイアウトを作る際に便利かもしれません。 以下のようなコードで簡単に設置できます。 <script> $('#wrapper').masonry({ singleMode: true }); </script> ただし、画像ファイルを表示する際には以下のような指定をいれなければいけないとの事。 <script> $('window').load(function(){ $('#wrapper').masonry({ columnWidth: 200 }); }); </script> 横幅の指定方法などの各種オプションを設定する事で見栄えを調整する事ができるそうです。 divを複数並べるだけで見栄えをそろえてくれるため、使い方によっては非常に便利なのではないでしょうか。 ライセンスはGPL と MITのデュアルライセンスとの事。興味
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン:phpspot開発日誌
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン 2011年02月27日- UI.Layout Plug-in - Home 2 レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン。 次のような複数ペインにわかれ、なおかつドラッグ＆ドロップでペインのサイズを変えられるようなUIが作れます。 レイアウトだけではなく様々なコンポーネントも含まれるため、Ext.JSのようなリッチなUをjQueryで実現できます。 出来ることが豊富で、デモページをひと通り見れば便利さが分かるはずです。 ドキュメントもしっかりしています。 関連エントリ Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx L
[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery
ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。 Magic jQuery デモ [ad#ad-2] 配置のデモでは、ピンクのパネル（「drag me」）をドラッグすると、それに合わせて各パネルの配置がダイナミックに変更されます。 ピンクのパネルを移動したキャプチャ 上記の各色のパネルにはそれぞれ条件が設定されています。 例えば、オレンジのパネルは下記のようなスクリプトになっています。 JavaScript $("#orange").align({top:'', bottom:"", left:"", rightIsLeftOf:'pink'}); $("#orange").limit({rightIsLeftOf:'blue'}); オレンジのパネルはピンクの左に沿って配置（align:r
960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
多数アイテムの絞り込みや並替えを超クールに演出できるjQueryプラグイン「Isotope」:phpspot開発日誌
Isotope 多数アイテムの絞り込みや並替えを超クールに演出できるjQueryプラグイン「Isotope」。 デモページ上部の Filter や Sort、Layout 部分のボタンをクリックすると、下に並ぶ多数のアイテムがそれぞれアニメーションしながら並び替わります。 例えば、iPhone等でページを見ていて、ブログの記事項目が多い場合、フィルタやソートをした方が見やすい場合があったりしそうですが、そんな場合もクリック一発で求める情報に絞り込めて便利。 ただ絞り込むだけではなくアニメーションがクールに演出してくれます。 デフォルトの並び。これだけ見ても綺麗ですが、ボタンクリックでソートすると・・・。 次のようにレイアウトががらりと変わります。 アニメーションがいいです。レイアウトなんかも替えられます。 アイテムを絞りこむと次のようにアイテムが少なくなって見やすくなります。 尚、商用で利
[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA