然而,使用 HTML 和 CSS 实现的功能已经取得了很大进展。让我们看一些例子。
带有文本搜索选项的下拉框是当今相当常见的界面元素。我最近读到的一篇文章描述了如何使用Select2 Javascript 库制作这样的列表:
它是一个有用的 UI 元素,可以帮助 阿根廷电话数据 的用户。但是,Select2 库中有一个 JavaScript 库,而 JavaScript 库又依赖于一些 CSS 和 JQuery 库。这意味着需要进行三次往返才能收集一堆大小各异的文件:
JQuery - 101kb
Select2 JavaScript - 24kb
Select2 CSS - 3kb
这对于网站速度来说并不理想,但为了给用户提供简化的界面,我们可以肯定地说这是值得的。
然而,实际上可以使用 HTML datalist 元素来实现此功能:
这允许用户搜索列表或自由输入自己的回复,从而提供相同的功能。此外,它在智能手机上具有原生界面!
你可以在这个 codepen中看到这个实际效果。
详细信息/摘要
LonelyPlanet 有一个漂亮的网站,我正在浏览这个关于西班牙的页面,它有一个大多数网民都熟悉的“阅读更多”链接:
就像我所见过的几乎所有实现一样,他们都使用 JavaScript 库来实现这一点,而这又带来了一堆开销。