POPSブログ

jQuery 伸縮するパネル/1

140

  Category:  jquery2012/09/02 pops 

角丸陰影画像を外周に配置した、伸縮するパネルについてです。動作が軽いのが特徴です。


jQuery 伸縮するパネル1

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


POPS-PANEL

以前は余りにも特殊な構造なので、勝手に「POPS-PANEL」などの名前をつけて「Lightbox」に応用しました。但し多くの問題点がありました。

  • IE6に対応するために、構造などが複雑になり過ぎた。
  • IEに対応するため問題が多く理解しがたいものであった。
  • 作った自分でさえ判らなくなるほど難解であった。
  • 「Lightbox」は目新しいものではなくなった。飽きた。

そのため今回、IE6非対応にして、構造などをかえて新しいものに作りかえて見ました。
新しいとは言っても「POPS-PANEL」と同時期の3年以上も前に出来ていたものですが、IE6に対応出来ないものなので公開はしていませんでした。IE6.7.8排除の傾向が強い今日ですので記事にしてみます。


jQuery POPSパネルのデモ (旧式、廃止予定)


パネルをクリックください。伸縮にはランダムな時間があたえられています。

簡易パネル表示 / (pops-panel-b.js) DEMO1



軽く伸縮動作することだけを確認ください、本題である「次ぎのページ」に進みます。


【次ぎのページに進む】当方の記事: jQuery 伸縮するパネル2


参考構造


<>
<div id="pops_panel">
<div id="allmask">
<div id="whiteback_mask"><div id="whiteback"></div></div>
<div id="tm_mask"><div class="tm filters"></div></div>
<div id="ml_mask"><div class="ml filters"></div></div>
<div id="bm_mask"><div class="bm filters"></div></div>
<div id="mr_mask"><div class="mr filters"></div></div>
<div class="tl filters"></div>
<div class="tr filters"></div>
<div class="bl filters"></div>
<div class="br filters"></div>
<div id="textbox"><br /><br /><p>CLICK</p></div>
</div>
</div>


以上、です。



[ この記事のURL ]


タグ:jquery , photo , memo , series

[ 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]