jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
366 lines (327 loc) • 15.8 kB
HTML
<html lang="en">
<head>
<title id='Description'>Slider Custom Element VerticalSlider</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of the vertical orientation of Custom Element Slider." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<style type="text/css">
.slider-demo-navigation-item {
margin-left: 3px;
cursor: pointer;
}
.slider-demo-info-header {
font-size: 20px;
font-family: Impact;
color: #aaa;
}
.slider-demo-info-content {
padding-top: 5px;
font-size: 11px;
width: 210px;
text-align: left;
font-family: Verdana, Arial;
}
.slider-demo-main {
width: 665px;
text-align: center;
border: 1px solid #ccc;
height: 376px;
padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #332f2f;
}
.slider-demo-header {
background-image: url(../../images/slider-demo-header-background.png);
width: 665px;
height: 76px;
}
.slider-demo-header-content {
position: relative;
right: 25px;
top: 15px;
color: #eee;
font-family: Times New Roman, Verdana;
font-size: 35px;
text-align: right;
}
.slider-demo-content {
width: 663px;
height: 300px;
border: 1px solid #fbfbfb;
border-top-width: 0px;
background: #fafafa;
position: relative;
}
.slider-demo-content-inner {
position: relative;
width: 550px;
background-color: #fff;
height: 250px;
float: right;
right: 25px;
top: 25px;
border: 1px solid #ccc;
background-color: #fbfbfb;
}
.slider-demo-content-container {
position: relative;
left: 9px;
top: 9px;
width: 530px;
background-color: #fff;
height: 230px;
border: 1px solid #F5F5F5;
}
.slider-demo-content-navigation {
z-index: 50;
position: absolute;
top: 200px;
left: 200px;
height: 26px;
width: 130px;
background-color: #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.slider-demo-content-image-border {
background-color: #eee;
padding: 5px;
border: 1px solid #ccc;
width: 231px;
height: 154px;
position: relative;
top: 30px;
left: 15px;
float: left;
}
.slider-demo-content-info {
position: relative;
top: 30px;
left: 50px;
float: left;
}
.slider-demo-slider-container {
position: relative;
top: 25px;
left: 20px;
text-align: left;
float: left;
}
</style>
<script>
JQXElements.settings['SliderSettings'] =
{
mode: 'fixed',
min: 0,
height: 250,
width: 60,
orientation: 'vertical',
max: 3,
ticksFrequency: 1,
tooltip: false,
value: 0
};
window.onload = function() {
var mySlider = document.querySelector('jqx-slider');
var carPreview = (function () {
var currentSlide = 0;
var config = {
timeOut: null,
currentSlide: currentSlide,
navigationContainer: document.getElementById('navigationContainer'),
nextButton: document.getElementById('nextButton'),
previousButton: document.getElementById('previousButton'),
playButton: document.getElementById('playButton'),
stopButton: document.getElementById('stopButton'),
slider: jqxSlider,
contentContainerSelector: 'slider-demo-content-',
locked: false
};
var attachEventListeners = function() {
config.navigationContainer.addEventListener('mouseenter', function() {
var loop = 0;
var interval = setInterval(() => {
config.navigationContainer.style.opacity = String(loop);
loop += 0.2;
if (loop >= 1) {
clearInterval(interval);
config.navigationContainer.style.opacity = String(1);
}
}, 50);
});
config.navigationContainer.addEventListener('mouseleave', function() {
var loop = 1;
var interval = setInterval(() => {
config.navigationContainer.style.opacity = String(loop);
loop -= 0.2;
if (loop <= 0.3) {
clearInterval(interval);
config.navigationContainer.style.opacity = String(0.1);
}
}, 50);
});
config.nextButton.addEventListener('click', function() {
config.slider.incrementValue();
});
config.previousButton.addEventListener('click', function() {
config.slider.decrementValue();
});
config.playButton.addEventListener('click', function() {
if (!config.timeOut) {
startSlideShow();
}
});
config.stopButton.addEventListener('click', function() {
stopSlideShow();
});
};
var startupConfig = function() {
config.navigationContainer.style.opacity = String(0.1);
};
var startSlideShow = function() {
config.timeOut = setTimeout(() => {
startSlideShow();
var slider = config.slider,
currentValue = slider.value(),
max = slider.max(),
min = slider.min();
if (currentValue < max) {
slider.incrementValue();
} else {
slider.setValue(min);
}
}, 2000);
};
var stopSlideShow = function() {
clearTimeout(config.timeOut);
config.timeOut = null;
};
var loadSlide = (id) => {
showSlide(id);
};
var hideCurrentSlide = function() {
document.getElementById(config.contentContainerSelector + config.currentSlide).style.display = 'none';
};
var showSlide = (id) => {
hideCurrentSlide();
document.getElementById(config.contentContainerSelector + id).style.display = 'block';
document.getElementById(config.contentContainerSelector + id).style.opacity = String(0.5);
setTimeout(() => {
document.getElementById(config.contentContainerSelector + id).style.opacity = String(1);
}, 100);
currentSlide = id;
};
return {
init: function() {
attachEventListeners();
startupConfig();
},
loadSlide
};
} )
carPreview().loadSlide(0);
};
</script>
</head>
<body>
<div class="example-description">
Custom element Slider represents a flexible Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders.
</div>
<div class="jqx-rc-all slider-demo-main">
<div id="slider-demo-header" class="jqx-rc-t slider-demo-header">
<div class="slider-demo-header-content">
Precious Cars
</div>
</div>
<div class="jqx-rc-b slider-demo-content">
<div class="jqx-rc-all slider-demo-content-inner">
<div class="jqx-rc-all slider-demo-content-container">
<div id="navigationContainer" class="slider-demo-content-navigation">
<img src="../../images/previous.png" class="slider-demo-navigation-item" alt="Previous"
title="Previous" id="previousButton" />
<img src="../../images/play.png" class="slider-demo-navigation-item" alt="Play" title="Play"
id="playButton" />
<img src="../../images/stop.png" class="slider-demo-navigation-item" alt="Stop" title="Stop"
id="stopButton" />
<img src="../../images/next.png" class="slider-demo-navigation-item" alt="Next" title="Next"
style="margin-right: 3px" id="nextButton" />
</div>
<div id="slider-demo-content-0" style="display: block">
<div class="slider-demo-content-image-border">
<img src="../../images/mercedes.jpg" alt="Mercedes" />
</div>
<div class="slider-demo-content-info">
<span class="slider-demo-info-header">Brabus Black Baron</span>
<div class="slider-demo-info-content">
Brabus will show its Black Baron E V12, based on the 2010 Mercedes-Benz E63 AMG,
at the 2009 Frankfurt Motor Show next week. Visually, Brabus’ Black Baron E V12
gets a new engine ventilation system, new front quarter panels, an upgraded front
bumper, new side skirts, a trunk mounted spoiler, new front quarter panels and awkward
looking rear-wheel covers.
</div>
</div>
</div>
<div id="slider-demo-content-1" style="display: none">
<div class="slider-demo-content-image-border">
<img src="../../images/jaguar.jpg" alt="Jaguar" />
</div>
<div class="slider-demo-content-info">
<span class="slider-demo-info-header">Jaguar XFR</span>
<div class="slider-demo-info-content">
The Jaguar XF (type (X250) is a mid-size luxury car / sports saloon produced by
British car manufacturer Jaguar. The car, which replaced the Jaguar S-Type, was
launched at the 2007 Frankfurt Motor Show following the public showing of the C-XF
concept in January 2007 at the North American International Auto Show.
</div>
</div>
</div>
<div id="slider-demo-content-2" style="display: none">
<div class="slider-demo-content-image-border">
<img src="../../images/ferrari.jpg" alt="Ferrari" />
</div>
<div class="slider-demo-content-info">
<span class="slider-demo-info-header">Ferrari Enzo</span>
<div class="slider-demo-info-content">
The Enzo was designed by Japanese Pininfarina head Ken Okuyama was initially introduced
at the 2002 Motor Show in Paris and had a limited number of units priced at $ 659,330.
Pininfarina wanted a car the will be entirely different from the usual approach
used for its predecessors (GTO, F40 and 50).
</div>
</div>
</div>
<div id="slider-demo-content-3" style="display: none">
<div class="slider-demo-content-image-border">
<img src="../../images/lamborgini.jpg" alt="Lamborgini" />
</div>
<div class="slider-demo-content-info">
<span class="slider-demo-info-header">Lamborghini Gallardo</span>
<div class="slider-demo-info-content">
The Lamborghini Gallardo is a sports car built by Lamborghini. The Gallardo is Lamborghini's
most-produced model to date, with over 10,000 built in its first seven years of
production. The Gallardo offers two choices of transmissions, H-Box and an advanced
six-speed electro-hydraulically controlled semi-automatic robotized manual.
</div>
</div>
</div>
</div>
</div>
<div class="slider-demo-slider-container">
<jqx-slider settings="SliderSettings" id="jqxSlider"></jqx-slider>
</div>
</div>
</div>
</body>
</html>