ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
デザイナーのためのjQueryテクニック「10 Easy jQuery Tricks for Designers」
TOP > WebDesign > デザイナーのためのjQueryテクニック「10 Easy jQuery Tricks for Designers」 非常に使い勝手が良いjavascriptライブラリ「jQuery」。様々なエフェクトを実現したり、ちょっとした問題を解決したり本当に様々な使い方がありますが、今回紹介するのはそんなjQueryを使った、デザインテクニックを集めたエントリー「10 Easy jQuery Tricks for Designers」を紹介したいと思います。 Equal-Height Columns 例えば上記のようなカラムを揃えるテクニック等、CSSでWEBを組んでいて気になる部分を解消してくれるテクニックが収録されています。 詳しくは以下 ・Rounded corners without the HTML mess（角丸を簡単に作る） ・Scrolli
Brilliant Free jQuery Image Gallery/Slider Plugins
40+ Brilliant Free jQuery Image Gallery/Slider Plugins + 14 Tutorials jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load
[CSS]一枚の画像だけでスタイリッシュなプログレスバーを実装するスタイルシート
使用画像 プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。 HTML箇所は、divが3つ入れ子で実装されています。 また、JavaScript（jQuery）を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。
iPhoneスタイルのチェックボックスをjQueryで簡単実装:phpspot開発日誌
Introducing iPhone-style Checkboxes iPhoneスタイルのチェックボックスをjQueryで簡単実装。 次のようなiPhoneに使われているようなUIのチェックボックスを実装するライブラリが公開されています。 使い方は次のように、$(エレメント).iphoneStyle() という風に初期化するだけという簡単さです。 <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script> 微妙にアニメーションする部分も芸が細かくていいです。 関連エントリ iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう iPhoneのロック解除の際のあのUIを
[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
http://blog.e-riverstyle.com/2008/10/zebratablejs.html
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