如何在AJAX中为HTML5和CSS3编程选择元素 - 傻瓜

您可能会遇到这样的情况，您希望用户从元素列表中进行选择。 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-selecting {background-color：grey;} #selectable。 ui-selected {background-color：black; color：white;}

   在
   

3. init（） 函数中，将列表指定为可选节点。

   使用标准的jQuery语法：selectable（）。

   $（ “#可选择”）。可选择的（）;

   类被选中时附加到所有元素。一定要为这个类添加一些CSS，否则你将无法知道已经选择了哪些项目。
   

如果你想对所有已经被选中的项目做一些事情，只需要用ui选择的类创建一个jQuery元素组：

var selectedItems = $（“。ui-selected”）;