This
article will show you how you can select multiple item by using ctrl and shift
button using jquery ui in for your asp.net, html application.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
Now we will add the below css for giving style to the controls.
<style>
#feedback {
font-size: 1.4em;
}
#selectme .ui-selecting {
background: red;
}
#selectme .ui-selected {
background: red;
color: white;
}
#selectme {
list-style-type: none;
margin: 0;
padding: 0;
}
#selectme li {
margin: 3px;
padding: 0.4em;
font-size: 1.1em;
height: 15px;
background-color: gray;
}
</style>
|
Now have a
look of the below javascript code. This code is used for performing the operation.
<script>
$(function () {
$("#selectme").selectable();
});
</script>
|
Now have a
look the complete code of the page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI
Selectable To Select By Pressing Shift and Ctrl Button</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#feedback {
font-size: 1.4em;
}
#selectme .ui-selecting {
background: red;
}
#selectme .ui-selected {
background: red;
color: white;
}
#selectme {
list-style-type: none;
margin: 0;
padding: 0;
}
#selectme li {
margin: 3px;
padding: 0.4em;
font-size: 1.1em;
height: 15px;
background-color: gray;
}
</style>
<script>
$(function () {
$("#selectme").selectable();
});
</script>
</head>
<body>
<ul id="selectme">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view