POPSブログ

jQuery 伸縮するパネル/2

141

  Category:  jquery2012/09/02 pops 

角丸陰影画像を外周に配置した「伸縮するパネル」についての記事です。IE6非対応、新方式の構造ですが動作が軽いのが特徴です。従来拠りのバグなど半減して設定などが楽になります。


jQuery 伸縮するパネル2

CSS3でパネル外周を加工したほうが簡単で早いのは承知のことですが、角丸陰影画像を使用した場合のほうが軽く、勿論、CSS3に対応していないブラウザでも表示できるわけです。
特に「性能の悪いマシン環境」では「CSS3」を使用されるとページが重く、とても閲覧できる状況にはありません。


新方式の構造で伸縮するパネル

以前は余りにも特殊な構造なので、多くの問題点がありました。これは以前より使用し易くなっています。

  • IE6に対応していませんので違う構造で作成しました。(私は3年待った)
  • 簡単に画像とともにスムーツ伸縮します。フエードも簡単にできます。
  • 理解しやすい構造で、position で陰影画像の「始点」「終点」を指定しましたので陰影の重なりが出ません。
  • IE7.8.9 に対応しなければ「AlphaImageLoaderフィルター」は要りません。
  • IE7.8対応の場合は多少問題は出ますが、従来より少ないでショウ。(IE様は相変わらずバグリ専門です)
  • IE7は DOCTYPE によりばらつきなどが出易い。その外はOKです。
  • 動作環境 IE7.8、Chrome、Firefox、Safari、Opera、但し IE9 は動作未確認(動くでショウの予測で作っている)

新しいとは言っても「3年以上も前に」出来ていたものですが、IE6に対応出来ないものなので公開はしていませんでした。IE6.7.8排除の傾向が強い「今日」ですので記事にしてみます。
特集記事の「iBox」もそのうちこの形式に書き換える予定です。


jQuery 新、伸縮パネルのデモ


ご注意、IE6には対応していません。


パネルをクリックください。伸縮にはランダムな時間があたえられています。テストのためFADEOUT,FADEINも仕組んでいます。

簡易パネル表示 / (pops-panel-c.js) DEMO2



環境の悪いマシンでも軽快に伸縮します、ブラウザにより、フエードの感じが違います。
周囲が等間隔よりも、横の間隔が狭いほうがキレイだ思います。


説明図

構造が拠り簡単になりました。



簡単な説明


新構造HTML

このテストの構造です。#panel-topboxは、実際にはLOADING画像、ボタンなど配置される場所になります。
写真画像の配置条件によっては #panel-back階層は無くとも差し支えありません。またこの場所に「画像配置の構造」#centerback を置くことも可能です。
「画像」「ボタン」の配置構造などは使用者が自由に作っても、CSSを別に書いても良い。


<div id="pops_panel">
	<div class="tl filters"></div>
	<div class="tr filters"></div>
	<div class="bl filters"></div>
	<div class="br filters"></div>
	<div id="panel-back"></div>
	<div class="tm filters"></div>
	<div class="bm filters"></div>
	<div class="ml filters"></div>
	<div class="mr filters"></div>
	<div id="centerback" class="filters">
		<div id="imgwrap"><img src="画像URL" /></div>
	</div>
	<div id="panel-topbox">
		<div id="textbox"><br /><br /><p>CLICK</p></div>
	</div>
</div>

1. FADEに対応しないならば、「AlphaImageLoaderフィルター」は要りません。
2. IE7の場合に画像縦方向が伸縮しないなどのばらつきがあるので、アニメで動かしている。その外は自動的に伸縮する。(高さの取得が旨く出来ないようだ。少し構造をかえればCSSだけで旨く行くかも知れない)
IE7のみ「ハック」を使用すれば、JSでの高さ修正はいりません。追記で説明します。
3. 陰影を必要としないならば、四隅にGIF画像を挿入ください。#panel-backのPNG画像も必要としません。
4. テスト例では画像部分を左右に広げています。IE7で「画像」と左右の「透過陰影画像」との重なり部分がバグのため透過してしまいます。それで #centerback にPNG画像を入れて「AlphaImageLoaderフィルター」処理しています。理解しがたいことです。(IEでは非常識なことが功を奏する、何でもためす)
5. 改造などは自由に行えます。次回から具体的な「簡易LightBoxプラグイン」の制作過程を説明します。


