filmov
tv
jQuery selectable filter
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss jQuery selectable filter option with an example. Along the way we will also discuss destory method. This is continuation to Part 97. Please watch Part 97 from jQuery Tutorial before proceeding.
Here is what we want to be able to do
When "Exclude Weekends" checkbox is checked, we should not be able to select weekends (Sat and Sun)
When "Exclude Weekends" checkbox is not checked, we should be able to select all days including weekends (Sat and Sun)
Code used in the demo
<%@ Page Language="C#" AutoEventWireup="true"
<!DOCTYPE html>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var selectableList = $('#selectable');
stop: getSelectedItems
});
function getSelectedItems() {
var selectedItems = '';
$('.ui-selected').each(function () {
selectedItems += $(this).text() + '<br/>';
});
$('#result').html(selectedItems);
}
function createSelectableList(filterValue) {
stop: getSelectedItems,
filter: filterValue
});
$('#selectable li').removeClass('ui-selected');
$('#result').empty();
var weekends = $('li[data-value="weekend"]');
if (filterValue == '*') {
}
else {
}
}
$('#cbExclude').click(function () {
if ($(this).is(':checked')) {
createSelectableList('li[data-value="weekday"]');
}
else {
createSelectableList('*');
}
});
});
</script>
<style>
li {
display: inline-block;
border: 1px solid black;
padding: 20px;
cursor: pointer;
}
.ui-selecting {
background-color: grey;
color: white;
}
.ui-selected {
background-color: green;
color: white;
}
.excluded {
background-color: red;
color:white;
cursor:default
}
</style>
</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
Exclude Weekends :
<input id="cbExclude" type="checkbox"/>
<ul id="selectable">
<li data-value="weekday">Mon</li>
<li data-value="weekday">Tue</li>
<li data-value="weekday">Wed</li>
<li data-value="weekday">Thu</li>
<li data-value="weekday">Fri</li>
<li data-value="weekend">Sat</li>
<li data-value="weekend">Sun</li>
</ul>
You selected :
<div id="result"></div>
</form>
</body>
</html>
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss jQuery selectable filter option with an example. Along the way we will also discuss destory method. This is continuation to Part 97. Please watch Part 97 from jQuery Tutorial before proceeding.
Here is what we want to be able to do
When "Exclude Weekends" checkbox is checked, we should not be able to select weekends (Sat and Sun)
When "Exclude Weekends" checkbox is not checked, we should be able to select all days including weekends (Sat and Sun)
Code used in the demo
<%@ Page Language="C#" AutoEventWireup="true"
<!DOCTYPE html>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var selectableList = $('#selectable');
stop: getSelectedItems
});
function getSelectedItems() {
var selectedItems = '';
$('.ui-selected').each(function () {
selectedItems += $(this).text() + '<br/>';
});
$('#result').html(selectedItems);
}
function createSelectableList(filterValue) {
stop: getSelectedItems,
filter: filterValue
});
$('#selectable li').removeClass('ui-selected');
$('#result').empty();
var weekends = $('li[data-value="weekend"]');
if (filterValue == '*') {
}
else {
}
}
$('#cbExclude').click(function () {
if ($(this).is(':checked')) {
createSelectableList('li[data-value="weekday"]');
}
else {
createSelectableList('*');
}
});
});
</script>
<style>
li {
display: inline-block;
border: 1px solid black;
padding: 20px;
cursor: pointer;
}
.ui-selecting {
background-color: grey;
color: white;
}
.ui-selected {
background-color: green;
color: white;
}
.excluded {
background-color: red;
color:white;
cursor:default
}
</style>
</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
Exclude Weekends :
<input id="cbExclude" type="checkbox"/>
<ul id="selectable">
<li data-value="weekday">Mon</li>
<li data-value="weekday">Tue</li>
<li data-value="weekday">Wed</li>
<li data-value="weekday">Thu</li>
<li data-value="weekday">Fri</li>
<li data-value="weekend">Sat</li>
<li data-value="weekend">Sun</li>
</ul>
You selected :
<div id="result"></div>
</form>
</body>
</html>
0:13:29
jQuery selectable filter
0:09:25
Select element using jQuery selectable
0:07:58
jQuery selectable widget
0:04:29
jQuery selectable awesome effect using html css and jquery cdn | practical program
0:02:10
JQuery Tutorial - jquery selectors - filter element selection
0:02:14
jquery visibility hidden filter selector - part 73
0:01:02
Pure JavaScript - HTML Multiple Select Tag
0:27:37
Dropdown filter for HTML tables using JavaScript and CSS
0:03:26
jquery filter method || jquery filter element || jquery select specific elements
0:00:28
jQuery search and filter from div
0:03:53
jQueryUI - Interaction Selectable 2 - Filter Selectables and Non Selectables
0:12:02
4. Getting To Know About jQuery Filters
0:08:24
Lecture 39 Tutorial JQuery Selectable Function
0:03:45
Introduction to the jQuery filter() method - Kevin Chisholm Video
0:06:18
Using Visibility and Content Filters in jQuery
0:04:23
jQuery Filtering [Fundamentals of Ignite UI]
0:10:25
jQuery - Selectors and Filters
0:08:27
Dropdown Filter/Search by product or items Using jQuery
0:09:52
jQuery Filter Methods To Narrow Selection
0:07:14
Creating a Live Filter with Multiple Options using Checkbox with jQuery Tutorial Demo
0:03:36
JQuery Tutorial - jquery selectors - find vs filter
0:02:42
jquery attribute selectors - Multiple Attribute filter - part 56
0:15:05
Product Filters in Codeigniter using Ajax - 4
0:13:03
Lecture 28-Working with jQuery filter function
Комментарии