fancyBoxを使えば、ポップアップするコメント入力ダイアログなどを作ることができます。
 |
| 下記サンプルを実行すると表示される入力ボックス |
ユーザからの入力を受け取るには、POSTメッセージを使用します。
POSTメッセージの受信にはPHPが必要なので、サンプルはphpコードです。
phpを動作させるには、Webサーバ上に配置して、ブラウザからアクセスする必要があります。
当然ながら、本サンプルもWebサーバ上で使用する必要があります。
Ubuntu環境でapache2およびphpを導入するには以下のコマンドを実行します。
$ sudo apt-get install libapache2-mod-php5 -y
サンプル
サンプルを配置するディレクトリはWebサーバの公開ディレクトリ内であればどこでも構いません。
ただし、fancyBoxのディレクトリと相対パスが合っている必要があります。
(またはサンプル側のパスを修正する)
もし、下記のディレクトリ構成で配置するならば、
http://localhost/fancyBox/demo/formpost.php
にてブラウザからサンプルにアクセスすることができるはずです。
ディレクトリ構成
/var/www/fancyBox/
demo/
formpost.php
本サンプルは、fancyBoxに付属しているデモページが指定している相対パスをそのまま使っています。
コード
<!DOCTYPE html>
<html>
<head>
<title>fancyBox inline form POST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- fancyboxクラスにデフォルトの効果を適用 -->
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<?php
/*POSTされたコメントを表示する関数*/
capture_comment();
?>
<h1>fancyBox inline form POST</h1>
<p>
fancyBoxで表示したインラインフォームからPOST送信するサンプル
</p>
<a class="fancybox" href="#inline1">Inline form へのリンク</a>
<div id="inline1" style="width:400px;display: none;">
<h3>form POST用 インラインフォーム</h3>
<p>
インラインフォーム サンプル コメント投稿欄
</p>
<form action="<?php echo basename($_SERVER['PHP_SELF']) ?>?comment=true"
method="post" enctype="multipart/form-data">
COMMENT:<br/>
<input type="text" name="comment" size="30" /><br/>
<input type="submit" value="コメントをPOST" />
</form>
</div>
<p>
fancybox official site: <a href="http://fancybox.net/">fancybox.net</a></p>
</p>
<?php
/*POSTされたコメントを表示する関数*/
function capture_comment(){
if (!isset($_POST["comment"])){
return false;
}
$eComment = nl2br(htmlspecialchars($_POST["comment"], ENT_QUOTES));
print ("$eComment");
}
?>
</body>
</html>
<html>
<head>
<title>fancyBox inline form POST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- fancyboxクラスにデフォルトの効果を適用 -->
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<?php
/*POSTされたコメントを表示する関数*/
capture_comment();
?>
<h1>fancyBox inline form POST</h1>
<p>
fancyBoxで表示したインラインフォームからPOST送信するサンプル
</p>
<a class="fancybox" href="#inline1">Inline form へのリンク</a>
<div id="inline1" style="width:400px;display: none;">
<h3>form POST用 インラインフォーム</h3>
<p>
インラインフォーム サンプル コメント投稿欄
</p>
<form action="<?php echo basename($_SERVER['PHP_SELF']) ?>?comment=true"
method="post" enctype="multipart/form-data">
COMMENT:<br/>
<input type="text" name="comment" size="30" /><br/>
<input type="submit" value="コメントをPOST" />
</form>
</div>
<p>
fancybox official site: <a href="http://fancybox.net/">fancybox.net</a></p>
</p>
<?php
/*POSTされたコメントを表示する関数*/
function capture_comment(){
if (!isset($_POST["comment"])){
return false;
}
$eComment = nl2br(htmlspecialchars($_POST["comment"], ENT_QUOTES));
print ("$eComment");
}
?>
</body>
</html>
Coloring by SSSH
0 件のコメント:
コメントを投稿