Please look at following examples to get understanding about how to use jquery plugins.
drag & drop example using jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script>
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
drop: function( event, ui ){
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
Tabs example using Jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<script>
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
Nunc tincidunt
</a>
</li>
<li>
<a href="#tabs-2">
Proin dolor
</a>
</li>
<li>
<a href="#tabs-3">
Aenean lacinia
</a>
</li>
</ul>
<div id="tabs-1">
<p>This first tab para.</p>
</div>
<div id="tabs-2">
<p>This 2nd tab para..</p>
</div>
<div id="tabs-3">
<p>This 3rd tab para..</p>
</div>
</div>
</body>
</html>
Select box with suggestion list example using Select2
<html>
<head>
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/select2/dist/js/select2.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'data/us_states.json',
success: function (data) {
var states = [];
$.each(data, function(i, state){
states.push({
id: i + 1,
text: state.name
});
});
$("#states").select2({
data: states
});
}
});
});
</script>
</head>
<body>
<select id="states">
</select>
</body>
</html>
drag & drop example using jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script>
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
drop: function( event, ui ){
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
Tabs example using Jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<script>
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
Nunc tincidunt
</a>
</li>
<li>
<a href="#tabs-2">
Proin dolor
</a>
</li>
<li>
<a href="#tabs-3">
Aenean lacinia
</a>
</li>
</ul>
<div id="tabs-1">
<p>This first tab para.</p>
</div>
<div id="tabs-2">
<p>This 2nd tab para..</p>
</div>
<div id="tabs-3">
<p>This 3rd tab para..</p>
</div>
</div>
</body>
</html>
Select box with suggestion list example using Select2
<html>
<head>
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/select2/dist/js/select2.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'data/us_states.json',
success: function (data) {
var states = [];
$.each(data, function(i, state){
states.push({
id: i + 1,
text: state.name
});
});
$("#states").select2({
data: states
});
}
});
});
</script>
</head>
<body>
<select id="states">
</select>
</body>
</html>
No comments:
Post a Comment