【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！
どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとは アコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意
JavaScript：連続クリック対応方法 - 覚え書き.com
画面上に設置したボタンを連続でクリックされた場合に予期しない挙動を引き起こす事が良くあります。 そういう場合の対応方法についてメモしておきます。 基本的に対応する方法としては以下の様な方法があります。 ボタンのdisabled属性をtrueにする フラグを設置してクリックされたらフラグをfalseに設定してイベント処理されないようにバイパスする 以下はjQueryベースで連続クリックされた場合にフラグを使用して判定する方法です。 jQueryサンプル // 連続クリック防止フラグ var clickFlg = true; jQuery(function($) { $(".button").on("click", function() { if(clickFlg) { // イベント処理中はフラグをoffにします。 clickFlg = false; // クリック処理を実施 } else
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
コピペでOK！スムーススクロールでページ内リンクやトップへ移動！#なしで
記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptやjQueryのプラグインを使わずに実現する方法です。 最近は多くのブログ・サイトで右下に「ページ先頭へ」戻るボタンやリンクを見かけます。しかしクリックして一気に最上部までワープすると味気ないし自分の位置を見失いがちです。目次の場合も同様です。 ゆめぴょんです。こんちはっ(^^)/ ページ内リンクはSEO対策にもなると聞いたことがあります。しかし私はむしろ訪問者のためのナビゲーションの1つとして便利だと思っています。 ページ内部リンクのしくみと弊害 そのしくみはとても簡単です。現在のURLの後に「#」をつけるとページ先頭へ、「#pyon」などをつけると「id="pyon"」を設定してる位置へジャンプします。 だから見出しに「
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
[JS]多彩なカスタマイズが可能なLightbox風スクリプト -ColorBox
インターフェイスのデザイン、クローズやアローなどコントローラーのカスタマイズが可能な画像を拡大表示するLightbox風のスクリプト「ColorBox」を紹介します。 ColorBox 拡大表示できるのは画像のほかにも、インラインコンテンツ、外部コンテンツに対応しており、AJAX表示、画像ギャラリーにも対応しています。 デモでは、4パターンのカスタマイズが紹介されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」（閉じた状態）のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
jQueryとは――Webデザイナーから見た魅力 (1/3)
Webデザイナーさん、（X）HTML／CSSコーダーさん、マークアップエンジニアさん、お待たせしました。Web制作者のためのjQuery入門が始まります。 本連載では、現役Webクリエイターの西畑一馬氏が、人気のJavaScriptライブラリ「jQuery」を使ったリッチなUI（ユーザーインターフェイス）の作り方を解説します。プログラムの基本的な書き方の説明から、実務で使えるサンプルの紹介まで。目指すは「Webデザイナーが最短距離でjQueryを使えるようになること」です。 jQueryをマスターすれば、たとえば「このタブパネルの向きを変えてほしいんだけど……」といったクライアントのわがままにもスピーディーに応えられるようになります。仕事の幅をぐっと広げるきっかけに、本連載をお役立てください。 （編集部） 圧倒的人気を誇るJavaScriptライブラリー「jQuery」 ここ数年、「pro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobileを使ったフリーのスマートフォン向けWordPressテーマ・Generic jQuery Mobile | コブスニュース かちびと.net | コブスオンライン／COBS ONLINE
988 + JavaScript Libraries : skuare.net