Accordion Madness | Learning jQuery
[/html] With this option #3, we start with all of the <div>s hidden. If we click on one of the headings, the following <div> will slide down. If we click on the same heading again, that <div> will slide back up. Clicking on on any heading will also hide all of the other <div>s — the ones that don't immediately follow it. Therefore, no more than one <div> can be open a a time. To achieve this, we s
anything from herejQuery（）活用（1) Slide Toggle Button──jQuery解読(15)
HTMLの表示/隠蔽 <!--表示/隠蔽用のボタンとその操作対象となる PRE タグを包含する div タグ を設け、その class 名を "togglePRE" として、ボタンと PRE タグのセットを 全て取得する。 --> <div class="togglePRE"> <button style="dicplay:block;">ボタン説明文字列</button> <pre style="display:none;">表示/隠蔽内容</pre> </div> コードの表示/隠蔽 (function(){ 1: var togglePRE = $(".togglePRE"); //当該クラス要素がない場合には何もしない。 2: if (togglePRE.length == 0) return; //個々のクラス対象毎にイテレート 3: togglePRE.each(functio
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Mega Drop Down Menu w/ CSS & jQuery | Dropdown Menu | drop down menus | CSS Menu Tutorial | Drop Down Menu Tutorial
While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experim
jQuery Horizontal Menu Style 05 (Dark Green)
Features Full cross-browser compatibility Fully accessible even when javascript is turned off, as a pure css menu Search engines optimized Clear unordered list (LI and UL HTML tags) structure Easy to setup and update Fantastic animation and transition effects Multiple pre-desinded color schemes Completely customizable styling with CSS Powered by jQuery Extremely small - 3kb uncompressed
jScrollPane
jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has J
jQueryでフリップするカッコいいメニュー作成のチュートリアル:phpspot開発日誌
jQuery Flipping Menu Tutorial using backgroundPosition Plugin | Queness jQueryでフリップするカッコいいメニュー作成のチュートリアルが公開されています。 カーソルを合わせると、グレーの文字がスライドして、赤くなります。 静止画で見ると微妙なのでデモページをどうぞ カッコいいFlashで出来たサイトのメニューっぽいですが、これをjQueryで導入できるということで、メニュー部分にクールな印象を持たせたい場合は使ってみるとよいのかも。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」
twitter facebook hatena google pocket ページが縦に長くなるとサイドメニューとかが見えなくなってしまいます。 それを防ぐ方法としてabsoluteやfixedするケースがあります。 jQuery Scroll FollowではjQueryを使用し、スムーズについてきます。 sponsors 使用方法 jQuery Scroll FollowからjQuery、jQuery UI Core、jQuery Easing Plugin、jQuery Cookie Pluginをダウンロードします。 headには以下のように記述します。 <script type="text/javascript" src="http://yourdomain/jquery-1.2.6.js"></script> <script type="text/javascript" src
魅せる画像スライドショーJavaScript「jQuery GalleryView」
twitter facebook hatena google pocket スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。 sponsors 使用方法 jQuery GalleryViewからファイル一式をダウンロードします。 themesはjsと同じディレクトリにアップして下さい。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.galle
JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
twitter facebook hatena google pocket フォームはユーザーが積極的にアクションを起こす、重要なページです。 そのデザインを華麗かつわかりやすくすることは、ユーザーにとっても有意義なことになるでしょう。 今回のjqTransformはJavaScriptライブラリjQueryを使用して、フォームを綺麗に彩ります。 sponsors 使用方法 jqTransformからjquery.jqtransform.jsとjqtransform.cssならびに関連画像を、jQueryからはjquery.jsをダウロードします。 <link rel="stylesheet" href="http://yourdomain/jqtransform.css" type="text/css" media="all" /> <script type="text/javascri
マウスホイールでもスクロールさせられるJavaScript：via jQuery TOOLS
twitter facebook hatena google pocket 要素をスクロールさせられるJavaScriptは結構ありますが、今回のようにマウスホイールでスクロールさせられるのはなかったのではないでしょうか。 jQuery TOOLS / Scrollable - Scroll your HTML with eye candyは高機能なスクロールJavaScriptです。 sponsors 使用方法 jQuery TOOLSからjquery.tools.jsをダウンロードします。 また、マウスホイールプラグインもダウンロードします。 <script type="text/javascript" src="jquery.tools.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></
twitterをJavaScriptで表示する「Juitter」
twitter facebook hatena google pocket twitterタイムラインをJavaScriptライブラリのjQueryを使用して表示させます。 via：Juitter sponsors 使用方法 Juitterからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.juitter.js"></script> <script type="text/javascript" src="system.js"></script> また、以下のように検索ボックスを設けてみれば完成です。 <form method="post" id="juitterSearch" action="
ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」
画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。 sponsors 使用方法 jquery.showcaseからjquery.showcase.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.showcase.1.0.js"></script> <script language="javascript" type="text/
The jQuery Style - Awesome sites built with jQuery
Captcha security check jquerystyle.com is for sale Please prove you're not a robot View Price Processing
Supersized – Full Screen Background/Slideshow jQuery Plugin « Build Internet
This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features! If you are interested in this specific legacy version, you can download it here for now. Features Resizes images to fill browser while maintaining image dimension ratio No extra whitespace, no scrollbars – the en
jQuery
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Carefully Selected Open Source Solutions
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