jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
354 lines (332 loc) • 15.2 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Slider, Slider Widget, RangeSlider" />
<meta name="description" content="jqxSlider enables you to capture a range of values with two drag handles. You can enable this mode by setting the rangeSlider property to true." />
<title id='Description'>jqxSlider enables you to capture a range of values with two drag handles. You can enable this mode by setting the rangeSlider property to true.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript">
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>';
$('#catalogue')[0].innerHTML = catalogue;
};
var addEventListeners = function () {
$('.jqx-slider').on('change', function (event) {
var filter = $(this).attr('filter');
handleSlide(filter, event.args.value);
});
$('#resetButton').on('click', function () {
resetFilters();
});
};
var resetFilters = function () {
this.priceSlider.jqxSlider('setValue', [this.priceSlider.jqxSlider('min'), this.priceSlider.jqxSlider('max')]);
this.displaySlider.jqxSlider('setValue', [this.displaySlider.jqxSlider('min'), this.displaySlider.jqxSlider('max')]);
this.hddSlider.jqxSlider('setValue', [this.hddSlider.jqxSlider('min'), this.hddSlider.jqxSlider('max')]);
this.ramSlider.jqxSlider('setValue', [this.ramSlider.jqxSlider('min'), this.ramSlider.jqxSlider('max')]);
};
var handleSlide = function (option, value) {
filterItems(updateFilter(option, value));
setLabelValue(this[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 = $('.demo-laptop-cell');
for (var i = 0; i < laptopCells.length; i += 1) {
laptopCells[i].css('opacity', 1);
}
};
var unmarkItem = function (laptop) {
var domLaptop = $('#' + laptop);
domLaptop.css('opacity', 1);
laptops[laptop].marked = false;
};
var markItem = function (laptop) {
var domLaptop = $('#' + laptop);
domLaptop.css('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 buildFilter = function () {
var priceValue = this.priceSlider.jqxSlider('value'),
displayValue = this.displaySlider.jqxSlider('value'),
ramValue = this.ramSlider.jqxSlider('value'),
hddValue = this.hddSlider.jqxSlider('value');
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);
addEventListeners();
setLabelValue(priceSlider, 'price', priceSlider.jqxSlider('value'));
setLabelValue(displaySlider, 'display', displaySlider.jqxSlider('value'));
setLabelValue(ramSlider, 'ram', ramSlider.jqxSlider('value'));
setLabelValue(hddSlider, 'hdd', hddSlider.jqxSlider('value'));
}
};
} ($));
$(document).ready(function () {
$('#catalogue').css('visibility', 'hidden');
var priceslider = $('#priceSlider'),
displaySlider = $('#displaySlider'),
ramSlider = $('#ramSlider'),
hddSlider = $('#hddSlider'),
resetButton = $('#resetButton');
priceslider.jqxSlider({ showButtons: true, height: 30, min: 500, max: 4000, step: 350, ticksFrequency: 350, mode: 'fixed', values: [500, 4000], rangeSlider: true, width: 180 });
displaySlider.jqxSlider({ height: 30, min: 9, max: 19, step: 1, ticksFrequency: 1, values: [9, 19], rangeSlider: true, mode: 'fixed', width: 180 });
ramSlider.jqxSlider({ height: 30, min: 2, max: 12, step: 1, ticksFrequency: 1, values: [2, 12], rangeSlider: true, mode: 'fixed', width: 180 });
hddSlider.jqxSlider({ height: 30, min: 150, max: 1500, values: [150, 1500], step: 135, ticksFrequency: 135, rangeSlider: true, mode: 'fixed', width: 180 });
resetButton.jqxButton({ width: 100 });
shop.init(priceslider, displaySlider, ramSlider, hddSlider, resetButton);
$('#catalogue').css('visibility', 'visible');
});
</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>
</head>
<body class='default'>
<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 />
<div filter="price" id='priceSlider'>
</div>
<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 />
<div filter="display" id='displaySlider'>
</div>
<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 />
<div filter="ram" id='ramSlider'>
</div>
<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 />
<div filter="hdd" id='hddSlider'>
</div>
<input type="button" value="Reset filters" id="resetButton" class="resetButton" />
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>