5509

iOS5スタイルのチェックボックス ui.checkSwitch

チェックボックスをiOS5スタイルのスイッチに置き換えるjQuery非依存のJavaScriptライブラリです。タップ(クリック)に加えてスイッチ上でのスワイプ(ドラッグ)でチェックのオンオフが切り替えられます。

CSSで見た目を書いているので古いIEではデフォルトスタイルはほぼ表示できません。古いIEでも使いたいときは自分で書いてください。モバイルサイト限定で利用が推奨です。Androidはborder-radiusが残念なことになるという仕様なので、border-radiusは残念なことになっていますが、そこは目をつむっていただき・・・あと、端末によってはtouchmoveがうまいこと発火しないので、スワイプも微妙な感じかもしれません。

ドキュメント・サンプルは以下のリンク先を参考にしてください。

えっと、誰かiOS4スタイルとか新しい感じのデザインお願いします。。。

要望とかバグ報告などはgithubのIssuesへお願いします。

チェックボックスとラジオボタンのコントローラとスタイリング jq.ui.checks

jq.carouselに引き続きよくあるシリーズです。(つまり車輪の再開発

ベースはチェックボックス・ラジオボタンをまとめて操作するようなUIのためのコントローラーで、それのついでにビューになるHTMLとinput要素を(見た目上)置きかえる機能がついてます。それだけです。

ドキュメント・サンプルは以下のリンク先を参考にしてください。(引き続き変な英語ですけども。

要望とかバグ報告などはgithubのIssuesへお願いします。

使いやすいマルチプルセレクトへの道のり(セレクトボックスとチェックボックスについて)

jQselectableの拡張で、しっくりきて使いやすい、控えめなマルチプルセレクト(複数選択可能なセレクトボックス)を模索中、、つまり考察だけだす

おさらい

※ 仕様ではなくて、認識です

セレクトボックス
一覧の中からひとつを選択させるもの(そもそも)
チェックボックス
基本的には一覧である必要はなくて、複数ある項目の中から指定する項目を選択させるというもの

セレクトボックスのmultiple属性

どちらもそもそもの使い方が全然違うけど、セレクトボックスにはmultiple属性があって、trueにすると(multiple属性を追加するだけやけど)、PCではShiftかCtrl(Cmd)を押しながらクリックすると複数項目が選択できる

ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

この「ShiftかCtrl(Cmd)を押しながら」というのはかなり嫌な実装で、普通に見てそれが複数選択可能かなんて分からへんし、「Shift or Ctrl(Cmd)+クリック」をエンドユーザーが認識してる割合は超低い(自分周り調べ)

そもそもエクスプローラーとかFinderの仕様に沿ってるのかもしれないですけど、それできるのって普通知らないですよね

フォームでは複数項目選択可の場合って、だいたい「複数選択可」みたいなテキストをラベル付近に入れると思うけど、ていうか入れてほしいけど、この補助テキストがあったとしてもきっとよくわからん。マルチプルセレクトの場合。

forked: ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

(どうやんの?)

ほんだら、補助テキストを詳しく書いたりするんでしょーか

forked: ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

うーん、こんなごちゃごちゃうるさいフォームは美しくない(デザインではなくて手法が)

ここまでで分かることはセレクトボックスは複数選択に全くもって向いていないということ

ただし、iPhoneとAndroidでマルチプルセレクトを見ると、結構みやすいし使いやすい

ただし一覧性は低いのでたくさんある場合は一度一番下までスクロールして確認してから、選択という流れになりそう

チェックボックス

一方チェックボックスは複数選択に適していて、たくさん項目があってもチェックを付けていく間隔から「あ、これは複数選択できるんだな」ということが分かるし、使い方もクリックしてチェックするだけ

ただのチェックボックス – jsdo.it – share JavaScript, HTML5 and CSS

つまりー

どうしたいかというと、jQselectableのいいところは「一覧性が高く、目標に到達しやすい」ということで、これをマルチプルセレクトに対応させる場合、「一覧性が高く、目標に到達しやすい上に複数選択が可能であることが見てすぐ分かる」ということ

でまぁ、そもそも使いにくいセレクトボックスの更に使いにくいマルチプルセレクトなもんで、どうしようかなーというところで、とりあえず思ったこと書きだしただけです

個人的にはセレクトボックスにチェックボックスをあわせたものが見やすいとは思ってて、iPhoneのやつもチェックが入ってるから複数選択できることが分かるんですね

ただまぁ、非常におださい感じになってしまうので(※個人の感想です)、チェックボックス組み合わせるのはナシやなぁとかなんとか。色々見てはいるものの、こんなの使いやすかったよとかそゆのあれば教えてほしいです

あと、jQselectableはWeb界隈の人たちにはご好評いただいているものの、どこまでのエンドユーザーに対してやさしいかっていうのは、把握できてないですし、もしかしたら使いにくいかもしれませんし。自分周り調べでは、結構普通に選択してはりましたけど

むー

スマートフォンで使えるフォーム入力内容を消す×ボタンを実装するJSライブラリ

×ボタンで入力内容を消すUI

タイトルが長い・・・入力テキストを消去するUIは検索ボックス(type=search)にだけ有効で、他の(type=textなど)では使えないんですね。でもこの×ボタンの使いやすさは間違いないので。。

1ヶ月くらい前に作ったのにサンプルを作るのを面倒くさがって公開してなかったものを、サンプルキレイにして公開しておきます。

Delete Valueのサンプル
サンプルはiOSとAndroid(※1)でしか動作しません。。

問題点もあるのですが、それは後述。

Read more

Author

nori
nori
- UI Engineer
Location
- ,