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>
|