web-dev-qa-db-ja.com

追加および先頭に追加されたチェックボックス:これはいつ使用できますか?

Aは Twitter Bootstrap を見ていて、[先頭に追加]と[追加]チェックボックスを見て、どこで、なぜ、いつ使用できるかを理解できません。

Prepended and appended checkbox

誰かが良い例を教えてくれますか?

16
caarlos0

bootstrapの作成者として、おそらくこれに光を当てることができます:)。プリペンド入力とアペンド入力には、2つの目的があります。

  • 単純な句読点または単位を入力とペアにすることができます。たとえば、フィールドがお金を要求していることを示す必要がある場合は、 $記号。その他の例には、ユーザー名付きの@(Twitter.comの設定ページ)や、電話番号入力用の「+1」などがあります。
  • フォームの値を切り替えて編集するための一般的な方法を凝縮します。場合によっては、設定を有効にし、それに制限のない値を提供する必要があります。 -このカスタムコントロールを使用すると、よりコンパクトな方法でこれを行うことができます。

両方の使用例は有効で、私がBootstrapを作成してTwitterで内部ツールを再設計するのを助けたときに発生しました。後者はフォーム値の切り替えと編集であり、Deiderダッシュボードの反復から来ました(Deciderは、ユーザーの小さなグループに対して機能をオンまたはオフにするために使用するツールです。)機能をオンにして、一度有効にされたときに表示されるユーザーの%を設定する方法が必要でした。オン/オフを切り替えます。これを表示する非常に凝縮された方法が必要でした。

だから、それはそれの要点です。私自身はあまり使用していませんが、同じ2つの使用例に遭遇する可能性があると感じました。お役に立てば幸いです。

ちなみに、TwitterでBootstrapが出てきたら、もっと質問してください。 @ mdo が私のハンドルです。

17
Mark Otto

チェックが必要な項目のリストを表示している場合、または単にほとんどの人がすでに慣れているものに固執したい場合は、先頭に追加されたチェックボックスが意味をなします。以下の例(すばらしいとは言えません)は、従来の付加されたチェックボックスがより適切であると私が主張する例を示します。

prepended checkbox example

追加されたチェックボックスは、チェックがフォームの一部である場合、特にモバイルフォームの場合に最も意味があります。ここでは、テキスト部分を他のフォーム要素と一致させたいので、それを使用することは理にかなっています。以下のSencha Touchのキッチンシンクアプリの例をご覧ください。

enter image description here

2
JohnGB

2つの論理的な用途は、検証(視覚的なチェックボックスのみにする)とユーザーが作成したチェックボックスを作成することです。

検証
これらは、Xフィールドが有効であることを示すために使用できます。チェックボックスをオンにして、「はい、このフィールドは問題ありません」と表示されるように緑/青の色合いを少し付けて、空白のままにし、要素を赤に変更して、チェックアウトしない場合は関連するエラーメッセージを表示します。これは、ユーザーが手動で確認できるフィールドではありません。これは通常imageによって処理されますが、フォームフィールドでは処理されません。

ユーザーが作成したチェックボックス
Springpad は、チェックリストを使用してユーザーがチェックリストを作成し、同じフォームから項目を完了としてマークできるタスクリスト機能を含むサービスです。

enter image description here

Googleタスクは同じことを行います:

enter image description here

最後のフィールドは入力であり(実際にはすべて)、チェックボックスはリストの項目を「完了」としてマークします。

2
Ben Brocka

入力のようなカスタムの「スキル」でこれを使用できます。したがって、スキルを入力してから、チェックボックスで、そのスキルをメインプロファイルに表示するかどうか、または誰かがすべてのスキルの表示を選択したときにのみ表示するようにします。

基本的にカスタム入力コンテンツのトグルとして使用します。この例では、コンテンツを書き込むときと同じように追加を使用し、それがさらに存在することを指示します。

先頭に追加しても意味がありません。

0
James Wilkinson

インターネットで検索 の後、用語としての「付加されたチェックボックス」は主にTwitterのBootstrapフレームワークに関連しています。800の言及があるだけです。そのほとんどは、jQueryスクリプトのトラブルシューティング要求です。

私の唯一の論理的な考え方は、- デフォルトの方向変更 が正しく機能しない場合に、右から左へ記述する言語のフェイルセーフとして使用できるということです。このようなコントロールは、左から右への言語には意味がありません。ユーザーがテキストフィールドとチェックボックスに気づき、ユーザーを混乱させるためです。

フレームワークに含まれているためにコントロールを使用する方法を探している場合は、そこで停止します。適切なUXの目標は、適切な要素を使用することです。そのため、要素が役に立たないと感じた場合は、スキップ/省略/ドロップ/全滅する必要があります。

0
dnbrv