- 締切済み
jQueryのtabsについて
http://www.stilbuero.de/2007/10/23/jquery-ui-tabs-aka-tabs-3/ http://www.stilbuero.de/jquery/tabs_3/ http://www.special-sauce.com/sample/ マウスオーバーでタブ切り替え、かつ自動再生をさせたくて上記2点などのリンク先を参考に作りました。しかし以下のような問題が発生してしまいました。 テキスト1にマウスを置いてアニメーション途中でテキスト2へそしてテキスト1に戻るとアニメーションが途中で止まってしまう。 http://www.stilbuero.de/jquery/tabs_3/rotate.html 上記のデモサイト（こちらはクリックで動きますが。。）でも同じ症状がでるのでJavaScriptを書き足さないといけないのかもしれません。。JavaScriptがイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。
- amata-crea
- お礼率50% (3/6)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
ライブラリなしで、似たようなものですが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .waku0 { width:600px; height:140px; border:1px #ddd solid; } #wakul { width:200px; height:140px; background-color:#eee; overflow:auto; float:left;} #wakur { width:400px; height:140px; overflow:hidden; float:left; position:relative;} .wpage { width:398px; height:138px; background-color:#eef; overflow:auto; position:absolute; top:0px; left:0px; border:1px #888 solid;} .hide { display:none; } .menu { list-style-type:none; padding:0px; margin:0px;} </style> <div class="waku0"> <div id="wakul"> <ul class="menu"> <li><a href="#menu0">あいうえお</a></li> <li><a href="#menu1">かきくけこ</a></li> <li><a href="#menu2">さしすせそ</a></li> <li><a href="#menu3">たちつてと</a></li> <li><a href="#menu4">なにぬねの</a></li> </ul> </div> <div id="wakur"> <div class="wpage" id="menu0"><img src="p0.gif" width="50" height="50" alt="あ～">あ～</div> <div class="wpage hide" id="menu1"><img src="p1.gif" width="50" height="50" alt="か～">か～</div> <div class="wpage hide" id="menu2"><img src="p2.gif" width="50" height="50" alt="さ～">さ～</div> <div class="wpage hide" id="menu3"><img src="p3.gif" width="50" height="50" alt="た～">た～</div> <div class="wpage hide" id="menu4"><img src="p4.gif" width="50" height="50" alt="な～">な～</div> </div> </div> <script type="text/javascript"> //@cc_on document.getElementById('wakul')./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) { var count = 0, p, element = evt./*@if(1)srcElement @else@*/ target /*@end@*/; if (element.tagName != 'A') return; p = element.parentNode; while (p = p.previousSibling ) count += (p.nodeName == 'LI'); p = document.getElementById('wakur').firstChild; do if( p.nodeName == 'DIV' && count-- == 0) return (new MenuSlider( p, 140, 15)); while( p = p.nextSibling ) } ,false); function MenuSlider (e, h, w){ var t, s = e.style, n = e.parentNode.childNodes, c = 0, o; while (o = n[c++]) if (o.nodeName == 'DIV') o.style.zIndex = 0; s.display = 'block'; s.zIndex = 1; t = setInterval((function (){ return function (){ s.top = h + 'px'; if (!h) clearInterval(t); else h -= Math.floor((h / 15) + 1); } })(this), w); } </script>
関連するQ&A
- jQuery UI - Tabs
jQuery UI - Tabsについて質問です。 jQuery UI - Tabsのｒｏｔａｔｅを利用して、自動的にタブが切り替わり、アクティブなタブの色が変わるといったプログラムを作成しました。 選択されたタブの色をCSSに直接記述してある時は、自動的にアクティブなタブの色が切り替わるのですが、"選択されたタブ.css("#555555")"というよプログラム上で指定した場合は正しく色が切り替わりません。 プログラム上で色を指定した場合でも、正しく色が切り替わるようにするにはどのようにしたらよいでしょうか。 お分かりの方がいらっしゃいましたら、ご教示願います。
- 締切済み
- JavaScript
- jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>
- 締切済み
- JavaScript
- jqueryでセレクトメニュー+スクロール
下記のデモサイトのように http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html jScrollPaneとjQuery UI tabsを連動させる方法は分かったのですが、 タブの部分をselectメニューにカスタマイズすることは可能でしょうか？ .change()を使うとは思うのですが、具体的な記述の仕方が分からず 困っております。 ご教授いただけると助かります。
- ベストアンサー
- JavaScript
- jQuery タブとスライダーの併用
jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>
- 締切済み
- JavaScript
- JavascriptのJQuery UI Tabsで、HTML入りのTabをaddするには?
JavascriptのJQuery UIのTabsに関する質問です。 以下のURL http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html 中の "Triggering, Enabling, Disabling, Adding and Removing Tabs"の項目についてです。 ここで、Append new tabを押すと新たなタブが出来上がりますが、 その時にHTMLを含んだタブを表示したいのですがうまくいきません。 (現状、Append new tabを押したときに白紙のタブが開いているが、 タブを開いた時に、本文を動的に生成して書き込みたい。) 私が考えたのは、 id="new-tab"のdivがHTML内に出来ているので、 そこにdocument.getElementById(new-tab).innerHTMLとする方法でした。 しかし、これがうまくいかない状況です。 どなたか、addで生成したTabにHTMLを書き込む方法をご教授下さい。 具体的には、上記リンクを参考して次のコードを書きました。 ------------------------------------------------- var num = 1; var lavel = '#tab' + num; // ↓#tab1が生成される。ここまではできました。 $('#container-9 > ul').tabs('add', lavel, 'New Tab'); var divid = '"tab' + num + '"'; // ↓これがうまく動きません… document.getElementById(divid).innerHTML = 'ああああああ'; ---------------------------------------------------- 何卒、宜しくお願いします。
- 締切済み
- JavaScript
- jQueryでスクロールボックスを・・・
添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。 そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか？プラグイン、もしくはＪavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。 【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> ：繰り返し ： </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> ：繰り返し ： </div>
- ベストアンサー
- 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
- 「Dialog」と「tabs」併用時の挙動
jqueryのUIについてです。 Dialogの表示内容をtabsにした場合 場合によっては tabsの1番目のタブがマウスオーバーした時の色で 潰れてしまいます 例(1) Dialogを開く 1番目以外のタブを選択して、Dialogを閉じる 再びDialogを開く 1番目のタブがマウスオーバー色で潰れている 例(2) selected:2などのように 初期タブを指定して、Dialogを開くと 1番目のタブがマウスオーバー色で潰れている 使用テーマはPepper Grinderです 他のテーマなら普通なのかは調べてないですが・・・ tabsのオプションは下記を試しましたがダメでした。 expires: 0, cache:false, 行き詰ってしまいました 改修方法を教えてください。
- ベストアンサー
- JavaScript
- タブ切り替えが出来るjavascriptを使用しています。
タブ切り替えが出来るjavascriptを使用しています。 http://5am.jp/jquery/jquery_ui_tabs/ ここのサイトを参考にしてタブ切り替えが動くところまで行きましたが、 どうにかして、別ページからリンクをクリックした時に、特定のタブへ直接飛ぶようにしたいと思っています。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } }); }); </script> ヘッダーにある上記のjavascriptを少し編集すればできそうな気がするのですが、 もうお手上げになっちゃいました。 申し訳ないのですが、どなたか教えていただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
