64 lines
3.0 KiB
HTML
64 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>PWS Tabs</title>
|
|
<link type="text/css" rel="stylesheet" href="../assets/jquery.pwstabs-1.2.1.css">
|
|
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
<script src="../assets/jquery.pwstabs-1.2.1.js"></script>
|
|
|
|
<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/font-awesome-4.2.0/css/font-awesome.min.css">
|
|
|
|
<script>
|
|
jQuery(document).ready(function ($) {
|
|
$('.tabset0').pwstabs({
|
|
effect: 'scale', // You can change effects of your tabs container: scale / slideleft / slideright / slidetop / slidedown / none
|
|
defaultTab: 1, // The tab we want to be opened by default
|
|
containerWidth: '100%', // Set custom container width if not set then 100% is used
|
|
tabsPosition: 'horizontal', // Tabs position: horizontal / vertical
|
|
horizontalPosition: 'top', // Tabs horizontal position: top / bottom
|
|
verticalPosition: 'left', // Tabs vertical position: left / right
|
|
responsive: true, // Make tabs container responsive: true / false - boolean
|
|
theme: '',
|
|
rtl: false // Right to left support: true/ false
|
|
});
|
|
|
|
// Colors Demo
|
|
$('.pws_demo_colors a').click(function (e) {
|
|
e.preventDefault();
|
|
$('.pws_tabs_container').removeClass('pws_theme_grey pws_theme_violet pws_theme_green pws_theme_yellow pws_theme_gold pws_theme_orange pws_theme_red pws_theme_purple').addClass('pws_theme_'+$(this).attr('data-demo-color') );
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="content demo_responsive">
|
|
<h2 id="demos">Demos</h2>
|
|
|
|
<div class="pws_demo_colors">
|
|
|
|
<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>
|
|
|
|
</div><!-- pws_demo_colors -->
|
|
|
|
<div class="tabset0">
|
|
<div data-pws-tab="tab1" data-pws-tab-name="YouTube and Vimeo" data-pws-tab-icon="fa-video-camera">Test</div>
|
|
<div data-pws-tab="tab2" data-pws-tab-name="Google Maps" data-pws-tab-icon="fa-map-marker">Test 2</div>
|
|
<div data-pws-tab="tab3" data-pws-tab-name="Mixed Content" data-pws-tab-icon="fa-refresh fa-spin">Test 3</div>
|
|
</div><!-- tabset0 -->
|
|
|
|
</div><!-- content -->
|
|
<div class="footer">© 2015 - <a href="http://alexchizhov.com" target="_blank">Alex Chizhov</a></div><!-- footer -->
|
|
</body>
|
|
</html> |