视频: 《PHP开发零基础入门享精品公开课》课时02 类和对象的关系(编程开发 编程语言 PHP) 2025
某些种类的排序对于计算机来说很容易,您希望您的CSS3编码创建这种情况。例如,一台计算机可以按字母顺序将项目比人类可以更快,特别是当列表很长时。然而,排序并不总是合乎逻辑的。您可能希望用户按照个人喜好或计算机无法理解的其他条件对项目列表进行排序。在这些情况下,你需要一个允许手动排序的方法 - 这个例子给你提供了你所需要的。
<! - 1 - >
以下示例让用户按照未指定的条件对项目进行排序。 (可以在可下载代码的第06Interactions文件夹中找到这个例子的完整代码,作为SortContent.Html。)$(function(){$(“#SortMe”)。sortable();})function ShowResults ){//创建输出字符串。 var Output =“排序顺序是:n”; //找到每个必需的项目并//将它们添加到字符串中。 $(“#SortMe p”)。 each(function(index,element){Output + = element。innerHTML。substr(74);}); //显示结果。 alert(Output);}sortable()调用就是您为了使列表明显可排序而需要做的所有事情。用户可以以任何期望的顺序放置元素,无论这些元素是什么。然而,为了使这个调用起作用,你需要创建一个容器 - 在这种情况下 - 和一个项目列表,特别是
标签。 SortMe标识符与。
<! - 2 - >
按顺序访问项目也是一项要求。否则,让用户对项目进行排序是毫无意义的。在这种情况下,使用其他jQuery功能可以更容易地按照它们出现的顺序获取元素列表,并以这种方式处理它们。 ShowResults()演示了执行此任务的一种技巧。首先创建适当的选择器,该选择器以SortMe开始,并以每个包含的
标记结束。匿名函数接收索引和元素参数。通过检查元素的innerHTML属性,可以获取标记的名字。结果显示在一个对话框中。
这个例子也使用了一个特殊的jQuery UI CSS样式。此样式创建一个双向箭头,帮助用户了解每个项目可以在列表中向上或向下移动。你可以像这样创建它:
你可以在jQuery UI CSS框架中找到这些图标的列表。创建与列表出现在屏幕上相匹配的图标很重要。
