Ariska
629 lines
45 KiB
HTML
Executable File
629 lines
45 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>PWS Tabs</title>
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles.css">
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="../assets/jquery.pwstabs.css">
|
|
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
<script src="../assets/jquery.pwstabs.js"></script>
|
|
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
|
|
|
|
<script>
|
|
jQuery(document).ready(function ($) {
|
|
$('.tabset0').pwstabs();
|
|
|
|
$('.tabsetnested1').pwstabs({
|
|
tabsPosition: 'vertical',
|
|
});
|
|
$('.tabsetnested2').pwstabs();
|
|
|
|
$('.tabset1').pwstabs({
|
|
effect: 'scale',
|
|
defaultTab: 3,
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset2').pwstabs({
|
|
effect: 'slideleft',
|
|
defaultTab: 2,
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset3').pwstabs({
|
|
effect: 'slidetop',
|
|
defaultTab: 3,
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset4').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset5').pwstabs({
|
|
effect: 'slideright',
|
|
defaultTab: 1,
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset6').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px',
|
|
rtl: true
|
|
});
|
|
$('.tabset7').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px',
|
|
horizontalPosition: 'bottom'
|
|
});
|
|
$('.tabset8').pwstabs({
|
|
effect: 'slideleft',
|
|
defaultTab: 1,
|
|
containerWidth: '600px',
|
|
tabsPosition: 'vertical',
|
|
verticalPosition: 'left'
|
|
});
|
|
$('.tabset9').pwstabs({
|
|
effect: 'slideright',
|
|
defaultTab: 1,
|
|
containerWidth: '600px',
|
|
tabsPosition: 'vertical',
|
|
verticalPosition: 'right'
|
|
});
|
|
$('.tabset10').pwstabs({
|
|
effect: 'none',
|
|
containerWidth: '600px'
|
|
});
|
|
$('.tabset11').pwstabs({
|
|
effect: 'scale',
|
|
containerWidth: '600px'
|
|
});
|
|
|
|
// Colors Demo
|
|
$('.pws_demo_colors a').click(function (e) {
|
|
e.preventDefault();
|
|
$('.pws_tabs_container').removeClass('pws_theme_cyan pws_theme_grey pws_theme_violet pws_theme_green pws_theme_yellow pws_theme_gold pws_theme_orange pws_theme_red pws_theme_purple pws_theme_dark_cyan pws_theme_dark_grey pws_theme_dark_violet pws_theme_dark_green pws_theme_dark_yellow pws_theme_dark_gold pws_theme_dark_orange pws_theme_dark_red pws_theme_dark_purple').addClass('pws_theme_' + $(this).attr('data-demo-color'));
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>PWS Tabs jQuery Plugin</h1>
|
|
<p>by <a href="http://alexchizhov.com" target="_blank">Alex Chizhov</a></p>
|
|
<p>GitHub: <a href="https://github.com/alexchizhovcom/pwstabs" target="_blank">alexchizhovcom / pwstabs</a></p>
|
|
<p class="header_buttons">
|
|
<a href="#demos">Demos</a>
|
|
<a href="#docs">Documentation</a>
|
|
<a href="#opt">Options</a>
|
|
<a href="https://github.com/alexchizhovcom/pwstabs/archive/master.zip">Download</a>
|
|
</p>
|
|
</div><!-- header -->
|
|
|
|
<div class="content">
|
|
<h2 id="demos">Demos</h2>
|
|
|
|
<h3>New Feature - Themes support</h3>
|
|
|
|
<div class="pws_demo_colors">
|
|
<span class="pws_demo_colors_title">Light flat theme:</span>
|
|
<span>
|
|
<a href="#" data-demo-color="cyan"></a>
|
|
<a href="#" data-demo-color="violet"></a>
|
|
<a href="#" data-demo-color="green"></a>
|
|
<a href="#" data-demo-color="yellow"></a>
|
|
<a href="#" data-demo-color="gold"></a>
|
|
<a href="#" data-demo-color="orange"></a>
|
|
<a href="#" data-demo-color="red"></a>
|
|
<a href="#" data-demo-color="purple"></a>
|
|
<a href="#" data-demo-color="grey"></a>
|
|
</span><br><br>
|
|
|
|
<span class="pws_demo_colors_title">Dark flat theme:</span>
|
|
<span>
|
|
<a href="#" data-demo-color="dark_cyan"></a>
|
|
<a href="#" data-demo-color="dark_violet"></a>
|
|
<a href="#" data-demo-color="dark_green"></a>
|
|
<a href="#" data-demo-color="dark_yellow"></a>
|
|
<a href="#" data-demo-color="dark_gold"></a>
|
|
<a href="#" data-demo-color="dark_orange"></a>
|
|
<a href="#" data-demo-color="dark_red"></a>
|
|
<a href="#" data-demo-color="dark_purple"></a>
|
|
<a href="#" data-demo-color="dark_grey"></a>
|
|
</span>
|
|
</div><!-- pws_demo_colors -->
|
|
|
|
|
|
<h3>Default Usage</h3>
|
|
|
|
<pre><code>$('.tabset0').pwstabs();</code></pre>
|
|
|
|
<h3>Nested Tabs Code</h3>
|
|
<pre><code>$('.tabsetnested1').pwstabs({
|
|
tabsPosition: 'vertical',
|
|
});
|
|
|
|
$('.tabsetnested2').pwstabs();</code></pre>
|
|
|
|
<div class="tabset0">
|
|
<div data-pws-tab="tab1" data-pws-tab-name="YouTube and Vimeo" data-pws-tab-icon="fa-video-camera">
|
|
<span style="margin-right: 16px;"><iframe width="440" height="247" src="https://www.youtube.com/embed/7u2aX7mG2NU?rel=0" frameborder="0" allowfullscreen></iframe></span>
|
|
<span><iframe src="https://player.vimeo.com/video/94502406?title=0&byline=0&portrait=0" width="440" height="247" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></span>
|
|
</div>
|
|
<div data-pws-tab="tab2" data-pws-tab-name="Google Maps" data-pws-tab-icon="fa-map-marker">
|
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:500px;width:900px;"><div id="gmap_canvas" style="height:500px;width:900px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.trivoo.net" id="get-map-data">trivoo.net</a></div><script type="text/javascript"> function init_map() { var myOptions = {zoom: 11, center: new google.maps.LatLng(40.7127837, -74.00594130000002), mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(40.7127837, -74.00594130000002)}); infowindow = new google.maps.InfoWindow({content: "<b></b><br/><br/> New York"}); google.maps.event.addListener(marker, "click", function () {infowindow.open(map, marker);});} google.maps.event.addDomListener(window, 'load', init_map);</script>
|
|
</div>
|
|
<div data-pws-tab="tab3" data-pws-tab-name="Mixed Content" data-pws-tab-icon="fa-refresh fa-spin">
|
|
<div class="pws_example_mixed_content_block">
|
|
<div class="pws_example_mixed_content_left">
|
|
<img src="mixedexample.jpg" alt="PWS Tabs jQuery Plugin">
|
|
</div><!-- pws_example_mixed_content_left -->
|
|
<div class="pws_example_mixed_content_right">
|
|
<h3>Tab With Mixed Content</h3>
|
|
<p>Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.</p>
|
|
<p><iframe width="550" height="309" src="https://www.youtube.com/embed/7u2aX7mG2NU?rel=0" frameborder="0" allowfullscreen></iframe></p>
|
|
</div><!-- pws_example_mixed_content_right -->
|
|
</div><!-- pws_example_mixed_content_block -->
|
|
</div>
|
|
<div data-pws-tab="tab4" data-pws-tab-name="Nested Tabs" data-pws-tab-icon="fa-child">
|
|
|
|
<div class="tabsetnested1">
|
|
<div data-pws-tab="nestedtab1" data-pws-tab-name="Nested Tab 1">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo metus, sollicitudin in tempus a, tristique ut eros. Aenean sit amet tempus leo, et hendrerit nibh. Vestibulum sollicitudin nisl purus, sit amet fringilla metus consectetur rhoncus. Maecenas ultrices metus ut aliquam feugiat. Donec eleifend vel ante sit amet tristique. Proin vitae interdum lectus. Nam a turpis hendrerit odio eleifend varius vel sed elit. Praesent auctor erat sed aliquet tempus. Etiam porttitor erat eu turpis egestas cursus. Vivamus varius vulputate lacus, vitae dictum libero gravida a. Nunc ac arcu tortor. Nulla suscipit ultricies nisl sit amet sodales. Praesent ultricies vestibulum magna at cursus. Cras venenatis tellus sed justo mattis rhoncus ut ac justo. Etiam ullamcorper massa ac dui suscipit, non pulvinar eros egestas. <br><br>
|
|
<div class="tabsetnested2">
|
|
<div data-pws-tab="nestedtab21" data-pws-tab-name="Nested Tab 1">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo metus, sollicitudin in tempus a, tristique ut eros. Aenean sit amet tempus leo, et hendrerit nibh. Vestibulum sollicitudin nisl purus, sit amet fringilla metus consectetur rhoncus. Maecenas ultrices metus ut aliquam feugiat. Donec eleifend vel ante sit amet tristique. Proin vitae interdum lectus. Nam a turpis hendrerit odio eleifend varius vel sed elit. Praesent auctor erat sed aliquet tempus. Etiam porttitor erat eu turpis egestas cursus. Vivamus varius vulputate lacus, vitae dictum libero gravida a. Nunc ac arcu tortor. Nulla suscipit ultricies nisl sit amet sodales. Praesent ultricies vestibulum magna at cursus. Cras venenatis tellus sed justo mattis rhoncus ut ac justo. Etiam ullamcorper massa ac dui suscipit, non pulvinar eros egestas.
|
|
</div>
|
|
<div data-pws-tab="nestedtab22" data-pws-tab-name="Nested Tab 2">
|
|
Ut metus turpis, rhoncus ut lacus auctor, lobortis rutrum ex. Phasellus at sodales velit. Proin quis facilisis sem. Maecenas eu posuere tellus, eget accumsan ex. Nulla eget auctor ipsum, at tempus magna. Vestibulum molestie a diam eleifend eleifend. Praesent eleifend in lectus et maximus. Vivamus vitae justo magna. Proin ultrices ex sed turpis pellentesque eleifend. Integer accumsan gravida est a venenatis. Aenean volutpat nunc vitae libero condimentum pharetra.
|
|
</div>
|
|
<div data-pws-tab="nestedtab23" data-pws-tab-name="Nested Tab 3">
|
|
Nunc convallis aliquam magna, in lobortis lorem pellentesque quis. Proin a pharetra purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros quam, scelerisque id euismod ut, porta nec urna. Etiam consectetur velit elit. Suspendisse varius nisl tortor, vitae viverra est bibendum a. Pellentesque dapibus lorem nec fringilla pharetra. Fusce ac cursus mi. Nam scelerisque ultricies lobortis. Nullam scelerisque lorem diam, sit amet tincidunt lorem viverra vel. Quisque aliquet arcu nec lorem accumsan, id pulvinar urna molestie.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-pws-tab="nestedtab2" data-pws-tab-name="Nested Tab 2">
|
|
Ut metus turpis, rhoncus ut lacus auctor, lobortis rutrum ex. Phasellus at sodales velit. Proin quis facilisis sem. Maecenas eu posuere tellus, eget accumsan ex. Nulla eget auctor ipsum, at tempus magna. Vestibulum molestie a diam eleifend eleifend. Praesent eleifend in lectus et maximus. Vivamus vitae justo magna. Proin ultrices ex sed turpis pellentesque eleifend. Integer accumsan gravida est a venenatis. Aenean volutpat nunc vitae libero condimentum pharetra.
|
|
</div>
|
|
<div data-pws-tab="nestedtab3" data-pws-tab-name="Nested Tab 3">
|
|
Nunc convallis aliquam magna, in lobortis lorem pellentesque quis. Proin a pharetra purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros quam, scelerisque id euismod ut, porta nec urna. Etiam consectetur velit elit. Suspendisse varius nisl tortor, vitae viverra est bibendum a. Pellentesque dapibus lorem nec fringilla pharetra. Fusce ac cursus mi. Nam scelerisque ultricies lobortis. Nullam scelerisque lorem diam, sit amet tincidunt lorem viverra vel. Quisque aliquet arcu nec lorem accumsan, id pulvinar urna molestie.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- tabset0 -->
|
|
|
|
|
|
<h3>Effect: Scale</h3>
|
|
|
|
<pre><code>$('.tabset1').pwstabs({
|
|
effect: 'scale',
|
|
defaultTab: 3,
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset1">
|
|
<div data-pws-tab="tab1" data-pws-tab-name="Tab 1">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab2" data-pws-tab-name="Tab 2">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
<div data-pws-tab="tab3" data-pws-tab-name="Tab 3">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
</div><!-- tabset1 -->
|
|
|
|
|
|
<h3>Effect: SlideLeft</h3>
|
|
|
|
<pre><code>$('.tabset2').pwstabs({
|
|
effect: 'slideleft',
|
|
defaultTab: 2,
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset2">
|
|
<div data-pws-tab="tab11" data-pws-tab-name="Tab 11">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab22" data-pws-tab-name="Tab 22">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab33" data-pws-tab-name="Tab 33">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset2 -->
|
|
|
|
|
|
|
|
<h3>Effect: SlideRight</h3>
|
|
|
|
<pre><code>$('.tabset5').pwstabs({
|
|
effect: 'slideright',
|
|
defaultTab: 1,
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset5">
|
|
<div data-pws-tab="tab11" data-pws-tab-name="Tab 11">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab22" data-pws-tab-name="Tab 22">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab33" data-pws-tab-name="Tab 33">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset5 -->
|
|
|
|
|
|
<h3>Effect: SlideTop</h3>
|
|
|
|
<pre><code>$('.tabset3').pwstabs({
|
|
effect: 'slidetop',
|
|
defaultTab: 3,
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset3">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset3 -->
|
|
|
|
|
|
|
|
<h3>Effect: SlideDown</h3>
|
|
|
|
<pre><code>$('.tabset4').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset4">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset4 -->
|
|
|
|
|
|
|
|
<h3>Effect: None</h3>
|
|
|
|
<pre><code>$('.tabset10').pwstabs({
|
|
effect: 'none',
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset10">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset10 -->
|
|
|
|
|
|
<h3>RTL Support</h3>
|
|
|
|
<pre><code>$('.tabset6').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px',
|
|
rtl: true
|
|
});</code></pre>
|
|
|
|
<div class="tabset6">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset6 -->
|
|
|
|
|
|
|
|
<h3>Tabs Position Horizontal Bottom</h3>
|
|
|
|
<pre><code>$('.tabset7').pwstabs({
|
|
effect: 'slidedown',
|
|
defaultTab: 2,
|
|
containerWidth: '600px',
|
|
horizontalPosition: 'bottom'
|
|
});</code></pre>
|
|
|
|
<div class="tabset7">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset7 -->
|
|
|
|
|
|
|
|
|
|
<h3>Tabs Position Vertical Left</h3>
|
|
|
|
<pre><code>$('.tabset8').pwstabs({
|
|
effect: 'slideleft',
|
|
defaultTab: 1,
|
|
containerWidth: '600px',
|
|
tabsPosition: 'vertical',
|
|
verticalPosition: 'left'
|
|
});</code></pre>
|
|
|
|
<div class="tabset8">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset8 -->
|
|
|
|
|
|
<h3>Tabs Position Vertical Right</h3>
|
|
|
|
<pre><code>$('.tabset9').pwstabs({
|
|
effect: 'slideright',
|
|
defaultTab: 1,
|
|
containerWidth: '600px',
|
|
tabsPosition: 'vertical',
|
|
verticalPosition: 'right'
|
|
});</code></pre>
|
|
|
|
<div class="tabset9">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Tab 111">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="Tab 222">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Tab 333">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset9 -->
|
|
|
|
|
|
<h3>Tabs with icons</h3>
|
|
|
|
<pre><code>$('.tabset11').pwstabs({
|
|
effect: 'scale',
|
|
containerWidth: '600px'
|
|
});</code></pre>
|
|
|
|
<div class="tabset11">
|
|
<div data-pws-tab="tab111" data-pws-tab-name="Like" data-pws-tab-icon="fa-heart">
|
|
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
|
|
</div>
|
|
<div data-pws-tab="tab222" data-pws-tab-name="" data-pws-tab-icon="fa-star">
|
|
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
|
|
</div>
|
|
<div data-pws-tab="tab333" data-pws-tab-name="Contacts" data-pws-tab-icon="fa-map-marker">
|
|
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
|
|
</div>
|
|
</div><!-- tabset11 -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="docs">Documentation</h2>
|
|
|
|
<h3>Getting Started</h3>
|
|
<p>1) Include jQuery library and jQuery PWS Tabs plugin in the <strong><head></strong> section.</p>
|
|
|
|
<pre><code><script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
|
|
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
|
|
<script src="jquery.pwstabs.js"></script></code></pre>
|
|
|
|
|
|
<p>2) Create tabbed panels and use HTML5 <strong>data-pws-*</strong> attributes to specify the ID & Name for the tabs.</p>
|
|
|
|
<pre><code><div class="hello_world">
|
|
|
|
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
|
|
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
|
|
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>
|
|
|
|
</div></code></pre>
|
|
|
|
|
|
<p><strong>data-pws-tab</strong> is used to initiate the tab and as its ID.</p>
|
|
<p><strong>data-pws-tab-name</strong> is used for a tab display name.</p>
|
|
<p><strong>data-pws-tab-icon</strong> is used to add an icon to a tab. Full URL to the icon (image).</p>
|
|
|
|
|
|
<p>3) Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.</p>
|
|
<pre><code>jQuery(document).ready(function($){
|
|
$('.hello_world').pwstabs();
|
|
});</code></pre>
|
|
|
|
|
|
<p>4) Available parameters to customize the tabs plugin.</p>
|
|
<pre><code>jQuery(document).ready(function($){
|
|
$('.hello_world').pwstabs({
|
|
|
|
// scale / slideleft / slideright / slidetop / slidedown / none
|
|
effect: 'scale',
|
|
|
|
// The tab to be opened by default
|
|
defaultTab: 1,
|
|
|
|
// Set custom container width
|
|
// Any size value (1,2,3.. / px,pt,em,%,cm..)
|
|
containerWidth: '100%',
|
|
|
|
// Tabs position: horizontal / vertical
|
|
tabsPosition: 'horizontal',
|
|
|
|
// Tabs horizontal position: top / bottom
|
|
horizontalPosition: 'top',
|
|
|
|
// Tabs vertical position: left / right
|
|
verticalPosition: 'left',
|
|
|
|
// BETA: Make tabs container responsive: true / false (!!! BETA)
|
|
responsive: false,
|
|
|
|
// Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow / pws_theme_gold /
|
|
// pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
|
|
theme: '',
|
|
|
|
// Right to left support: true/ false
|
|
rtl: false
|
|
|
|
});
|
|
});</code></pre>
|
|
|
|
|
|
|
|
<p>5) PWS Tabs Plugin supports <strong><a href="http://fortawesome.github.io/" title="Go to Font Awesome Website" target="_blank">Font Awesome 4.5.0</a></strong></p>
|
|
|
|
<p>5.1) Include Font Awesome stylesheet from assets directory:</p>
|
|
|
|
<pre><code><link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css"></code></pre>
|
|
|
|
<p>5.2) Use HTML5 <strong>data-pws-tab-icon</strong> attribute to set an icon. Icon names you can find here: <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome Icons</a>.</p>
|
|
|
|
<pre><code><div class="hello_world">
|
|
|
|
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" <strong>data-pws-tab-icon="fa-heart"</strong>>Our first tab</div>
|
|
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" <strong>data-pws-tab-icon="fa-star"</strong>>Our second tab</div>
|
|
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" <strong>data-pws-tab-icon="fa-map-marker"</strong>>Our third tab</div>
|
|
|
|
</div></code></pre>
|
|
|
|
|
|
|
|
|
|
<h3 id="opt">Options</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
<th>Available options</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>effect</td>
|
|
<td>scale</td>
|
|
<td>Transition effect</td>
|
|
<td>scale / slideleft / slideright / slidetop / slidedown / none</td>
|
|
<td>string</td>
|
|
</tr>
|
|
<tr>
|
|
<td>defaultTab</td>
|
|
<td>1</td>
|
|
<td>Which tab is chosen by default</td>
|
|
<td>Tab ID number starts with 1 (1,2,3..)</td>
|
|
<td>number</td>
|
|
</tr>
|
|
<tr>
|
|
<td>containerWidth</td>
|
|
<td>100%</td>
|
|
<td>Tabs container width</td>
|
|
<td>Any size value (1,2,3.. / px,pt,em,%,cm..)</td>
|
|
<td>string</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tabsPosition</td>
|
|
<td>horizontal</td>
|
|
<td>Define tabs position</td>
|
|
<td>horizontal / vertical</td>
|
|
<td>string</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>horizontalPosition</td>
|
|
<td>top</td>
|
|
<td>Define Horizontal tabs position</td>
|
|
<td>top / bottom</td>
|
|
<td>string</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>verticalPosition</td>
|
|
<td>left</td>
|
|
<td>Define Vertical tabs position</td>
|
|
<td>left / right</td>
|
|
<td>string</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>theme</td>
|
|
<td>''</td>
|
|
<td>Change tabs theme</td>
|
|
<td>
|
|
pws_theme_violet / pws_theme_green<br> pws_theme_yellow / pws_theme_gold<br> pws_theme_orange / pws_theme_red<br> pws_theme_purple / pws_theme_grey<br>
|
|
pws_theme_dark_violet / pws_theme_dark_green<br> pws_theme_dark_yellow / pws_theme_dark_gold<br> pws_theme_dark_orange / pws_theme_dark_red<br> pws_theme_dark_purple / pws_theme_dark_grey
|
|
</td>
|
|
<td>string</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>responsive</td>
|
|
<td>false</td>
|
|
<td>!!BETA!! Make tabs responsive</td>
|
|
<td>true / false</td>
|
|
<td>boolean</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>rtl</td>
|
|
<td>false</td>
|
|
<td>Right to left support</td>
|
|
<td>true / false</td>
|
|
<td>boolean</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div><!-- content -->
|
|
<div class="footer">© 2015 - <a href="http://alexchizhov.com" target="_blank">Alex Chizhov</a></div><!-- footer -->
|
|
</body>
|
|
</html> |