Scribd
Upload
46 views

Jquery Lab

The document contains 15 pages describing programs that demonstrate various jQuery UI widgets and animation functions including fade in/out, slide up/down/toggle, animate, chaining animations, queuing animations, draggable, resizable, selectable, sortable, autocomplete, datepicker, dialog, and slider. Each page contains the HTML, CSS, and JavaScript code to implement a specific jQuery feature.

Uploaded by

Nikhil Mali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

Jquery Lab

The document contains 15 pages describing programs that demonstrate various jQuery UI widgets and animation functions including fade in/out, slide up/down/toggle, animate, chaining animations, queuing animations, draggable, resizable, selectable, sortable, autocomplete, datepicker, dialog, and slider. Each page contains the HTML, CSS, and JavaScript code to implement a specific jQuery feature.

Uploaded by

Nikhil Mali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

1) JQuery for Demonstrating Fade-in & Fade-Out

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#fadeIn").click(function(){
$("p").fadeIn();
});
$("#fadeOut").click(function(){
$("p").fadeOut();
});
});
</script>
</head>
<body>
<p>RCP</p>
<p>IMRD</p>
<p>Shirpur</p>
<input type="button" id="fadeIn" value="fadein">
<input type="button" id="fadeOut" value="fadeout">
</body>
</html>
1
Page
2) JQuery for Demonstrating Slide Up , Slide down & Slide Toggle

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#div").slideUp();
});
$("#slide1").click(function(){
$("#div").slideDown();
});

$("#slide2").click(function(){
$("#div").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" id="slide" value="slideup">
<input type="button" id="slide1" value="slidedown">
<input type="button" id="slide2" value="slidetoggle">
<div id="div" style="background:purple;height:100px;width:100px;margin:6px;">
<p>RCP</p>
<p>IMRD</p>
<p>Shirpur</p>
</div>
</body>
</html>
2
Page
3) JQuery for Demonstrating Animate Method

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div").animate({height: "300px"});
});
$("#btn2").click(function(){
$("#div").animate({width: "500px"});
});
$("#btn3").click(function(){
$("#div").animate({marginLeft: "200px"},2000,"linear");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="height">
<input type="button" id="btn2" value="width">
<input type="button" id="btn3" value="left">
<div id="div" style="background:purple;height:100px;width:100px;margin:6px;">
</div>
</body></html>
3
Page
4) JQuery for Demonstrating Animation Chaining

<!DOCTYPE html>

<html>

<head>

<script src="jquery-3.1.1.min.js">

</script>

<script>

$(document).ready(function(){

$("#b1").click(function(){

$("p").animate({fontSize: '300%'},2000)

.animate({fontSize: '100%'},2000)

});

});

</script>

</head>

<body>

<p>RCPIMRD</p>

<input type="button" id="b1" value="change">

</body>

</html>

4
Page
5) JQuery for Demonstrating Animation Queuing

<!DOCTYPE html>

<html>

<head>

<script src="jquery-3.1.1.min.js">

</script>

<script>

$(document).ready(function(){

$("#b1").click(function(){

$("p").animate({fontSize: '300%'},2000)

$("p").animate({fontSize: '100%'},2000)

});

});

</script>

</head>

<body>

<p>RCPIMRD</p>

<input type="button" id="b1" value="change">

</body>

</html>

5
Page
6) Program for custom(User Defined) plugin

// myjq.jsfile

(function($){
$.fn.makeChange=function(){
this.css({color:"red",fontStyle:"Italic",fontSize:50});
return this;
};
}(jQuery));

//.html file

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js">
</script>
<script src="myjq.js">
</script>
<script>
$(document).ready(function(){
$("#b1").click(function()
{
$("p").makeChange();
}
)
});
</script>
</head>
<body>
<p>This is my plugin</p>
<input type="button" id="b1" value="show">
</body>
</html>

6
Page
7) Program for Jquery UI Draggable Interaction

<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>

<style>
#draggable { width: 150px;
height: 150px;
background:blue;
}
</style>

<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );

</script>
</head>
<body>

<div id="draggable">
<p >Drag me around</p>
</div>
</body>
</html>

7
Page
8) Program for Jquery UI Resizable Interaction

<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>

<style>
#resizable{ width: 150px;
height: 150px;
background:blue;
}
</style>

<link rel="stylesheet" href="jquery-ui.css">


<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );

</script>
</head>
<body>

<div id="resizable">
<p >Drag me around</p>
</div>
</body>
</html>

8
Page
9) Program for Jquery UI Selectable Interaction

<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>

#selectable .ui-selected { background: #F39814; color: white; }


</style>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#selectable" ).selectable();
} );

</script>
</head>
<body>

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

9
Page
10) Program for Jquery UI Sortable Interaction

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();

} );

</script>
</head>
<body>

<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>

</body>
</html>

10
Page
11) Program for demonstrating Autocomplete Widget

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>

<script>
$( function() {
varavailableTags = [
"ActionScript", "AppleScript", "Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
Enter Name <input type="text" id="tags">
</body>
</html>
11
Page
12) Program for demonstrating Datepicker Widget

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
</head>

<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>
</html>

12
Page
13) Program for demonstrating Dialog Widget

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
</head>

<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>

<div id="dialog" title="Basic dialog">


<p>This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

</body>
</html>
13
Page
14) Program for demonstrating Slider Widget

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
</head>

<script>
$( function() {
$( "#slider" ).slider();
} );
</script>
</head>
<body>

<div id="slider"></div>

</body>
</html>
14
Page
15) Demonstration of Ajax XMLHTTPRequest Object

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();
}
</script>
15

</body>
Page

</html>
info.txt
this is ajax demo
for demonstraing Ajax XMLHTTPRequest.

16) Demonstration of Ajax with XML Data

<html>
<body>

<h1>The XMLHttpRequest Object with XML Data</h1>

<p id="demo"></p>

<script>

var xhttp, xmlDoc, txt, x, i;


xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {


xmlDoc = this.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("Class");

for (i = 0; i < x.length; i++) {


txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "stud.xml", true);
xhttp.send();
</script>
16

</body>
Page

</html>
stud.xml
<College>
<Dept>
<TITLE>MCA</TITLE>
<Class>MCA-3</Class>
<Student>60</Student>
</Dept>

<Dept>
<TITLE>Dual MCA</TITLE>
<Class>Daul MCA-3</Class>
<Student>30</Student>
</Dept>

<Dept>
<TITLE>MBM</TITLE>
<Class>MBM2</Class>
<Student>50</Student>
</Dept>
</College>

17) Demonstration of Ajax GET Method

<html>
<head>
<scriptsrc="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){

$.get("demo.php",
{
name: "RCPIMRD",
17

city: "Shirpur"
},
Page

function(data,status){
alert("Data: " + data+ "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

demo.php :-

<?php
$name=$_GET['name'];
$city=$_GET['city'];
echo $name." ".$city;
?>

18) Demonstration of Ajax POST Method

<html>
<head>
<scriptsrc="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){

$.post("demo.php",
{
name: "RCPIMRD",
18

city: "Shirpur"
},
Page

function(data,status){
alert("Data: " + data+ "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

demo.php :-
<?php
$name=$_POST['name'];
$city=$_POST['city'];
echo $name." ".$city;
?>

19
Page

You might also like