jQuery外部ライブラリ「Colorbox その2」

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

不定期掲載「jQuery外部ライブラリ紹介」
今回は前回紹介したjQuery外部ライブラリ「Colorbox」の続きを紹介します。

前回のサンプルはコチラで、画像ファイルをポップアップ表示しましたが、今回はインライン機能を使用したポップアップ表示を見てみましょう。
サンプルはコチラです。実行結果とソースコードを確認してみましょう。

	<head>
		<meta charset='utf-8'/>
		<title>Colorboxのサンプル</title>
		
		<!-- 「colorbox.css」「jquery.js」「jquery.colorbox.js」を組み込む -->
		<link rel="stylesheet" href="./colorbox.css" />
		<script src="./jquery.js"></script>
		<script src="./jquery.colorbox-min.js"></script>
		
		<script>
			$(function(){
				
				/*
				id1にcolorboxを適用する。
				inline:trueでインライン機能をONにする。
				*/
				$("#id1").colorbox({inline:true, width:"50%"});
			});
		</script>
		
	</head>
	<body>
		<p>
			<a id="id1" href="#inline" title="インラインで表示">表示する</a>
		</p>
		<!-- 下記の要素をポップアップ表示する。最初は非表示にしておく。 -->
		<div style="display:none">
			<div id="inline">
				表示したいHTMLをこちらに記述してください。
			</div>
		</div>
	</body>

これも色々なサイトで使用されています。
colorboxメソッドのプロパティに「inline:true」を指定する事により、このような機能を簡単に実現できます。
このお手軽さがColorboxの特徴なので、ぜひ参考にしてみてください。

（担当：奥田　英太郎）