LightBoxは便利ですが、最近は閲覧ページ数を増やすために、使用されない傾向にあります。しかし何らかの利用方法はあると思います、、、。


新構造CSS

1. IE陰影の重なりバグは長さを確定すれば出ません。position で陰影画像の「始点」「終点」を指定しましたので陰影の重なりが出ない訳です。(IE6はこれが出来ない)
2. baesercms用の画像パスになっています、実際の環境に合わせてください。
3. 「AlphaImageLoaderフィルター」のあとの背景削除はJSで行っています。フィルター非対応の場合はフィルター処理は行われません。
4. IE6に対応しないだけで、すっきりした構造になっています。でも油断禁物です。(IEはいらない、何が起こるか予測がつかない)


/*pops-panel-c.css 日本語*/

#pops_panel {
	z-index: 7000;
	position:absolute;
	top:0;left:0;
	display:block;
	/*border: 1px #000000 solid;
	overflow:hidden;*/
	background:none;
}

/* 陰影画像 */
#pops_panel .tl {
	display:block;
	position:absolute;
	top:0;left:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_tl.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tl.png',sizingMethod='scale');
}
#pops_panel .tr {
	display:block;
	position:absolute;
	top:0;right:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_tr.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tr.png',sizingMethod='scale');
}
#pops_panel .bl {
	display:block;
	position:absolute;
	bottom:0;left:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_bl.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_bl.png',sizingMethod='scale');
}
#pops_panel .br {
	display:block;
	position:absolute;
	bottom:0;right:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_br.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_br.png',sizingMethod='scale');
}
#pops_panel .tm {
	display:block;
	position:absolute;
	top:0;left:20px;right:20px;
	width: auto;
	height: 20px;
	background: transparent url("/main/images/r_tm.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tm.png',sizingMethod='scale');
}
#pops_panel .bm {
	display:block;
	position:absolute;
	bottom:0;left:20px;right:20px;
	width: auto;
	height: 20px;
	background: transparent url("/main/images/r_bm.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_bm.png',sizingMethod='scale');
}
#pops_panel .ml {
	display:block;
	position:absolute;
	left:0;top:20px;bottom:20px;
	width:20px;
	height:auto;
	background: transparent url("/main/images/r_ml.png") repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_ml.png',sizingMethod='scale');
}
#pops_panel .mr {
	display:block;
	position:absolute;
	right:0px;top:20px;bottom:20px;
	width:20px;
	height:auto;
	background: transparent url("/main/images/r_mr.png") repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_mr.png',sizingMethod='scale');
}

/* パネル中央部分 */
#pops_panel #panel-back {
	position:absolute;
	top:20px;bottom:20px;
	left:20px;right:20px;
	width: auto;
	height: auto;
	background-color:#FFFFFF;
}

/* 画像パネル */
#pops_panel #centerback {
	position:absolute;
	top:20px;bottom:20px;
	left:10px;right:10px;
	width: auto;
	height: auto;
	/*margin-bottom:20px;*/
	background: transparent url("/main/images/panel_white.png") repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/panel_white.png',sizingMethod='scale');
}
/* IE7 heightが伸びない*/
#pops_panel #centerback #imgwrap {
	width: auto;
	height: 100%;
	background-color:#000000;
}
#imgwrap img {
	width: 100%;
	height: 100%;
	vertical-align:bottom;
	border-style:none;
}

/* パネル上層部分 */
#pops_panel #panel-topbox {
	display:block;
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	background-color:none;
	overflow:hidden;
}
/* テキスト */
#pops_panel #textbox {
	display: block;
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	text-align:center;
}
#pops_panel #textbox p {
	font-size:12px;
	color:#FF0000;
}

背景画像での標準的な「AlphaImageLoaderフィルター」処理記述例

background と filter でのURLの記述が違う。判らない場合は「絶対パス」を記述する。その後背景画像を削除する。


