Dialogとtabsの併用時の挙動と改修方法
- Dialogをtabsにした際、1番目のタブがマウスオーバー時の色で潰れてしまう問題が発生しています。
- Dialogを開く前に別のタブを選択し、Dialogを閉じて再び開くと1番目のタブがマウスオーバー色で潰れています。
- 初期タブを指定してDialogを開くと1番目のタブもマウスオーバー色で潰れてしまいます。改修方法はありませんでしょうか？
- ベストアンサー
「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, 行き詰ってしまいました 改修方法を教えてください。
- re_shigotonin
- お礼率35% (24/68)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Dialogを開いた時、focusできる最初の要素にfocusが当たるプログラムになっているようです。 $( "#dialog" ).dialog({ open: function () { $('a:first', this).blur(); } }); これがそのまま通用するかは分からないですが、focus時のスタイルが適用されないよう openイベントにfocusを外す関数を設定するのが手っ取り早い気がします。
関連するQ&A
- jQuery UI - Tabs
jQuery UI - Tabsについて質問です。 jQuery UI - Tabsのｒｏｔａｔｅを利用して、自動的にタブが切り替わり、アクティブなタブの色が変わるといったプログラムを作成しました。 選択されたタブの色をCSSに直接記述してある時は、自動的にアクティブなタブの色が切り替わるのですが、"選択されたタブ.css("#555555")"というよプログラム上で指定した場合は正しく色が切り替わりません。 プログラム上で色を指定した場合でも、正しく色が切り替わるようにするにはどのようにしたらよいでしょうか。 お分かりの方がいらっしゃいましたら、ご教示願います。
- 締切済み
- JavaScript
- 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がイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。
- 締切済み
- 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 タブとスライダーの併用
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
- jQueryのui.tabのcookieについて
jQueryのui.tabのcookieについて ブログのサイドバーにタブメニューを設置して、ユーザーがタブをクリックするとそのタブを記憶して同じブログ内の別のページへ移動してもそのタブの内容が表示されるというものを作ろうと思い、 jQueryのui.tabで作ったタブにjquery.cookieを利用してクッキーを保存するようにしたんですが… $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); タブをクリックして同じブログ内の別のページへ移動するとタブが初期状態に戻ってしまいます。 どなたか改善策を知っているかたは教えてもらえないでしょうか？？よろしくお願いします！！
- ベストアンサー
- 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 tabs 開閉式タブについて
jQuery tabsについて質問させてください。 知識不足です。。 やりたいこととしましては、複数タブメニューの開閉です。 メニュー１ クリックで⇒開く ⇒再度クリックで閉じる メニュー１開放時⇒メニュー２ クリック⇒メニュー２の内容に切り替わる⇒メニュー２再度クリックで閉じるといった内容です。 開閉だけなら collapsible: true で解決ですが、slideToggle のような効果も付けたい。 単一のメニューの場合は slideToggle で一発ですが、複数になったらうまくいかない???? メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。 色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず どなたかjQueryマスターの方ご教授いただけますと幸いです。 説明下手ですいません。 何卒よろしくお願いいたします。 ※以下のスクリプトにこだわりはございません。 こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。 javascript ================ <script type="text/javascript"> $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected") $(this).addClass("selected") $("ul.panel li").slideUp("fast") $($(this).attr("href")).slideDown("fast") return false }); }) </script> ///////HTML////// <body> <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1"></li> <li id="tabs-2"></li> <li id="tabs-3"></li> </ul> </body>
- ベストアンサー
- 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
- タブ切り替えが出来る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でセレクトメニュー+スクロール
下記のデモサイトのように http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html jScrollPaneとjQuery UI tabsを連動させる方法は分かったのですが、 タブの部分をselectメニューにカスタマイズすることは可能でしょうか？ .change()を使うとは思うのですが、具体的な記述の仕方が分からず 困っております。 ご教授いただけると助かります。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！！ ばーっちりできました 感謝感激ですｗｗ