2.1　動的に偏移させる

2.1　動的に偏移させる

　前ページの内容を動的に偏移させていきたいのです。

　1～512（512 は大きすぎかも・・・）の範囲で値を入力するとそれに対応する数分のタイルが表示されてその色が徐々に変化していくという・・・。
　色の理論無知なわたしができる範囲で何とかと・・・。

　1～7の範囲なら前ページの応用でなんとかなるのかしら・・・。
　とまぁここまで書いて、HTML のままで GET や POST を書くのはいささか無理があるので、本ページを smarty で書くこととしました。

　JavaScriput の関数と <form> の部分を下記のように記述して


function page()
{
	document.form.submit();
}



<form  name="form" action="./02.php" method="POST">
　<input type="text" id="first" name="request" value="" />
<script type="text/javascript">
document.getElementById('first').focus();
</script>
<input type="submit" class="page" value="展　開" />
</form>

　


　上記を動かすためのソースが下記になります。

<?php
	require_once("../sample/MySmarty.php");

	$smarty = new MySmarty();													//	Smartyのインスタンスを作成
	$smarty->caching = false;													//	キャッシュしない

	$value = array();

	foreach($_GET as $get => $get_value)
	{
		$value["$get"] = $get_value;
	}

	foreach($_POST as $post => $post_value)
	{
		$value["$post"] = $post_value;
	}

	$request = 1;

	if (isset($value['request']))
	{
		$request = $value['request'];
	}

	$color = '';
	$mycolor = array
			(
			'#FF0000',															//	赤
			'#FFFF00',															//	黄
			'#00FF00',															//	緑
			'#00FFFF',															//	シアン
			'#0000FF',															//	青
			'#FF00FF',															//	マゼンタ
			'#FF0000',															//	赤
			);

	if ($request > count($mycolor))
	{
		$request = count($mycolor);
	}

	for ($i=0; $i<$request; $i++)
	{
		$color .= '　<input style="background-color: '.$mycolor[$i].'; width="100%;" />'."\n";
	}

	$smarty->assign('color', $color);

	$smarty->display('06/02.tpl');												// テンプレートを指定し表示
?>



　まぁ、全然、不完全なのですがね。
　２つだったら、青と赤にしたいし、7色以上になったときのことを全然考慮していない・・・。