http://www.designwalker.com/2009/02/jquery-dropdown.html
[JS]複数のパネルをウィザード形式に実装するスクリプト -Smart Wizard
複数のパネルを順番に表示するウィザード形式のコンテンツをフレキシブルなスタイルで実装するスクリプト「Smart Wizard」をFivelistから紹介します。 Smart Wizard demo デモでは4つのステップがあるコンテンツが実装されており、各ステップに進む際は「Next」ボタンをクリックして移動することができます（※ステップでは移動しません）。 前のステップに戻る際は「Back」ボタンかステップのナビゲーションで操作ができます。 デモは他にも、ステップが垂直に実装されたタイプもあります。
[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>
魅力的なUIにするためのjQueryプラグイン20 – creamu
Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま
jQueryを使ったドロップダウンメニューの作り方 – creamu
woorkで、jQueryを使ったドロップダウンメニューの作り方が紹介されています。 ↑のようなシンプルで必要充分なメニューですね。マウスオーバーするとメニューの背景色が変わったり、レイアウトもかっちりしているので使いやすそうです。 HTML / CSSとjQueryのコードが公開されていますね。 デモは以下から。 » demo here 参考にしてみてはいかがでしょうか？ » How to implement a perfect multi-level navigation bar ブログのデザインリニューアルしたくなってきたぞ。MT5にするタイミングで、とか考えてたけど、ささっとやっちゃおうかな。
lightbox系のシンプルに画像を拡大できるJavaScript – creamu
ちょい遅いですが使いやすそうなのでエントリー。 DYNAMICDRIVEというサイトで、lightbox系のシンプルに画像を拡大できるJavaScriptが紹介されています。 ヘッダでjsを読み込んで、画像にclass=”magnify”を指定することで実装できるようですね。 duration等もオプションで指定できるようだし、動きがシンプルで使いやすいのではないでしょうか。 一度見てみてください。 » jQuery Image Magnify 最近障害とかいろいろありすぎて頭が整理できん。。。 Macの調子が悪くなりサーバ障害がきたと思ったら今度は自宅のワイヤレスネットワークがおかしくなりました。。 サポートに電話しつつ環境設定を設定し直すことで直ったっぽいかな。 不要なルータがかんでいたので外して、ケーブルが5mくらいと余計に長かったので1mくらいのにしました。ちゃんとつながるようにな
サムネイルをスムーズに拡大するjQuery – creamu
Build Internet!で、Elastic Thumbnail Menuというサムネイルをスムーズに拡大するjQueryが紹介されています。 これはかなりいいですね。マウスオーバーすると、うにゅ、うにゅっとサムネイルが拡大します。動きがとても気持ちいい。 デモは以下から。 » LIVE DEMO imgを覆うアンカーにクラスを指定して、CSSでスタイル、そしてjQueryで動きをつけているようです。 IEのfixについても書かれていますね。以下のソースをCSSに書くことで問題ないようです。 img { -ms-interpolation-mode: bicubic; } ぜひ見てみてください☆ » Sproing! – Make An Elastic Thumbnail Menu 無性にWPが触りたくなってきたぞ。ちょいいじってみようかな。
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
[JS]画像にオーバーレイしたパネルをスライド表示するスクリプト -Image Overlay
オプションでは、上記の他に画像のサイズ・ボーダーの色、オーバーレイのパネルの色やテキストの色、アニメーションのスピードなどが調整できます。 Image OverlayはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]jQueryのプラグイン33+1選 -2009年9月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]パララックス効果でパネルをダイナミックにスライドさせるスクリプト
jQueryを使用して背景にパララックス（視差）効果を持たせ、パネルをダイナミックにスライドさせるチュートリアルをIn The Woodsから紹介します。 Create a Funky Parallax Background Effect using jQuery demo デモではちょっと酔いそうな感じもありますが、右上のナビゲーションからパララックス効果を楽しめます。 実装はパネルもナビゲーションもリスト要素で、パララックス効果を生み出している雲は空divで配置されています。 スクリプトはjQueryとそのプラグイン「jQuery.ScrollTo」が利用されており、ポジションやタイミングを変更することができます。
超クールなJavaScriptプラグイン40 – creamu
nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – jQuery FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ » Thickbox 画像だけでなくテキスト等も読み込めるlightbox » FancyBox 超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク » Slideshow 2! for MooTools とてもクールなMooToolsによるスライドショー » SmoothGallery こちらも超クールなスライドショー。MooTools v1.11を使用 » DynamicDrive – Carousel Slideshow 3Dに魅せ
自動でスクロールするシンプルなニュースティッカーの作り方 – creamu
nettuts+で、自動でスクロールするシンプルなニュースティッカーの作り方が公開されています。 id=”ticker”のdlを用意して、dt、ddタグでリストを記述。CSSを指定して、JavaScriptを記述。マウスオーバーするとストップするティッカーとなっています。 win IEのfixもされているようですね。 ティッカーを作りたい方はぜひ見てみてください。 » How to Create a Simple News Ticker カフェで作業中。TVが昨日から映らなくなったので（ついに・・約20年ものです）、でかいのを見にいこうかな。40インチとかほしー！
フォームを使いやすくするためのjQueryプラグイン&チュートリアル20 – creamu
speckyboyで、フォームを使いやすくするためのjQueryプラグイン&チュートリアルがまとまっています。 いくつかご紹介しますね。 » In-Field Labels jQuery Plugin inputの中に透かしのラベル名を入れられるプラグイン » A jQuery Inline Form Validation, because Validation is a Mess inputの右上に吹き出し型でバリデートのエラーメッセージを表示 » Justify Elements Using jQuery and CSS – Tutorial jQueryとCSSでlabelのwidthを揃えるチュートリアル » jQuery Comment Preview – Tutorial コメント入力中に投稿内容をプレビューできるプラグイン。↑のキャプチャはこちら » jQuery “High
jQueryを使ったドラッグ&ドロップパネルのチュートリアル – creamu
Web Designer plusで、jQueryを使ったドラッグ&ドロップパネルチュートリアルが紹介されています。 iGoogleやWordPressの管理画面で見られるインターフェースですね。 HTMLとCSS、jQueryのソースが公開されています。 ソートの順番は、ドラッグ後に以下のような文字列が生成されて、サーバサイドで処理しているようですね。 column1=item1,item3&column2=item4,item2,item5& 一度見てみてはいかがでしょうか？ » Collapsible Drag & Drop Panels Using jQuery Gadget Partyでも、ガジェットの管理のページでガジェットの順番を変えられて、ブログパーツでの表示順を変更できます。F.Ko-Jiがさくっと実装してくれました。 今日も天気がよくて気持ちいいですねー。いろいろと出か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー
[JS]Mac OS XのDock風に伸び縮みするナビゲーションのスクリプト -Sproing!
Webデザインに使えるjQuery UIライブラリ – creamu
http://www.designwalker.com/2009/09/jquery-table.html
[JS]フォームのテキスト欄にアイコンやテキストを表示させるスクリプト -CoolInput