我最近下载了一个代码,它显示
<button data-effect="st-effect-4">Slide along</button>
据我所知,“st-effect-4”是一个class
名字,但谁能告诉我这data-effect
是干什么用的?
HTML5 允许自定义属性,只要它们以“data-”开头。这是具有特定值的自定义属性。
这些被称为HTML5 自定义数据属性。
自定义数据属性旨在存储页面或应用程序私有的自定义数据,没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。每个 HTML 元素都可以指定任意数量的自定义数据属性,并带有任意值。
您在 Google 中找不到它的原因是因为这些属性是用户为自己使用而生成的自定义属性。
这不是为了任何事情。
HTML5 规定(几乎)任何元素都可以具有任何它想要的“data-*”属性,这些属性可以保存他们想要的任何值(只要它们可以被视为字符串,以存储在元素上)。
所以这可能是库的一部分,或者它可能只是某个选择器的 CSS,例如:
button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }
或者它被用作查询选择器,在 JS 中,用于游戏的控制......
谁知道呢?
对于 Mary Lou 的教程 - 这是为了控制引入菜单的动画。这可以重新分配给其他触发器元素 - 但是使其生效的代码是之前出现的 DIV 元素 - st-trigger-effects。
如果您查看代码和控制它的 CSS,您将能够将其重新分配给您需要使用它的任何地方。
我目前在大学项目的引导样板中使用它。
来源:http : //tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
自定义数据属性旨在存储页面或应用程序私有的自定义数据,没有更合适的属性或元素。
这些属性不适用于独立于使用这些属性的站点的软件。
每个 HTML 元素都可以指定任意数量的自定义数据属性,并带有任意值。