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から。

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク