LightWindow【その1】
2009.03.31 Author: えす
今回はLightWindowを紹介します。
LightWindowは画像、動画、div要素、外部ページなどをオーバーレイで表示してくれるライブラリです。
ダウンロードはこちらからどうぞ。
一般的なaタグにクラス指定し、使用する方法については、他の多くのサイトで紹介されていますので、割愛し
今回は、JavaScriptでLightWindowを表示する方法を紹介します。
JavaScriptで表示するには、「 myLightWindow.activateWindow 」を使用します。
<script type="text/javascript">
function openLightWindow() {
myLightWindow.activateWindow({
href : 'http://shain.blog.conextivo.com/2009/03/ext_js_3.html',
title : '【Ext JS】 レコードのフィルタリング',
width : 600,
height : 400
});
}
</script>
<a href="javascript:openLightWindow()">【Ext JS】 レコードのフィルタリング</a>
activeWindowのオプションとして、下記を指定できます。
| href | リンク先URL |
|---|---|
| title | Windowのタイトル(左上に表示されます) ※省略すると、タイトルに「 null 」が表示されます。 タイトルを表示したくない場合は、空文字指定してください。 |
| author | 作者(下に表示されますが、表示位置はCSSの調整が必要) |
| caption | 説明文(下に表示されます) |
| rel | rel属性 |
| top | 縦座標 |
| left | 横座標 |
| type | LightWindowに表示する種類(image, page, inline, media, externalから指定) |
| showImages | 表示する画像数 |
| height | 高さ |
| width | 幅 |
| loadingAnimation | loadingのアニメーションをスキップするか(true, false) |
| iframeEmbed | iframeを使用するか(true, false) |
| form | フォームの名前 |
<script type="text/javascript">
function openLightWindow() {
myLightWindow.activateWindow({
href : 'http://shain.blog.conextivo.com/image018.jpg',
title : 'ハバネロ',
caption : '葉っぱがありません',
type : 'image'
});
}
</script>
<a href="javascript:openLightWindow()">2回目の冬を越しました</a>
続いて、もう少し細かい使い方を紹介します。 続き >>
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
