HTML5とCSS3プログラミングのためのAJAXで選択可能な要素を作る方法 - ダミー

ユーザーが要素のリストから選択できるようにしたい場合があります。 AJAXは、HTML5とCSS3のプログラマーにそのオプションを許可します。選択可能なウィジェットは、通常のリストからこの機能を作成するための素晴らしい方法です。ユーザーは、項目をドラッグまたはCtrl +クリックして選択することができます。特定のCSSクラスが自動的に適用され、項目が選択または選択されたとみなされていることを示します。

<！ - 1 - >

選択可能な要素を作成するには、次の手順に従います。

1. 順序なしリストから始めます。

   HTMLで標準の順序付けられていないリストを作成します。 jQueryノードとして識別できるようにulにIDを与える：

   
   alpha
   
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   
   
   CSSクラスを追加して選択状態にします。
   

2. 項目を選択または選択したときに選択可能項目の外観を変更する場合は、図のようにCSSクラスを追加します。いくつかの特別なクラス（ui-selectionとui-selected）はあらかじめ定義されており、適切な時にエレメントに追加されます：

   h1 {text-align：center;}#selectable。 ui-selection {背景色：灰色;}選択可能です。 ui-selected {背景色：黒; color：white;}

3. init（） 関数では、リストを選択可能なノードとして指定します。 <！ - 3 - >

   標準のjQuery構文：selectable（）を使用します。

   $（「#選択可能」）。選択可能（）;

   クラスは、選択されたときにすべての要素に添付されます。このクラスに何らかのCSSを追加してください。そうしないと、アイテムが選択されたことを伝えることができなくなります。
   

var selectedItems = $（ ".ui-selected"）;

選択されたすべての項目を使って何かをしたい場合は、uiで選択されたクラスを持つ要素のjQueryグループを作成します。