.xxxxxx {
	background: transparent url("../images/xxx.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/xxx.png',sizingMethod='scale');
	background-image:none;
}

背景画像の上に「処理された画像」が作られるつまり2重になる。削除しないと濃くなるし、フエードさせた時「本来の背景画像」が真っ黒になるので注意。
これでは、IEでは何のための「透過画像PNG32」対応かわからない。大変面倒なことだ。


IE7高さが伸びないCSSの修正、2012/09/04/追記

やはり方法がありました。原因は #centerback の高さが auto であるから、最初から明白でしたが必ず auto で無ければなりません。
IE7のみ「ハック」で「ボトム設定」にすると、画像が下方から上方に伸びるので解決します。「IE7ハック」にしないとIE8で壊れるので注意。ライト設定でなければならないと言うことか?。
ここでの、ライト設定はさけたほうが良い。ボタン配置などが狂うことがある。「ボトム設定」だけにした。


/* IE7 heightが伸びないのを訂正 */
#pops_panel #centerback #imgwrap {
	*position:absolute;
	*bottom:0;
	width: auto;
	height: 100%;
	background-color:#000000;
}

画像が左にずれる場合は、IE7のみ「レフト」も設定ください。(他のCSSにも影響をうけているのでこの辺は臨機応変に)


#pops_panel #centerback #imgwrap {
	*position:absolute;
	*left:0;
	*bottom:0;
	width: auto;
	height: 100%;
	background-color:#000000;
}

IE7のみ「ハック」を使用すれば、JSでの高さ修正はいりません。以上、追記。


JSでの操作

表示させたい位置を計算して、表示させたい大きさに、構造全体の高さ、幅をアニメ処理しているだけです。
IEのバージョン違いの処理が必要になります。次ぎの判定方法が便利です。jquery1.8以降でも使用できます。


IEの判定

IEの判定だけの場合


var browserIE = 0;//IE判定
var browser_v = 0;//IEバージョン番号

if (/*@cc_on!@*/false) {
	browserIE = 1;
	if (navigator.userAgent.match(/MSIE (¥d¥.¥d+)/)) {browser_v = parseFloat(RegExp.$1);}//IE6.7.8
}

IE以外の判定もしたい場合


var userAgent = window.navigator.userAgent.toLowerCase();
var browserIE = 0;//IE判定
var browser_v = 0;//IEバージョン番号
var browser_nm = "";//browser名

if (/*@cc_on!@*/false) {

	browserIE = 1;
	browser_nm = "IE";

	if (navigator.userAgent.match(/MSIE (¥d¥.¥d+)/)) {browser_v = parseFloat(RegExp.$1);}//IE6.7.8

	}
	else if (userAgent.indexOf("firefox") > -1) {browser_nm = "Firefox";}
	else if (userAgent.indexOf("opera") > -1) {browser_nm = "Opera";}
	else if (userAgent.indexOf("chrome") > -1) {browser_nm = "Chrome";}
	else if (userAgent.indexOf("safari") > -1) {browser_nm = "Safari";}
	else {
	browser_nm = "Unknown";
}

使用パーツ画像


陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 画像パネル背景 img初期画像

「画像パネル背景」は写真画像横幅を広げているためおきるIE7のバグ対策用のPNG32画像です。
「img初期画像」は表示すべき写真画像がロードされるまでの間、「imgタグ」の中に収容する画像です。テストでは未使用。(画像無しのマークが表示されるのを防ぐ、画像高さを与える役目をします)


自然の定理、動くものは直ぐ飽きる。ネコは飽きない。


「IEで貴方は地獄をみる」早くIEのない平和な世の中が来ることをお祈りしましょう。


以上、「次回につづく」です。



[ この記事のURL ]


タグ:series , memo , photo , jquery

[ jQuery 伸縮するパネル シリーズ記事 ]

jQuery 伸縮するパネル/72012.10.10
jQuery 伸縮するパネル/62012.09.07
jQuery 伸縮するパネル/52012.09.07
jQuery 伸縮するパネル/42012.09.06
jQuery 伸縮するパネル/32012.09.06
jQuery 伸縮するパネル/22012.09.02
jQuery 伸縮するパネル/12012.09.02

 

ブログ記事一覧

年別アーカイブ一覧



[1]