jquery - モバイル デバイス用の HTML5 フォーム要素とスタイル

Question

モバイル Web サイトに jQuery モバイルを使用していませんが、使用されているフォーム要素のいくつかは気に入っています。

次のフォーム要素を作成する方法を見つけるのに苦労しています: -

1. フリップスイッチ
2. jQuery モバイル スタイルのようなチェックボックスとラジオ ボタン
3. 画像からドロップダウンボックス
4. 「フォント スタイル」と「レイアウト ビュー」というラベルの付いた項目

再作成する必要がある例を次に示します: http://jquerymobile.com/demos/1.1.1/docs/forms/forms-all-mini.html

HTML5を使用していることは知っていますが、jQuery Mobileを使用せずに上記のリンクのアイテムを複製する方法がわかりません。

ありがとう

Answer 1

jquery を使用して背景画像とイベントを処理します。より具体的には、「フリップ スイッチ」の場合は ui-slider です。要するに、jQuery を使用して独自のプラグインまたはコードを作成する必要がありますが、私の意見では zepto.js.

Zepto は、モバイル プラットフォーム向けにスリム化された優れたライブラリです。特に Zepto のアニメーションは、モバイル プラットフォームで優れています。

では、どこから始めますか？ブラウザーでお気に入りの開発ツールを使用してマークアップを検査します。クロームのF-12。好きな各コントロールが作成する div や span などを見てください。その背後にある css スタイルに注意してください。それはあなたに見えるでしょう。

そこから、jQuery/Zepto などを配線する必要があります。ここで正直に言うと、これらを作成する方法を尋ねている場合は、実際に投資したいよりも多くの作業が必要になるでしょう。