iuiのトグルスイッチをフォーム（form）で使う方法サンプル付き

iuiのトグルスイッチをフォーム（form）で使う方法　サンプル付き

iPhone 3G用のWebページを作る時に便利なものとしてiPhone用のページが簡単に作れる『iUI』というWeb製作支援ライブラリがある。
iUIを導入することにより、標準的なHTMLを記述するだけで、iPhone用のページを簡単に作ることができものでありコードは次のページで入手できる。

iui　User Interface (UI) Library for Safari development on iPhone
http://code.google.com/p/iui/

上記URLからライブラリをダウンロードしたら、ui.cssとiui.jsの階層に合わせてHTML変更しアップロードする。
特別な間違いをしない限り、music.htmlとprefs.htmlにてiPhone 3G用にデザインされたページを確認できるはず。

さて、このiui（ui.cssとiui.js）を使う上で魅力的なのはiPhoneの中で随所に使われているUIであるトグルスイッチが再現できていることなのだが、ダウンロードしたサンプルはあくまでUIの画面表示を再現できるだけで、そのままでは実際のフォームボタンとしては使えない。
単にフォームの中にそのままのタグを埋め込んで、トグルスイッチを切り替えてみても、送信されたフォーム（form）の中には何も値は送られない。

ダウンロードしたprefs.html内のトグルスイッチの部分のタグ

HTML

<div class="row">
<label>Repeat</label>
<div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>

上のタグを見ればわかるようにnameの指定もvalueの指定も無いからvalueが送信されないのは当然。

そこで、実際のフォームで使うための解決方法として、タグ内にあるonclickを使い、トグルスイッチの状態をjavascriptで取得し、その値をjavascriptを使ってhiddenで設定した項目の値に渡すことで、トグルスイッチの値をフォーム（form）で送る方法を使う。

説明

まずはonclick=””の部分を onclick=”setToggle1(this.getAttribute(‘toggled’))”とすることにより、トグルスイッチを切り替えた時の状態をjavascriptのsetToggle1に渡す。実際の値はtrueおよびfalseになる。

次に、取得した値trueおよびfalseをhiddenで設定した項目の値に代入する

document.upForm.copyright.value = value;を上のonclickから呼び出す。

setToggle1(value){document.upForm.copyright.value = value;}

送られてきたトグルの状態を示す値（value：trueおよびfalse）を受けるフォームを記述する。

<input type="hidden" name="copyright">

以上で送信されたものname=copyrightのvalueとしてtrueまたはfalseが送信される。

確認の時はPOSTの指定をGETにしてやるとアドレスバーで確認できて便利。

■サンプル（フォーム内の記述サンプル）

<li class="row"><b>Copyright</b><div class="toggle" onclick="setToggle1(this.getAttribute('toggled'))"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div><input type="hidden" name="copyright"></li>

■サンプル（ヘッダ部分のjavascriptの記述サンプル）

<script type="text/javascript">
function setToggle1(value){document.upForm.copyright.value = value;}
</script>

■サンプルサイト（iPhone用壁紙登録・配布サイト）

DG Wallpaper for iPhone
http://iphone.digital-gate.com/wallpaper/index.php?mode=add

※PCからのアクセスはPC用のページが表示されるので、確認はiPhoneから。

HTML

説明

Related posts: