What are the data- * attributes for?

Question

What are the data- * attributes for?

Navigation

#1 by (11 votes)
#2 by (0 votes)

5

I'm looking for code to make a progress bar. Among those that I saw I found this example that I liked, and inside the html I found a attribute data-percentage particular. When deleting nothing happens because who changes the appearance of the bar is width . What exactly does that attribute serve?

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#ebebeb),to(#f5f5f5));
background-image: -webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);
background-image: -moz-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);
background-image: linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb',endColorstr='#fff5f5f5',GradientType=0);
}
.progress {
height: 12px;
background-color: #ebeef1;
background-image: none;
box-shadow: none;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#3071a9));
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: -moz-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
}
.progress-bar {
box-shadow: none;
border-radius: 3px;
background-color: #0090D9;
background-image: none;
-webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-moz-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-ms-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-o-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.progress-bar-success {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#5cb85c),to(#449d44));
background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);
background-image: -moz-linear-gradient(top,#5cb85c 0,#449d44 100%);
background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff449d44',GradientType=0);
}
.progress-bar-success {
background-color: #0AA699;
background-image: none;
}

<div class="container">
	<div class="row">
		<div class="col-md-4">
                  <h3>Progess bar <span class="semi-bold">Colors</span></h3>
                  <p>Progress bars comes with customized colors and transparent background that would fit any colored widget or portlet</p>
                  <br>
                  <div class="col-md-11">
                    <div class="progress">
                      <div data-percentage="0%" style="width: 50%;" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>
	</div>
</div>

html5 css

asked by Javier Cárdenas 20.12.2016 в 04:10

source

2 answers

0

If between the tags <head></head> you call JQuery and then at the end of your HTML document just before the </body> you add the following code.

jQuery(document).ready(function(){
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});

The progress bar acquires an animation. As you can see in this case it is used to manipulate those elements from Javascript.

answered by 26.06.2018 в 22:28

Average hours PHP Send data between activities

score 11 · Accepted Answer

Before HTML5 if the developer wanted to store metadata related to the information of a tag, he should use attributes such as rel or class , possibly with a particular name so that, using Javascript, actions could be taken on these elements.

Since HTML5 all attributes whose name starts with data- * in the elements are called data attributes and are used to store information with semantic content for the element. For example:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

create an item from a list. In the browser only the word 'Daniel' will be seen, but thanks to the attributes id (by data-id), mail (by data-mail) and age (by data-age) it is possible to add semantic information to the name that can be used to create web applications, using Javascript or CSS with the corresponding API.

According to specification , these custom attributes can be considered as a special area of private information storage (private in the sense that the user does not see this information and usually does not affect the presentation. of the element in the previous list, it could be thought that all the elements of type li in a list each have three attributes: an id, an email and an age, and using Javascript, it could be possible, for example, to create functionalities to sort the items in the list by age (getting all the age attributes of the items in the list), or filter the items that match a particular email.

For the div element that will serve to encapsulate the progress bar, the data-percentage element can be used to store the value corresponding to the percentage of the progress bar that has been completed. The presentation of the same (or the amount of color that indicates how full the bar is) is the responsibility of the attached styles, and, using Javascript, could alter how full I want the bar to be displayed on the screen altering the value of this data-percentage attribute, in such a way that some interactivity with the bar is allowed, for example. In the case mentioned, if you delete the attribute nothing will happen because there is no code that reads or alters this value and the presentation of the stylesheet that append does not use this particular attribute to draw the portion of the progress bar which should show as complete.