プレビュー画面の実装をお手軽に!jQueryプラグイン「jquery.previewButton.js」

2011/12/13
いろいろな要素を柔軟にPostできるように修正しました。

jquery.previewButton.jsをダウンロード

デモページ

ソースとか、使い方とか

ウィンドウを生成し、フォームを複製、複製したフォームから生成したウィンドウにPostする仕組みです。

引数

url プレビュー用ページのurl
post Postするデータのキーとタイプのハッシュ。

タイプの種類
text…テキストフィールド
textarea…テキストエリア
radio…ラジオボタン
select…セレクトボックス
checkbox…チェックボックス

※checkboxの場合は、キー名の後に自動的に[]が付加されるので注意!

入力フォームページ

...省略...

<!-- jQueryと、jquery.previewButton.jsを読み込みます。 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.previewButton.js"></script>
<!-- input#previewButtonを押したときに/path/to/preview.phpにデータをPost。 -->
<script type="text/javascript">
(function($){
	$('input#previewButton').previewButton({
		'url'  : '/path/to/preview.php',
		'post' : {
			'title'   : 'text',
			'content' : 'textarea'
		}
	});
})(jQuery);
</script>

...省略...

<form method="post" action="./">
	<input type="text" name="title" size="60" />
	<textarea name="content" cols="50" rows="5"></textarea>
	<input type="button" name="previewButton" id="previewButton" value="プレビュー" />
</form>

...省略...

プレビューページ

プレビュー用のページではPostデータを表示するコードを記述してください。例えば以下のような感じで…。

<?php if ( !empty( $_POST['title'] ) ) : ?>
<h1><?php echo htmlspecialchars( $_POST['title'], ENT_QUOTES, 'utf-8' ); ?></h1>
<?php endif; ?>

<?php if ( !empty( $_POST['content'] ) ) : ?>
<?php echo $_POST['content']; ?>
<?php endif; ?>

jquery.previewButton.jsをダウンロード

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。