submit, buttonを角丸にしたデモ 対応ブラウザは、IE6+, Fx2+, Op9+, Safari2+, Chrome, iPhoneとなっています。 オプションでは、角丸のサイズ、アンチエイリアスの有無、角丸を適用するコーナーの指定などができます。 スクリプトはjQueryのプラグインのため、動作にはjquery.jsが必要です。 Post on:2008年11月15日
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
david walsh blogから、テキストリンクをアニメーションでスムーズにスライドさせるスクリプトを紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('a.nudge').hover(function(){ //mouse in $(this).animate({ paddingLeft: '20px' },400); }, function(){ //mouse out $(this).animate({ paddingLeft: 0 }, 400); }); }); </textarea>
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms. If you want to display iframed content, video, images or flash, please take a look at prettyPhoto as it is a better alternative. For the full documentation, please t
jQueryでクールなナビゲーションを作りたい。 そんなときにおすすめなのが、『8 Sites with Excellent jQuery Navigation』。素晴らしいjQueryナビゲーション8選だ。 以下にいくつかご紹介。 ↑のキャプチャはMacHeist Loot。 Carrot Creative WP Coder Grooveshark Widgets その他のリストは以下から。 » 8 Sites with Excellent jQuery Navigation 素晴らしいjQueryナビゲーション、チェックしてぜひ参考にしてみてはいかがだろうか。 恵比寿でカフェ中っと。お客さんはまだ少ないね。俺はエンジンかかってきたぞぉお。 それにしても天気のいい週末は気持ちいい。 うお、一造くんがMacBook ProのHDを500GBにしてる!すげえ。Airは、無理か。。いいなぁ。
画像をスライドさせるギャラリーが作りたい。 そんなときにおすすめなのが、『jQuery plugin – Easy Image or Content Slider』。jQueryのイメージ&コンテンツスライダーだ。 これを使えば、水平方向や垂直方向に画像をスライドさせることができる。テキストなどのコンテンツも可能だ。 使い方はとてもシンプル。デモは以下から。 » Default non-styled image slider jQueryのイメージ&コンテンツスライダー、チェックしてぜひ見ていただきたい。 » jQuery plugin – Easy Image or Content Slider 今日は新年会。楽しみやね。
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Ajaxify さまざまなAJAXコンテンツを実装。 Agile Carousel パネルをダイナミックにスライド。 Start/S
There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. James Padolsey Color Switcher
クールで使える機能をjQueryで実装したい。 そんなときに参考になるのが、『The 20 Most Practical and Creative Uses of jQuery』。実用的でクリエイティブなjQueryの使用例20選だ。 以下にいくつかご紹介。 ↑のキャプチャはFamSpamsのFaceBox。 James Padolseyのカラースイッチャー Dragon InteractivesのjQueryナビゲーション CarrotCreative-Customのlightbox Incredibleのログインフォーム その他のリストは以下から。 » The 20 Most Practical and Creative Uses of jQuery 実用的でクリエイティブなjQueryの使用例、チェックして参考にしてみてはいかがだろうか。 週初めですねー。がんばりましょう。
ページをぺろっとめくるようなエフェクトをつけ、その下に広告などコンテンツを配置できるスクリプト「Page Peel」をSmpleから紹介します。 jQuery Plugin Page Peel demo ページがめくれるエフェクトはFlashで実装されており、スムーズに動作します。 スクリプトのオプションでは、ページ箇所のサイズ、ページの配置場所、ページのFlash・画像などを変更することができます。 ダウンロードできるファイルには、fla, psdファイルも含まれています。 Page PeelはjQueryのプラグインのため、実装にはjquery.jsが必要です。
jCarousel 画像をカルーセルのアニメーションでスライド表示。 画像拡大スクリプト(Thickbox)と組み合わせたり、ニュースサイトのようにテキストを垂直方向にスライドしたり、AJAXにも対応。
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
jQueryのスルスルスクロールを指定1つでバシバシ使う このブログでも使っているjQueryを使ったスルスルーと動くスクロールなんですが、どこからどこへ移動したのかを目で追えるので分かりやすいし、動きも気持ちいいので大好きです。 多くの案件では1ページ内にページの先頭へ戻るアンカーリンクのみコレを利用してたんですが、この動きがクライアントに大好評のようでページ内の他のアンカーリンクでも使いたいという要望が増えてきました。今までこの動きの指定をJSで指定してたところに1つリンクが増える程度ならclassとリンク先だけ変更して同じ記述をコピーしちゃえばいいやってJSが分からない私の発想で乗り切ってたんですが、1ページ内に5個も6個も増えてくるとさすがに書くのが面倒というか、ほとんど同じ処理なのに重複した記述は要領悪いよなぁと思い始めまして・・・。 例えばリンクのページなんかでカテゴリが5個あ
4 Pings & Trackbacks Pingback: 11 Ways to Enhance a User Interface with MooTools | Web Design Ledger Pingback: 11 Excellent Solutions for Creating Tooltips | Web Design Ledger Pingback: 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger Pingback: 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger 72 Comments Nice collection of techniques! You might like
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slide
Spryの開閉パネルの件 このサイトの最下部で使ってる開閉パネルについてメールを頂いたので、それについて書いてみます。jQuery以外のライブラリに触れるの久しぶりすぎて記憶が飛んでた・・・。 Sakkさんへ。 メールありがとうございました。お返事です(n'∀')η ダウンロードと必要なファイル まず本体をダウンロードします。 Adobe Labs - Spry framework for Ajax このページの「Downloads」んとこのリンクを辿っていくとダウンロードできます。途中Adobe IDが必要になります。IDをまだお持ちでないなら作ってダウンロードしてくださいまし。 うちで使ってるのと同じようにするなら必要なのは上でダウンロードしたものの中の「widgets/collapsiblepanel/SpryCollapsiblePanel.js」と「widgets/collaps
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く