スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。 よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します。

mobileSelectの使い方

デモです。選択肢が一つの場合。

複数の選択肢がある場合。

こんな複雑なものも。ダイヤル式ロックのようです。

さらに複数の選択肢を連携させることもできます。

最初の選択肢によって次の選択肢が出る場合と出ない場合を作れます。

mobileSelectはスマートフォンに特化したUI/UXになっています。特に複数選択肢を一度のドロップダウンで行えるのは便利です。PC向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリッドアプリでは採用してもよさそうです。

mobileSelectはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

mobileSelect Demo onlyhom/mobileSelect.js: 手机移动端选择组件 支持是否级联/单选到多选/可异步更新数据等..