HTML5 및 CSS3 프로그래밍을위한 AJAX에서 선택 가능한 요소 만들기 방법 - 인형

사용자가 요소 목록에서 선택할 수있는 상황이있을 수 있습니다. AJAX는 HTML5 및 CSS3 프로그래머에게 옵션을 허용합니다. 선택 가능한 위젯은 일반 목록에서이 기능을 생성하는 좋은 방법입니다. 사용자는 항목을 드래그하거나 Ctrl + 클릭하여 항목을 선택할 수 있습니다. 특수 CSS 클래스가 자동으로 적용되어 해당 항목이 선택 또는 선택으로 간주되고 있음을 나타냅니다.

선택 가능한 요소를 만들려면 다음 단계를 수행하십시오.

1. 순서가없는 목록으로 시작하십시오.

   HTML에 표준 순서없는 목록을 작성하십시오. ul에 ID를 부여하여 jQuery 노드로 식별 할 수 있도록합니다.

   
   alpha
   
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   
   
   선택 및 선택 상태를위한 CSS 클래스를 추가합니다.
   

2. 항목을 선택하거나 선택했을 때 선택 가능한 항목의 모양을 변경하려면 그림과 같이 CSS 클래스를 추가하십시오. 일부 특수 클래스 (ui-selection 및 ui-selected)는 사전 정의되며 적절한 시간에 요소에 추가됩니다.

   h1 {text-align: center;} # selectable. ui-selection {배경색: 회색;} # 선택 가능. 사용자가 선택한 {배경색: 검정색; color: white;}

   init ()
   

3. 함수에서 목록을 선택 가능한 노드로 지정하십시오.

   표준 jQuery 구문 인 selectable ()을 사용하십시오.
   $ ("# 선택 가능"). 선택 가능 ();

   클래스는 모든 요소가 선택되면 첨부됩니다. 이 클래스에 CSS를 추가해야합니다. 그렇지 않으면 항목이 선택되었음을 알 수 없습니다.

   선택된 모든 항목에 대해 무언가를하고 싶다면 ui가 선택된 클래스를 사용하여 jQuery 요소 그룹을 만듭니다.
   

var selectedItems = $ (".ui-selected");