トップ  >  jQueryUI 関連  >  ui-widget-content の background-colorと透明色
jQueryUI resizable ウエジット background color transparent
jQueryUI resizable ウエジットを初めて使ってみて

見本をみて、ウエジットコンテンツ用のクラスを
$(elem).addClass("ui-widget-content");
気軽に指定していた
ui-widget-content クラスのbackground-colorが適用される
このクラスはUIテーマにより背景色が異なる
-------------------------------------
今回の xoopsCode エリア
(code エリア)
テーマ pack2011_exは
スタイルシートで、xoopsCode>preの背景色を指定していない

uiテーマ trontasticの
黒い背景に黒い字で、真っ黒
どのテーマにも適用するためには?
テーマを変えればいいのだけど、どうせならなんとか判定してみよう
-------------------------------
問題になるのは、
div.xoopsCode>pre>code

1. div.xoopsCode>pre が 透明の場合
(code エリア)も、指定ない場合透明色

透明な場合は、div.xoopsCode 配色を子のpreにも適用するしてみる

XCcodeResizableLoad.jsの中で、試してみた
略
//outer design
//親 xoopsCodeへ uiクラス適用
$(elem).addClass("ui-widget-content ui-corner-all");
//子pre
var preob = $(elem).find("pre");
var preob_bcolor = $(preob).css("background-color");
//背景 白 文字 黒
if ( preob_bcolor == "rgba(0, 0, 0, 0)" || preob_bcolor == "transparent" ){
	$(preob).css("background-color","white");
	$(preob).css("color","black");
}
略

色をセットするなら白黒以外も、
uiテーマにより、表示色を変えてみよう
var preob_background_color = $(preob).css("background-color");

if ( preob_background_color == "rgba(0, 0, 0, 0)" || preob_background_color == "transparent" ){
	//outer design
	$(elem).addClass("ui-widget-content ui-corner-all");
	var after_background_color = $(elem).css("background-color");
	var after_color = $(elem).css("color");
	$(preob).css("background-color",after_background_color);
	$(preob).css("color",after_color);
}
-----------------------------------------
2. xoopsCodeの背景にイメージファイルが指定されている場合

テーマの legacy default は、xoopsCodeの背景に
bg_code.jpgが指定されている

上記の、コードでは
背景が透明色のまま文字は白で、真っ白

xoopsCodeに uiクラスを適用しても
背景色が透明色のまま変更されていない

原因は不明だが、背景にイメージを指定しているためかな?
まあ原因はともかく、
uiクラスを適用しても背景色が変更されないことが問題なので

var before_background_color = $(elem).css("background-color");
var before_color = $(elem).css("color");
var preob_background_color = $(preob).css("background-color");
var preob_color = $(preob).css("color");

if ( preob_background_color == "rgba(0, 0, 0, 0)" || preob_background_color == "transparent" ){
	//outer design
	$(elem).addClass("ui-widget-content ui-corner-all");
	var after_background_color = $(elem).css("background-color");
	var after_color = $(elem).css("color");

	if (before_background_color == after_background_color){
		$(elem).css("background-color",before_background_color);
		$(elem).css("color",before_color);
		$(preob).css("background-color",preob_background_color);
		$(preob).css("color",preob_color);
	}else{
		$(preob).css("background-color",after_background_color);
		$(preob).css("color",after_color);
	}

}else{
	//outer design
	$(elem).addClass("ui-widget-content ui-corner-all");
	$(preob).css("background-color",preob_background_color);
	$(preob).css("color",preob_color);
}
カテゴリートップ
jQueryUI 関連
次
showLabel と text [Button Widget] のjQueryUI バージョン違い