Ad Network

あわせて読みたい

  • あわせて読みたい

« Cloud Computing考:Amazon ec2とGoogle App Engineの違いを私なりにまとめてみた | Main | Python Hack : 噛めば噛むほどおいしくなるクロージャの話 »

ブラウザー上で動く iPhone-style トグルスイッチ

 ここのところ「iPhoneアプリのUIの大半(ひょっとしたらアプリすべて)をHTML+JavaScript+CSSで作ることはできないか?」に挑戦している私。

 そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、トグルスイッチなどの「連続値・不連続値」を表示・入力用UIコントロールをウェブページ上で実現するためのJavaScriptライブラリ。

 見た目(Look&Feel)はCSSを使って自由に指定できるように作りつつ、シンプルでありながらいろいろな場面で使い回しがきくライブラリを作りたかったので、何度もリファクタリングを繰り返してしまったが、なんとか形になってきた。

 ということで、そのライブラリ(jTouchControl version 0.10)を使ったiPhone風トグルスイッチを公開。一応、Safari (4.0), mobile Safari, Firefox(3.5), Chrome(4.0), Opera(9.0), IE (8.0)での動作確認済み。ただし、微妙なグラディエーションやアニメーションは、webkit-base のブラウザーでしか見えない。

 iPhone向けのアプリの開発に作ったのだからmobile Safariでさえ動けば十分だったのだが、「せっかく公開するのだから、せめてIE8で動く様にしよう」と欲を出したのが苦労の始まり。半日つぶれてしまった。

 ソースコードは http://widgetpad.com/954/ からアクセス可能。アプリ側のJavaScriptは基本的に以下の2行。最初の行がそれぞれのトグルスイッチを初期化し、次でその二つを連携させている(下のスイッチを変更すると上のスイッチが変更される)。

  1.      $('.switch').jTControl("slider"padding:20steps:});
         $('#switch2').bind("valuechanged"function($('#switch1')[0].setValue(this.getValue()0.2true)});
  2.  JTControlに渡す最初のパラメターは、コントロールの種類。現時点では、"slider"と"progressBar"のみをサポートしている。二番目のパラメターはオプションで、スライド範囲をwidthよりせばめるための"padding", 非連続値の場合の段階を指定する "steps" (1でトグルスイッチになる、デフォールトは非連続)、ドラッグするものを指定する "thumb" (省略すると空のDIVが挿入される)などを指定することができる。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef0120a688f136970c

Listed below are links to weblogs that reference ブラウザー上で動く iPhone-style トグルスイッチ:

Comments

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.