- ベストアンサー
JQuery UIで、表示したタブの中にアコーディオンを追加したい
こちらのページにあるようなタブをjQueryで作り、 http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm 出来上がったタブの中に、以下のページ http://allabout.co.jp/internet/javascript/closeup/CU20071215A/ にあるようなアコーディオンメニューを表示したいのですが、 タブの表示まではできるのですが、 アコーディオンメニューが追加できません。 実現へのヒント等、教えて頂ければ幸いです。
- gnine09
- お礼率50% (4/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
実現へのヒントです。 JQuery UIのデモページのソースをそのまま組み合わせるだけでできました。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page(Tab & Accordion )</title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); // Tabs $('#tabs').tabs(); }); </script> </head> <body> <h1>jQuery UI Example Page(Tab & Accordion )</h1> <!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">Page1</a></li> <li><a href="#tabs-2">Page2</a></li> <li><a href="#tabs-3">Page3</a></li> </ul> <div id="tabs-1">FirstPage <!-- Accordion --> <h2 class="demoHeaders">Accordion</h2> <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>First-Item</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Second-Item</div> </div> <div> <h3><a href="#">Third</a></h3> <div>Third-Item</div> </div> </div> </div> <div id="tabs-2">Second Page</div> <div id="tabs-3">Third Page</div> </div> </body> </html>
- 参考URL：
- http://jqueryui.com/demos/
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
どのようにコーディングしたのか教えてください。 それとも、まったく手がつけられないのですか？
お礼
返答が遅れまして申し訳ありません。 Tabを生成したあとに、そのidに対してinnerHTMLをしようとしました。 2番目の回答のように、demoコードを組み合わせて 何とか突破することができました。 ありがとうございました。
関連するQ&A
- MTでjQuery、プルダウンメニューを表示させたい。
超初心者的な質問なのですがアドバイスを頂きたく書き込みさせて頂きます。 MovableTypeにjQueryを設置して プルダウンメニューを表示させようと考えております。 jQueryの設置でつまづいてます。 http://allabout.co.jp/internet/javascript/closeup/CU20071020A/index2.htm ここで言う自分のコードとは何でしょうか？ 検索しましたが解決しませんでした。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery UI Tabでタブの一つを新しいウインドウで開きたい
jQuery UI Tabでタブの一つを新しいウインドウで開きたい jQuery UI Tabを使用してまして、 タブの一つを<div id="ui-tab-xx">の中に表示ではなくて 新しくウィンドウを開いて表示したいのですが、 どのようにカスタマイズすればできますでしょうか。 JS初心者なのでご教授いただければと思います。 使用しているJSは http://allabout.co.jp/internet/javascript/closeup/CU20000121J/ui.tabs.js こちらから拝借しました。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery タブメニューへのダイレクトリンクの仕方を教えてください。
jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery UI Accordion Plugin(jQuery U
jQuery UI Accordion Plugin(jQuery UI アコーディオン プラグイン)でアコーディオンメニューを作っています。 下記のような要素を ↓html <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> プラグインを読み込んで ↓javascript $("#accordion").accordion(); みたいな簡単な記述でアコーディオンメニューが実装できます。 サンプルURL：http://jquery.bassistance.de/accordion/demo/ これを自動で上から順に一定間隔で展開するようにしたいのですが（クリックして展開する動作も生きで）、 動きイメージ：http://www.au.kddi.com/ aubyKDDIサイトの左側のメニュ↑ このプラグインを使わないやり方とかでもいいです。 ご教授の程お願いいたします。
- ベストアンサー
- JavaScript
- jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー１ アコーディオンメニュー アコーディオンメニュー２ アコーディオンメニュー アコーディオンメニュー３ アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更 されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
- jQueryアコーディオンでリストウィジェット表示
jQuery UI Accordionというjavascriptを使用しているのですが、Twitterのリストウィジェットを入れるとウィジェット内のリンクが機能しなくなってしまいます。 どのようにしたら良いでしょうか。 http://jqueryui.com/demos/accordion/ 上記のサイトの一番上にあるアコーディオンを使いました。 下記のページをiframeで表示しています。 http://www.seraphen.com/ff14/accordion.html
- ベストアンサー
- JavaScript
- jQuery アコーディオンメニューについて
jQuery アコーディオンメニューについていくつか質問させていただきます。 当方、はじめてjQueryを使っています。 以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a> <ul class="fxmn"> <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> </ul> </li> <li><a href="2" class="open">category2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">category3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン を開き、 1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態 にしておきたいというものです。 （↓こんな感じです） category1 ・ menu 1-1 ・ menu 1-2 ・ menu 1-3 ・・ menu1-3-1 ・・ menu1-3-2 ・・ menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide(); で、 n を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、 可能でしょうか？ （タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす るなど）変更するのは可能でしょうか？ 外部scriptが使えればと思っています。 複数の質問になりましたが、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptで著作権の年表示
http://allabout.co.jp/internet/hpcreate/closeup/CU20061101A/index2.htm このページを参考に著作権の年をJavaScriptで表示させたところ、 FireFoxに限り画面が真っ白になって左上に「2008」とだけ表示されてしまいます。 ブラウザの戻るボタンを押すとちゃんと表示されるのですが、 この現象の原因と修正方法がわかる方教えていただけないでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryでタブの中に表を入れる
ｊQueryを使ってページを表示させようと思っています。 その中で、 http://5am.jp/jquery/jquery_ui_tabs/ このタブのメニューの中に http://styler.jp/blog/2013/01/18/handsontable/ こちらの表を入れ込みたいのですが、どうも上手く行きません。 css/jquery.handsontable.full.cssとjs/jquery.handsontable.full.js、js/jquery-2.min.jsを指定するとタブが上手く表示されず、外すとタブは表示されるのですが表が出て来ません。 どなたか似たようなことやったことのある方、ご教授よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryにて現在表示しているURLにあわせてCSSを追加する方法を
jQueryにて現在表示しているURLにあわせてCSSを追加する方法を教えてください。 現在、HTMLを <ul id="#menu"> <li id="#menu_home"><a href="/index.html">HOME</a></li> <li id="#menu_1"><a href="menu_1/foo.html">MENU_1</a></li> <li id="#menu_2"><a href="menu_2/bar.html">MENU_2</a></li> <li id="#menu_3"><a href="menu_3/com.html">MENU_3</a></li> </ul> のように組んでいます。 ローカルホスト上で開発テストしているので、URLは「http://localhost/～」となります。 現在表示しているURLにあわせて、たとえば、HOMEを表示している際には、 <li id="#menu_home"><a href="/index.html" class="active">HOME</a></li> のようにCSSクラスをjQueryにて実現する方法を探しています。 JavaScriptで実現する方法はあるようなのですが、jQueryで実現できないかと試行錯誤しているものの、うまく行きません。 できる限りシンプルにしたいためjQueryやAjaxのプラグインは避けたいです。 どなたかお知恵を拝借できないでしょうか？ 何卒よろしくお願いします。
- 締切済み
- AJAX
お礼
返信が遅れまして申し訳ありません。 お答えの通り、demoコードを組み合わせて突破できました。 ありがとうございました。 まだまだ勉強不足ということを痛感させられました。