[英]Understanding HTML5 data attribute
I am fairly new to javascript/jQuery, however I am making all efforts to understand what I am doing. 我对javascript / jQuery相当陌生,但是我正在尽一切努力来了解自己在做什么。 I was inspired by diesel's site . 我受到柴油厂的启发。 On this site , data attributes are used for the text blocks on the home page. 在此站点上 ,数据属性用于主页上的文本块。 data-color
. data-color
。 I want to achieve this function on my site . 我想在我的网站上实现此功能。 Being able to change the color of each block per entry, as the user scrolls down the page, it triggers differently. 能够在用户向下滚动页面时更改每个条目的每个块的颜色,它的触发方式也不同。
I have come on here for help as I haven't seen any tutorial in relation to the functionality I am trying to achieve. 我来这里寻求帮助,因为我还没有看到与我要实现的功能有关的任何教程。 Does anyone know how this can be done? 有谁知道该怎么做? I believe this would be helpful for those that want to execute the same or a similar functionality. 我相信这对于希望执行相同或相似功能的用户会有所帮助。
getColorMod: function(color, val) {
var hexToRgb = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : false;
}
var array = hexToRgb(color),
r = parseFloat(array[0] + val),
g = parseFloat(array[1] + val),
b = parseFloat(array[2] + val),
rgb = array ? {
r: r >= 250 ? 200 : r,
g: g >= 250 ? 200 : g,
b: b >= 250 ? 200 : b
} : false;
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
},
The HTML5 data attribute is there simply for the purpose of storing additional information within html elements. HTML5数据属性仅用于在html元素中存储其他信息的目的。 I've used it when printing various sets of data programmatic-ly to include information like user account numbers. 我以编程方式打印各种数据集时使用了它,以包括诸如用户帐号之类的信息。 bits of data that you may want to access with javascript or jquery 您可能想使用javascript或jquery访问的数据位
You can see a great documentation/tutorial here on the HTML5 data attribute by webtutsplus 您可以通过webtutsplus在HTML5数据属性上查看出色的文档/教程。
The data-attribute is interesting because you can define one as anything you like: 数据属性很有趣,因为您可以将任意属性定义为:
data-[NAME]="[VALUE]"
data-color="blue"
data-price="$19.96"
The more recent versions of jQuery also have a built in easy to use function to deal specifically with getting and setting HTML5 data-attributes - documentation here jQuery的最新版本还具有内置的易于使用的功能,专门处理获取和设置HTML5数据属性-这里的文档
Imagine some hypothetical html: 想象一些假设的html:
<span id="fluxCapacitor" data-gigawats="1.21"></span>
Calling the .data handler on our flux capacitor jquery element would return "1.21" 在磁通量电容器jquery元素上调用.data处理程序将返回“ 1.21”
$('#fluxCapacitor').data('gigawats'); // "1.21"
And you could use two parameter functionality for setting your flux capacitor to over 9000 gigawats. 您可以使用两个参数功能将通量电容器设置为9000吉瓦以上。
$('#fluxCapacitor').data('gigawats', "over 9000");
Resulting in: 导致:
<span id="fluxCapacitor" data-gigawats="over 9000"></span>
edit: adjusted my power levels for historical accuracy. 编辑:调整了我的力量水平,以确保历史准确性。
<div class="bg">
<div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div>
</div>
using library of your choice 使用您选择的库
This seems to be the way Diesel is performing the color transitions. 这似乎是Diesel执行颜色过渡的方式。
var $bodyBg = $('<div />'),
$bg = $('<div />').addClass('bg').append($bodyBg),
$arrow = $('<span />').addClass('arrow');
this.$navs.append($bg).append($arrow);
this.$navs
.on('hide', function() {
// hide navigation bar
$(this).addClass('hide');
})
.on('show', function() {
// show navigation bar
$(this).removeClass('hide');
})
.on('changeColor', $.proxy(function(e, color) {
var $elm = $(e.currentTarget),
$bg = $elm.find('.bg div');
if (Modernizr.csstransforms && Modernizr.csstransitions) {
// css3 transition
$bg.css({
transition: 'background 500ms ease',
backgroundColor: this.getColorMod(color, 12)
});
} else {
// no css3 transition support
$bg.css({
backgroundColor: this.getColorMod(color, 12)
});
}
}, this))
.trigger('hide')
.appendTo(this.$el);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.