jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
404 lines (356 loc) • 16.1 kB
HTML
<html lang="en">
<head>
<title id='Description'>Slider Custom Element RangeSlider</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 range slider in 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/jquery-1.9.1.min.js"></script>
<!-- -->
<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="../scripts/demos.js"></script>
<style type="text/css">
.demo-laptop-catalog-table {
table-layout: fixed;
border-collapse: separate;
}
.demo-laptop-cell {
border: 1px solid #ccc;
}
.demo-laptop-cell-header-content {
top: 5px;
position: relative;
}
.demo-laptop-cell-header {
border: 0px solid #ccc;
border-bottom-width: 1px;
height: 20px;
font-size: 10px;
text-align: center;
font-weight: bold;
vertical-align: middle;
background: #e3e3e3;
}
.demo-laptop-cell-content {
padding-top: 5px;
}
.demo-laptop-cell-price {
padding: 2px 3px 2px 3px;
color: #fff;
float: right;
background: #000;
font-weight: bold;
}
.catalogue {
border: 1px solid #bbb;
padding: 3px;
background: #fff;
}
.options {
width: 200px;
margin-left: 5px;
float: left;
}
.main-container {
padding: 2px;
}
.label {
font-size: 13px;
font-family: Arial;
color: #333;
font-weight: bold;
margin-bottom: 5px;
margin-top: 15px;
width: 100%;
text-align: left;
}
.options-value {
font-size: 11px;
}
.options-container {
padding: 10px;
text-align: center;
}
.resetButton {
margin-top: 35px;
}
</style>
<script>
var shop = function () {
var laptops = {
'l-1': { ram: 2, price: 510, display: 15.6, hdd: 320, model: 'Toshiba Satellite C660', marked: false },
'l-2': { ram: 6, price: 594, display: 15.6, hdd: 500, model: 'TOSHIBA Satellite L675', marked: false },
'l-3': { ram: 4, price: 918, display: 14.5, hdd: 500, model: 'HP Envy 14-1190', marked: false },
'l-4': { ram: 4, price: 1165, display: 15.6, hdd: 500, model: 'Dell Vostro 3500', marked: false },
'l-5': { ram: 12, price: 1306, display: 15.6, hdd: 750, model: 'ASUS N73JQ-A2', marked: false },
'l-6': { ram: 8, price: 3732, display: 17, hdd: 1280, model: 'Alienware M17X', marked: false },
'l-7': { ram: 4, price: 800, display: 17, hdd: 500, model: 'Toshiba Satellite P300-21E', marked: false },
'l-8': { ram: 12, price: 3595, display: 18.4, hdd: 1024, model: 'ASUS NX90JQ', visible: false },
'l-9': { ram: 2, price: 631, display: 14.1, hdd: 500, model: 'Packard Bell EasyNote', marked: false },
'l-10': { ram: 2, price: 550, display: 13.3, hdd: 320, model: 'Lenovo ThinkPad Edge', marked: false },
'l-11': { ram: 3, price: 529, display: 15.6, hdd: 320, model: 'Fujitsu Lifebook A531', marked: false },
'l-12': { ram: 8, price: 2401, display: 16.5, hdd: 500, model: 'SONY VAIO F', marked: false }
};
var drawTable = function () {
var catalogue = '<table class="demo-laptop-catalog-table"><tr>', counter = 0;
for (var laptop in laptops) {
if (laptops.hasOwnProperty(laptop)) {
counter += 1;
if (counter % 3 === 1 && counter !== 1) {
catalogue += '</tr><tr>';
}
catalogue += '<td class="demo-laptop-cell jqx-rc-all" id="' + laptop + '">' +
'<div class="demo-laptop-cell-header"><div class="demo-laptop-cell-header-content">' + laptops[laptop].model + '</div></div>' +
'<div class="demo-laptop-cell-content"><img src="../images/' + laptop + '.jpg" alt="' + laptops[laptop].model + '" title="' + laptops[laptop].model + '" /></div>' +
'<div class="demo-laptop-cell-price jqx-rc-all">$ ' + laptops[laptop].price + '</div>' +
'</td>';
}
}
catalogue += '</tr></table>';
document.getElementById('catalogue').innerHTML = catalogue;
};
var resetFilters = function () {
priceSlider.setValue([priceSlider.min, priceSlider.max]);
displaySlider.setValue([displaySlider.min, displaySlider.max]);
hddSlider.setValue([hddSlider.min, hddSlider.max]);
ramSlider.setValue([ramSlider.min, ramSlider.max]);
};
var handleSlide = function (option, value) {
filterItems(updateFilter(option, value));
setLabelValue([option + 'Slider'], option, value);
};
var setLabelValue = function (slider, option, value) {
var label;
switch (option) {
case 'price':
label = 'USD';
break;
case 'hdd':
label = 'GB';
break;
case 'display':
label = 'inches';
break;
case 'ram':
label = 'GB';
break;
}
document.getElementById(option + 'Max').innerHTML = value.rangeEnd + ' ' + label;
document.getElementById(option + 'Min').innerHTML = value.rangeStart + ' ' + label;
};
var filterItems = function (filter) {
var failed = false;
for (var laptop in laptops) {
for (var property in filter) {
if (filter[property].max < laptops[laptop][property] || filter[property].min > laptops[laptop][property]) {
failed = true;
}
}
if (failed) {
if (!laptops[laptop].marked) {
markItem(laptop);
}
} else {
if (laptops[laptop].marked) {
unmarkItem(laptop);
}
}
failed = false;
}
};
var resetItemFilter = function (laptop) {
var laptopCells = document.querySelector('.demo-laptop-cell');
for (var i = 0; i < laptopCells.length; i += 1) {
laptopCells[i].css('opacity', 1);
}
};
var unmarkItem = function (laptop) {
document.getElementById(laptop).style.opacity = '1';
laptops[laptop].marked = false;
};
var markItem = function (laptop) {
document.getElementById(laptop).style.opacity = '0.5';
laptops[laptop].marked = true;
};
var initSliders = function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) {
this.priceSlider = priceSlider;
this.displaySlider = displaySlider;
this.ramSlider = ramSlider;
this.hddSlider = hddSlider;
this.resetButton = resetButton;
buildFilter();
};
var collectFilters = {};
var buildFilter = function () {
var priceValue = priceSlider.val(),
displayValue = displaySlider.val(),
ramValue = ramSlider.val(),
hddValue = hddSlider.val();
this.filter = {
price: {
max: priceValue.rangeEnd,
min: priceValue.rangeStart
},
display: {
max: displayValue.rangeEnd,
min: displayValue.rangeStart
},
hdd: {
max: hddValue.rangeEnd,
min: hddValue.rangeStart
},
ram: {
max: ramValue.rangeEnd,
min: ramValue.rangeStart
}
};
};
var updateFilter = function (option, value) {
this.filter[option].min = value.rangeStart;
this.filter[option].max = value.rangeEnd;
return this.filter;
};
return {
init: function (priceSlider, displaySlider, ramSlider, hddSlider, resetButton) {
drawTable();
initSliders(priceSlider, displaySlider, ramSlider, hddSlider, resetButton);
buildFilter();
setLabelValue(priceSlider, 'price', priceSlider.val());
setLabelValue(displaySlider, 'display', displaySlider.val());
setLabelValue(ramSlider, 'ram', ramSlider.val());
setLabelValue(hddSlider, 'hdd', hddSlider.val());
},
handleSlide: handleSlide,
resetFilters: resetFilters
};
};
JQXElements.settings['priceSettings'] =
{
showButtons: true,
min: 500,
max: 4000,
step: 350,
ticksFrequency: 350,
mode: 'fixed',
values: [500, 4000],
rangeSlider: true,
};
JQXElements.settings['displaySettings'] =
{
min: 9,
max: 19,
step: 1,
ticksFrequency: 1,
values: [9, 19],
rangeSlider: true,
mode: 'fixed'
};
JQXElements.settings['ramSettings'] =
{
min: 2,
max: 12,
step: 1,
ticksFrequency: 1,
values: [2, 12],
rangeSlider: true,
mode: 'fixed'
};
JQXElements.settings['hddSettings'] =
{
min: 150,
max: 1500,
values: [150, 1500],
step: 135,
ticksFrequency: 135,
rangeSlider: true,
mode: 'fixed'
};
window.onload = function () {
var shopCenter = new shop();
var resetButton = document.querySelector('jqx-button');
var priceSlider = document.getElementById('priceSlider'),
displaySlider = document.getElementById('displaySlider'),
ramSlider = document.getElementById('ramSlider'),
hddSlider = document.getElementById('hddSlider');
shopCenter.init(priceSlider, displaySlider, ramSlider, hddSlider, resetButton);
priceSlider.addEventListener('change', function (event) {
shopCenter.handleSlide('price', event.args.value);
});
displaySlider.addEventListener('change', function (event) {
shopCenter.handleSlide('display', event.args.value);
});
ramSlider.addEventListener('change', function (event) {
shopCenter.handleSlide('ram', event.args.value);
});
hddSlider.addEventListener('change', function (event) {
shopCenter.handleSlide('hdd', event.args.value);
});
resetButton.addEventListener('click', function () {
shopCenter.resetFilters();
});
};
</script>
</head>
<body>
<div class="example-description">
Custom element Slider enables you to capture a range of values with two drag handles. You can enable this mode by setting the rangeSlider property to true.
</div>
<div id="jqxWidget">
<div id="main-container" class="main-container jqx-rc-all">
<div style="float: left;">
<div id="catalogue" class="catalogue jqx-rc-all"></div>
</div>
<div id="options" class="options jqx-rc-all">
<div id="options-container" class="options-container">
<div class="label">Price</div>
<div class="options-value">
<div style="float: left" id="priceMin">
</div>
<div style="float: right" id="priceMax">
</div>
</div>
<br />
<jqx-slider style="float: left;" settings="priceSettings" id="priceSlider"></jqx-slider>
<div class="label">Screen Size</div>
<div class="options-value">
<div style="float: left" id="displayMin">
</div>
<div style="float: right" id="displayMax">
</div>
</div>
<br />
<jqx-slider style="float: left;" settings="displaySettings" id="displaySlider"></jqx-slider>
<div class="label">RAM</div>
<div class="options-value">
<div style="float: left" id="ramMin">
</div>
<div style="float: right" id="ramMax">
</div>
</div>
<br />
<jqx-slider style="float: left;" settings="ramSettings" id="ramSlider"></jqx-slider>
<div class="label">HDD</div>
<div class="options-value">
<div style="float: left" id="hddMin">
</div>
<div style="float: right" id="hddMax">
</div>
</div>
<br />
<jqx-slider style="float: left;" settings="hddSettings" id="hddSlider"></jqx-slider>
<jqx-button id="resetButton" class="resetButton">Reset filters</jqx-button>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
</body>
</html>