Data Attributes List

Description Element Placement
data-active-menu Add active class to this value target.
Example: '#home' or '.home'
<body>
data-active-submenu Add active class to this value target (if any).
Example: '#sub-1' or '.sub-1'
<body>
data-img-bg Add style image background with center position on this element
Example: 'img/bg/01.jpg'
Other Options:
data-repeat: 'repeat' (default), 'repeat-x', 'repeat-y', or 'none'
data-position: 'center 0px' (default), or other css background image
any
data-scroll-to On click: scroll to element ID or Class
Example: data-scroll-to="#features"
Other options:
data-offset : Add offset to ID top position
any
data-parallax Add Parallax background effect
Value: numeric (example: -1.2, -0.2, 0.2, 1.2)
any
data-waypoint Check on scroll page, if it inside the current element then set 'active' class on target
Value: '#menu-features' (element target to set active)
any
data-toggle="modal" On Click, add modal page with content target.
Options:
data-target = "#page-search" (The content is element with Id="page-search")
any
data-toggle-class On click: toggle class on target
Example: data-toggle-class="active"
Other options:
data-target : target ID or Class to be toggled
any
data-shop-list-toggle On click: toggle view of shop listing to be grid or list with additional functionality
Example: data-shop-list-toggle="grid"
Other options:
data-target : target ID or Class to be toggled
data-grid : Numeric value of how many columns in grid view.
any
data-page-transition true/false. Add transition between page. Example: data-page-transition="true"
Place [data-rel^="translink"] on <a> to add page transition functionality.
body
data-form="validate" Put in form tag to activate validation. View Demo <form>
data-rel="spinner" Change input into spinner type input with minimum value of 1 with options:
data-max: maximum value
<input>
data-toggle="tooltip" Apply bootstrap tooltip <any>
data-toggle="popover" Apply bootstrap popover <any>
data-rel="prettyPhoto" Apply prettyPhoto plugin.
Grouped Pretty Photo: data-rel="prettyPhoto[group-name]"
Group name can be number
<a>
data-rel="select" Apply bootstrap select <select>
data-radio-accordion Value = group name. Styling and Linking radio button with bootstrap accordion. View Demo Options:
data-active-class
bootstrap accordion & radio button
data-gallery Value: isotope options (http://isotope.metafizzy.co/) Example: gallery-masonry.php any element (look example)
data-filter-bind Bind this element to be a filter of isotope gallery, such as[data-gallery]. Value: ID or class or [data-gallery] that use isotope gallery. any element (look example)
data-add-gallery-list To load more gallery using ajax. Value: json file url. Options: data-add-quantity: how many items per load. <button> (look example)
data-share="facebook" Share page to facebook <button>
data-share="twitter" Share page to twitter <button>
data-share="pinterest" Share page to pinterest <button>
data-share="googleplus" Share page to googleplus <button>
data-share="linkedin" Share page to linkedin <button>
data-countdown Add countdown functionality to element. Value: end of date. Options: data-format: date-format.(http://www.w3schools.com/js/js_date_formats.asp) <button> Example: Coming Soon
data-twitter Bind Twitter List to element. Look detail: features-widgets-twitter-widget.php <any element>
data-flickr Bind Flickr List to element. Look detail: features-widgets-flickr-widget.php <any element>
data-gmap Bind Google map to element. Look detail: features-widgets-map-widget.php <any element>
data-ventro-slider Bind Ventro Slider to element. Value: ventro slider options. Look detail: index-multipage-corporate.php <any element>
data-list-slider Bind Master Slider List View to element. Look detail: gallery-list-slider.php <any element>
data-staff-slider Bind Master Slider Staff View to element. Look detail: index-multipage-corporate.php <any element>
data-carousel-widget Bind Slick Slider to element. Look detail: features-widgets-carousel-widget.php <any element>