JavaScript++かも日記: 【jQuery】jQuery UI/Tab (CSSの衝突とFirebugの大活躍)

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年10月28日

【jQuery】jQuery UI/Tab (CSSの衝突とFirebugの大活躍)

【jQuery , ライブラリ】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

試しにjQuery UI/Tabもちょっとテスト。
あれ?、CSSが干渉してるなぁ。

はじめ、

こうなるはずが、

こうなっていたので、

なにしろカオスなページだから、きっとCSSのどれか(^^;;)が衝突したのだろう、とは思ったのですが、どれとどれが衝突したのか、なかなかわからない。

そこで、Firebugの登場です。じゃーん。

一瞬で発見！　

やっぱり。

ということで、その後、正式に患部を除去して治りました。経過は順調です。

CSSも、強引にどこでも継承しまくらずに、ブロックで隠ぺいする仕組みが欲しいです。

P.S.YUIのresetCSSなども、問題意識は多少似たような場所にありますが、今回の患部background-scrollはリセットしていなかったので、今回は役に立ちませんでした。それに、たとえば#hoge以下など限定でかけないといけないし、コード量も結構ふえそう？もし、すべてのセレクタをリセットする汎用版を作ると、負荷コストはどれぐらいかかるのかなぁ。今回は!importantでは、うまくいかなかったんですが、ミスが無かったか検証が必要かなぁ、、、もし指定漏れがあると、耳なし法市のように、すり抜け継承されるので役に立たないんですよね(^^。

などなど、考えると、干渉しないように書くのが一番！という結論に(^^;＜∴Firebugが役に立ちます。

でも、もしワンセンテンスで、ひとつのブロックをブロック外のCSSと隔離できると便利なんだけどなぁ。

Basics(基本):

#id String

与えられたID名にマッチするエレメント

$("#myId").show();

element String

与えられた要素名(タグ名)にマッチするエレメント(s)

$("div").css("font-size","12px");

.class String

与えられたクラス名にマッチするエレメント(s)

$(".myClass").html("myClassです");

element String

すべてのエレメント(s)

$("*").css("border","3px dotted #888");

selector1, selector2, ...selectorN String

指定したすべてのエレメント(s)。「,」で区切っていくつでもセレクタを増やせます。

$("#id1 , #id2 , li").css("font-size","1.2em");

Hierarchy(階層):

ancestor descendant String

左辺の「先祖 ancestor」要素内にある右辺の「子孫 descendant」要素に該当するすべてのエレメント(s)

$("form input").attr("disabled","");

parent > child String

左辺の「親 parent」要素内にある右辺の「子 child」要素に該当するすべてのエレメント(s)

$("#myId div").css("color","red");

prev + next String

左辺の「前 prev」要素の「次 next」の要素に該当するエレメント

$(".myClass + p").css("font-size","10px");

prev ~ siblingsString

左辺の「前 prev」要素以降にある右辺の「兄弟 siblings」要素に該当するすべてのエレメント(s)

$("form ~ input").css("color","#ddd");

Basic Filters(基本フィルタ):

:first String

最初のエレメント(s)

$("td:first").css("color","#ddd");

:last String

最後のエレメント(s)

$("tr:last").css("color","#ddd");

:not(selector) String

与えられたセレクタを無視します

$("input:not(:checked)").css("color","#ddd");

:even String

0からはじめてindexが偶数の要素(s)

$("tr:even").css("color","#ddd");

:odd String

0からはじめてindexが奇数の要素(s)

$("tr:odd").css("color","#ddd");

:eq(index) String

与えたインデックス番号に合致する要素

$("td:eq(5)").css("color","#ddd");

:gt(index) String

与えたインデックス番号を超えるインデックスの要素

$("td:gt(5)").css("color","#ddd");

:lt(index) String

与えたインデックス番号未満のインデックスの要素

$("td:lt(1)").css("color","#ddd");

:header String

すべての<H>見出し要素

$(":header").css("color","#ddd");

:animated String

現在アニメーション動作中の要素(s)

$("div:animated").css("color","#ddd");

coincoin ( 2007年10月31日 20:20 )

はじめまして。
jQuery UI/Tabにタブをクリックするのと同時に
NEXTとPREVボタンなどでタブ移動することは
できるのでしょうか？
ページが長くなるとタブをクリックするのが不便なような気がします。

高橋 ( 2007年10月31日 22:10 )

こんばんは。もしかして、こんな感じ？http://jsgt.org/mt/archives/01/001782.html

【コメント】

2008年08月29日
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

2008年08月29日

日

月

火

水

木

金

土