Scribd
Upload
104 views88 pages

JQUERY Notes

The document embeds jQuery and hides a paragraph element using jQuery. It selects HTML elements and applies CSS styles using jQuery selectors. It responds to events like click, mouseover by changing element styles. It also changes element content, text and attributes using jQuery.

Uploaded by

vaishnavi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
104 views88 pages

JQUERY Notes

The document embeds jQuery and hides a paragraph element using jQuery. It selects HTML elements and applies CSS styles using jQuery selectors. It responds to events like click, mouseover by changing element styles. It also changes element content, text and attributes using jQuery.

Uploaded by

vaishnavi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 88

<!

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
embedding jQUERY and syntax
</title>
<!--
<script src="js/jquery-1.11.2.js">
</script>
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
</head>
<body>
<p id="myParagraph">
jQUERY.
</p>
<script >
$(function(){
$("p").hide();

}
);
</script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
Select html elements
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
}
.greenbox{
background-color: #31af37;
height: auto;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<div class="bluebox">
<p>
Facebook is
<span id="great">
great
</span>
</p>
<p class="orange">
Paragraph2
</p>
<p>
Paragraph3
</p>
</div>
<div class="yellowbox">
<p>
Apple.
</p>
<ul>
<li>
BMW
</li>

<li>
Audi
</li>

<li>
Mercedes
</li>

</ul>
<p>
<a href="http://www.google.com">
This is a link
</a>
</p>
<p>
<a href="http://www.microsoft.com">
This is another link
</a>
</p>
</div>
<p>
a paragraph
</p>
<div class="greenbox">
<p>
Microsoft.
</p>

<ul>
<li>
BMW
</li>

<li>
Audi
</li>

<li>
Mercedes
</li>

</ul>
<table>
<tr>
<th>
Phone Make
</th>
<th>
Model
</th>
<th>
Model
</th>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>

</table>

<p>
Type your name:
<input>
<button type="submit">
Submit
</button>
</p>

</div>
<script>
$(function(){
$("*").css("font-size", '16px');

//$("p").css("text-align","center");
//$("div > p").css("text-align","center");
//$("div ~ p").css("text-align","center");
$("div p").css("text-align","center");

$("#great").css("background-color","#6acb57");
$(".orange").css("background-color","orange");
$("div.bluebox").css("font-family","sans-serif");

$("p:first-child, p:last-child").css("text-
decoration","underline");

$("[href]").css("color","red");

$("li:first-child, li:last-
child").css("background-color","#bbf362");

$("tr:even").css("background-color","#e1d446");
$("tr:odd").css("background-color","#811c90");

$(":input").css("background-color","#1da492");
$(":Submit").css("background-color","#7979eb");
$("div:has(table)").css("background-color","rgba(
107, 180, 198, 0.697 )");
}
);
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
respond to events
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
}
.greenbox{
background-color: #31af37;
height: auto;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<div class="bluebox">
<p>
Facebook is
<span id="great">
great
</span>
</p>

<p class="orange">
Paragraph 2
</p>

<p>
Paragraph 3
</p>

</div>
<div class="yellowbox">
<p>
Apple.
</p>
<ul>
<li>
BMW
</li>

<li>
Audi
</li>
<li>
Mercedes
</li>

</ul>
<p>
<a href="http://www.google.com">
This is a link.
</a>
</p>
<p>
<a href="http://www.google.com" target="blank">
This is another link.
</a>
</p>
</div>
<div class="greenbox">
<p>
Microsoft.
</p>

<ul>
<li>
BMW
</li>

<li>
Audi
</li>

<li>
Mercedes
</li>

</ul>
<table>
<tr>
<th>
Phone Make
</th>
<th>
Model
</th>
<th>
Storage
</th>
</tr>

<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
16Go
</td>
</tr>
</table>
</div>
<p>
Type your name:
</p>
<input id="input">
<button type="submit" id="submit">
Submit
</button>
<script>
$(function(){
// $("p").click(function(){
//// $("p").css("background-color","rgba( 206,
152, 230, 0.697 )");
// $(this).css("background-color","rgba(
206, 152, 230, 0.697 )");
// });

$("p").mouseover(function(){
$(this).css("background-color","rgba( 189, 132,
214, 0.697 )");

}
);
$("p").mouseout(function(){
$(this).css("background-color","");

}
);
$("input").focus(function(){
$(this).css("background-color","rgba( 210, 195,
131, 0.697 )");

}
);
$("input").blur(function(){
$(this).css("background-color","#ffffff");

}
);
$("input").keyup(function(){
$(this).css("background-color","rgba( 39, 190,
162, 0.697 )");

}
);
$("#submit").click(function(){
$("#input").css("background-color","#ffffff");
$("#input").val("");
}
);

}
);
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
change content and attributes
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: auto;
width: auto;
}
.great{
background-color: #5a3479;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<button id="changeFacebook">
Change Facebook text.
</button>
<button id="changeApple">
Change Apple Html.
</button>
<button id="changeInput">
Change Input value.
</button>
<button id="changeMicrosoft">
Change Microsoft.
</button>
<button id="addText">
Add text.
</button>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great">
great
</span>
.
</p>

</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>

</div>
<div class="greenbox" id="microsoft">
<p id="microsoftParagraph">
Microsoft.
</p>
<p>
<a href="http://www.microsoft.com"
title="microsoft" id="microsoftLink">
Microsoft Link.
</a>
</p>
</div>
<p>
Enter your name:
<input>
</p>
</body>
<script>
$(function(){
$("#changeFacebook").click(function(){
$("#facebook").text("This is facebook.");

}
);
$("#changeApple").click(function(){
$("#apple").html("<p>This is Apple</p><p>New IOS
available</p>");
}
);
$("#changeInput").click(function(){
$("input").val("Sam");

}
);
$("#changeMicrosoft").click(function(){
$("#microsoftLink").attr({"href" :
"http://www.google.com", "title" : "Google"});
}
);
$("#addText").click(function(){

//$("#microsoft").append("<ul><li>BMW</li><li>Audi</li><li
>Mercedes</li>");

//$("#microsoft").prepend("<ul><li>BMW</li><li>Audi</li><l
i>Mercedes</li>");
$("#microsoftParagraph").after("<p>New
paragraph.</p>");
}
);

}
);
</script>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
change content and attributes
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:300px;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;

}
.sans-serif{
font-family: sans-serif;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<button id="changeFacebook">
Change Facebook
</button>
<button id="changeApple">
Change Apple
</button>
<button id="changeMicrosoft">
Change Microsoft
</button>
<button id="showMicrosoft">
Show Microsoft
</button>
<button id="changeGreat">
Change Great
</button>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great.
</span>
</p>

</div>
<div class="yellowbox sans-serif" id="apple">
<p>
Apple.
</p>

</div>
<div class="greenbox" id="microsoft">
<p id="microsoftParagraph">
Microsoft.
</p>
<p>
<a href="http://www.microsoft.com"
title="microsoft" id="microsoftLink">
Microsoft Link.
</a>
</p>
</div>
<p>
Enter your name:
<input>
</p>
</body>
<script>
$(function(){
$("#changeFacebook").click(function(){
$("#facebook").css("width",100*Math.random()-50 +
$("#facebook").width());
$("#facebook").addClass("greenbox");
//window.alert($("#facebook").innerHeight());
//window.alert($("#facebook").outerHeight());
}
);
$("#apple").click(function(){
$("#apple").removeClass("sans-serif");
$("#apple").css("position","absolute");
$("#apple").css({'top': 200*Math.random(), 'left':
200*Math.random(), 'background-color': 'rgb(' +
Math.floor(256*Math.random()) + ',' +
256*Math.floor(256*Math.random()) + ',' +
Math.floor(256*Math.random()) + ')'}
);
}
);
$("#changeMicrosoft").click(function(){
$("#microsoft").toggleClass("greenbox");

}
);
$("#microsoft").dblclick(function(){
$(this).hide();

}
);
$("#showMicrosoft").click(function(){
$("#microsoft").show();

}
);
$("#changeGreat").click(function(){
$("#great").wrap("<div></div>");

}
);
}
);
</script>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>
jQuery effects
</title>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:300px;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.great{
background-color: #5a3479;
}
p{
margin: 0;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<button id="fadeOutFacebook">
FadeOut Facebook
</button>
<button id="fadeInFacebook">
FadeIn Facebook
</button>
<button id="fadeToggle">
FadeToggle
</button>
<button id="animate">
Animate
</button>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>

</div>
<div class="greenbox" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<p>
Enter your name:
<input>
</p>
<script>
$(function(){
$("#fadeOutFacebook").click(function(){
$("#facebook").fadeOut(3000,function(){
window.alert("Hi!")}
);
}
);

$("#fadeInFacebook").click(function(){
$("#facebook").fadeIn();
}
);

$("#fadeToggle").click(function(){
$("#facebook").fadeToggle(1000);
$("#apple").fadeToggle(2000);
$("#microsoft").fadeToggle(3000);
}
);

//$("#animate").click(function(){
//$("#facebook").animate({width:'200px',
height:'50px', opacity: '0.5'},1000);
//});
$("#animate").click(function(){
$("#facebook").animate({
width:'200px'}
, "slow");

$("#facebook").animate({
height:'300px'}
, "slow");

$("#facebook").animate({
height:'100px'}
, "slow");
$("#facebook").delay(3000).animate({
width:'300px'}
, "slow");

}
);
}
);
</script>
</body>

</html>
<!—somedata.txt-->
<p id="paragraph1">This is some data.</p>
<p id="paragraph2">This is some other data.</p>

<!--7.ajax.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Ajax
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
</head>

<body>
<button>
Button
</button>
<div class="bluebox" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>
<div class="yellowbox" id="apple">
<p>
Apple.
</p>

</div>
<div class="greenbox" id="microsoft">
<p>
Microsoft.
</p>
<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<p>
Enter your name:
<input>
</p>
<script>
$(function(){
$("#facebook").load("ajax/somedata.txt");
$("#apple").load("ajax/somedata.txt #paragraph1");

//$("button").click(function(){
// $.ajax({url : "ajax/somedata.txt", success :
function(data){
// $("#microsoft").html(data);
// }
//
// });
//});

$("button").click(function(){
$.ajax({
url : "ajax/somedata.txt"}
).done(function(somedata){
$("#microsoft").html(somedata);

);
}
);

}
);
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
jquery ui introduction
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/blitzer/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>
<div class="yellowbox ui-corner-all" id="apple">
<p>
Apple.
</p>

</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>
<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<div class="ui-state-error"
style="height:100px;margin-top:20px">
<p>
Error Message.
</p>

</div>
<script>
$(function(){
$("#facebook").draggable();
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
draggable and droppable
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
#droppable{
background-color: #b513eb;
height: 300px;
width:auto;
margin-top: 20px;
color: white;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>
<div class="yellowbox ui-corner-all" id="apple">
<ul id="list">
<li>
eggs
</li>

<li>
milk
</li>

<li>
bread
</li>

</ul>

</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<div id="droppable" class="ui-corner-all">
<p>
You can drop things here.
</p>
</div>
<script>
var message =["Please!","Leave me alone!","Drop
me!","Come on!"];
$(function(){
$("#facebook").draggable();
$("#apple").draggable({
axis: "y"
}
);
$("#microsoft").draggable({
revert: true,
start: function(){
$("#facebook").css("background-
color","#43c8d4");

}
,
drag: function(){
$("#microsoft").css("background-color",'rgb('
+ Math.floor(256*Math.random()) + ',' +
Math.floor(256*Math.random()) + ',' +
Math.floor(256*Math.random()) + ')');

$("#microsoft").find("p").html(message[Math.floor(4*Math.r
andom())]);
}
,
stop: function(){
$("#apple").css("background-color","#b1e269");
$("#microsoft").html('<p>Finally!</p>')
}
}
);
$("#droppable").droppable({
drop: function(event, ui){
$(this).css("background-color","#21dd85");
$(this).find("p").remove();

$("<div></div>").text(ui.draggable.text()).appendTo(this);

}
,
accept: "#list li"
}
);
$("#list").find("li").draggable({
helper: "clone",
appendTo: "body"
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
draggable and droppable
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
#container{
width: 300px;
height: 300px;
border-style: dotted;
}

</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>

<div id="container">
<div class="yellowbox ui-corner-all" id="apple">
<p>
Apple.
</p>
</div>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<script>
$(function(){
$("#facebook").resizable({
maxHeight: 200,
minHeight: 50,
minWidth: 100,
maxWidth: 300,
aspectRatio: 4/3,
ghost: true,
alsoResize: "#microsoft"
}
);

$("#apple").resizable({
containment: "#container",
animate: true
}
);
}
);

</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
selectable
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
padding: 10px;
}
.greenbox{
background-color: #31af37;
height: auto;
width: auto;
}
#great{
background-color: #5a3479;

}
li{
font-size: 2em;
margin-bottom: 5px;
text-align: center;
}
#list .ui-selecting{
background: #740da0;

}
#list .ui-selected{
background: #953ebb;
color: white;
}

</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>
</div>
<div class="yellowbox ui-corner-all" id="apple">
<ul id="list">
<li class="ui-state-default">
Audi
</li>

<li class="ui-state-default">
BMW
</li>

<li class="ui-state-default">
Mercedes
</li>

</ul>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<script>
$(function(){
$("#list").selectable({
stop: function(){
$(".ui-selected").each(function(){

$('<p></p>').text($(this).text()).appendTo("#microsoft");
}
);

}
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
sortable
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
padding: 10px;
}
.greenbox{
background-color: #31af37;
height: auto;
width: auto;
padding: 10px;
}
#great{
background-color: #5a3479;

li{
font-size: 2em;
margin-bottom: 5px;
text-align: center;
}
.connectedList{
border: 1px solid #eee;
min-height: 20px;
}

</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook is
<span class="great" id="great">
great
</span>
.
</p>

</div>
<div class="yellowbox ui-corner-all" id="apple">
<ul id="list1" class="connectedList">
<li class="ui-state-default">
Audi
</li>
<li class="ui-state-default">
BMW
</li>
<li class="ui-state-default notSortable">
Mercedes
</li>
</ul>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>
<ul id="list2" class="connectedList">
<li class="ui-state-default">
Ford
</li>
<li class="ui-state-default">
Toyota
</li>
<li class="ui-state-default notSortable">
Ferrari
</li>
</ul>
</div>
<script>
$(function(){
$("#list1").sortable({
placeholder: "ui-state-highlight",
cancel: ".notSortable"
}
);
$("#list2").sortable();
$("#list1, #list2").sortable({
connectWith: ".connectedList"
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
accordion
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
</head>

<body>

<div id="resizer" class=".ui-widget-content">


<div class="bluebox ui-corner-all" id="facebook">
<h3>
Section 1
</h3>
<div>
<p>
Content 1
</p>
<p>
Content 1
</p>
<p>
Content 1
</p>
<p>
Content 1
</p>
<p>
Content 1
</p>
<p>
Content 1
</p>

</div>
<h3>
Section 2
</h3>
<div>
<p>
Content 2
</p>
</div>
<h3>
Section 3
</h3>
<div>
<p>
Content 3
</p>
</div>
</div>

</div>

<div class="yellowbox ui-corner-all" id="apple">


<p>
Apple.
</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>

<p>
<a id="microsoftLink"
href="http://www.microsoft.com" title="Microsoft">
Microsoft link.
</a>
</p>

</div>
<script>
$(function(){
$("#facebook").accordion({
collapsible: true,
icons: {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
}
,
heightStyle: "fill"

}
);

$("#resizer").resizable({
resize: function(){
$("#facebook").accordion("refresh");

}
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autocomplete</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js"></script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/smoothness/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js"></script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;
}
.ui-autocomplete{
max-height: 100px;
overflow-y: auto;
max-width: 200px;
overflow-x: hidden;
}
#city{
width: 200px;
}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>Facebook.</p>
<p>Input your city: <input id="city"></p>
</div>
<div class="yellowbox ui-corner-all" id="apple">
<p>Apple.</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>Microsoft.</p>
<p><a id="microsoftLink" href="http://www.microsoft.com"
title="Microsoft">Microsoft link.</a></p>
</div>

<script>
$(function(){
$("#city").autocomplete({
source:
["Looooooooooooooondon","London","London","London","London
","London", "Paris", "Paris", "Paris", "Paris", "Paris",
"Paris", "Madrid", "Madrid", "Madrid", "Madrid", "Madrid"]
});
});
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
button
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/blitzer/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<div id="checkboxes">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
Audi
</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">
BMW
</label>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">
Mercedes
</label>
</div>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">
Checkbox
</label>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<form>
<div id="radioBoxes">
<input type="radio" id="radioBox1"
name="radioBoxes">
<label for="radioBox1">
Ford
</label>
<input type="radio" id="radioBox2"
name="radioBoxes">
<label for="radioBox2">
Toyota
</label>
<input type="radio" id="radioBox3"
name="radioBoxes">
<label for="radioBox3">
Ferrari
</label>
</div>

</form>
</div>
<button id="button1">
Button1
</button>
<button id="button2">
Button2
</button>
<button id="button3">
Button3
</button>
<script>
$(function(){
$("#button1").button();
$("#button2").button({
icons: {
primary: "ui-icon-folder-open"
}
,
text: false
}
);
$("#button3").button({
icons: {
primary: "ui-icon-mail-closed",
secondary: "ui-icon-carat-1-e"
}
}
);
$("#myCheckbox").button();
$("#checkboxes").buttonset();
$("#radioBoxes").buttonset();
}
);
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
datepicker
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/blitzer/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Flight departure date:
<input id="departure">
</p>
<p>
Flight return date:
<input id="return">
</p>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<p>
Apple.
</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>
</div>
<script>
$(function(){
$("#departure").datepicker({
showAnim: "fadeIn",
changeYear: true,
numberOfMonths: 1,
dateFormat: "d M, y",
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
buttonText: "Choose your departure date.",
minDate: +1,
maxDate: "+12M +10D",
onClose: function(selectedDate){
$("#return").datepicker("option", "minDate",
selectedDate)
}
,
showWeek: true
}
);
$("#return").datepicker({
dateFormat: "d M, y"
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
dialog
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#great{
background-color: #5a3479;

}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook.
</p>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<p>
Apple.
</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>
</div>
<div id="myDialog" title="This is a dialog.">
<p>
Welcome to our page.
</p>

</div>
<div id="confirmation" title="Leave the page?">
<p>
<span class="ui-icon ui-icon-alert"
style="float:left">
</span>
You will lose all unsaved work. Are you sure?
</p>

</div>
<button id="open">
Open Dialog.
</button>
<button id="goToPreviousPage">
Go to previous page.
</button>
<script>
$(function(){
$("#myDialog").dialog({
autoOpen: false
}
);
$("#open").click(function(){
$("#myDialog").dialog("open");
}
);
$("button").button();
$("#confirmation").dialog({
autoOpen: false,
modal: true,
buttons: {
"Go to previous page" : function(){
window.history.back();
}
,
Cancel: function(){
$(this).dialog("close");
}
}
}
);
$("#goToPreviousPage").click(function(){
$("#confirmation").dialog("open");
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
menu
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
.ui-menu{
width: 100px;

</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<ul id="continents">
<li>
Europe
<ul>
<li>
France
</li>
<li>
UK
<ul>
<li>
England
</li>
<li>
Scotland
</li>
<li>
Wales
</li>
<li>
Northern Ireland
</li>
</ul>

</li>
<li>
Spain
</li>
</ul>
</li>

<li>
Africa
</li>

<li>
America
</li>

<li>
Asia
</li>

<li>
Australia
</li>

</ul>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<ul id="continents2">
<li class="ui-widget-header">
Europe
</li>
<li>
France
</li>
<li>
UK
<ul>
<li>
England
</li>
<li>
Scotland
</li>
<li>
Wales
</li>
<li>
Northern Ireland
</li>
</ul>

</li>
<li>
Spain
</li>

<li class="ui-widget-header">
Africa
</li>

<li class="ui-widget-header">
America
</li>

<li class="ui-widget-header">
Asia
</li>

<li class="ui-widget-header">
Australia
</li>

</ul>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft.
</p>
</div>
<script>
$(function(){
$("#continents").menu();
$("#continents2").menu();
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
progressbar
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
margin-bottom: 20px;
}

#label{
position: absolute;
left: 45%;
}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook
</p>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<p>
Apple.
</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft
</p>
</div>
<div id="progress">
<div id="label">
</div>

</div>
<button>
Run
</button>
<script>
$(function(){
$("#progress").progressbar({
value: 0
}
);
var x = 0;
$("button").click(function(){
$("#label").text("In progress ...");

setTimeout(function(){
var progress = setInterval(function(){
x++;
$("#label").text(x+ '%');
$("#progress").progressbar("option",
"value", x);
if(x>99){
clearInterval(progress);

}
}
,100);
}
,1000);
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
slider
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
margin-bottom: 30px;
}
#sliderValue, #mileageRange{
color: #2074cf;
border: 0;
font-weight: bold;
}

</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
Facebook.
</p>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<p>
Apple.
</p>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft
</p>
</div>
<div id="slider">
</div>
<label for="slider">
Value:
</label>
<input type="text" id="sliderValue" readonly>

<div id="rangeSlider">
</div>
<label for="rangeSlider">
Mileage:
</label>
<input type="text" id="mileageRange" readonly>
<script>
$(function(){
$("#slider").slider({
slide: function(event,ui){
$("#sliderValue").val(ui.value);
}
,
min: 0,
max: 25
}
);
$("#sliderValue").val(0);

$("#rangeSlider").slider({
range: true,
min: 0,
max: 100000,
step: 1000,
values: [0, 10000],
slide: function(event,ui){
$("#mileageRange").val(
ui.values[0]+ " miles - " + ui.values[1] + "
miles"
);
}
}
);
$("#mileageRange").val(
$("#rangeSlider").slider("values",0)+ " miles - "
+ $("#rangeSlider").slider("values",1) + " miles"
);
}
);
</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
more widgets
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: auto;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}

</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<p>
<label for="myInput">
Enter a value:
</label>
<input id="myInput" name="myInput" value="30"
title="Please enter a value.">

</p>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<ul>
<li>
<a href="#tab1">
tab 1
</a>
</li>

<li>
<a href="#tab2">
tab 2
</a>
</li>

<li>
<a href="#tab3">
tab 3
</a>
</li>

</ul>
<div id="tab1">
<p>
content 1
</p>
</div>
<div id="tab2">
<p>
content 2
</p>
</div>
<div id="tab3">
<p>
content 3
</p>
</div>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft
</p>
</div>
<script>
$(function(){
$("#myInput").spinner({
min: 0,
max: 100,
step: 3
}
);

$("#apple").tabs({
collapsible: true,
event: "mouseover"
}
);
$("#apple").tabs().find(".ui-tabs-nav").sortable({
axis: "x"
}
);
//$(document).tooltip();
$("#myInput").tooltip({
show: {
effect: "explode"}
}
);
}
);

</script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
select menu
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jq
uery.min.js">
</script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
3/themes/start/jquery-ui.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3
/jquery-ui.min.js">
</script>
<style>
.bluebox{
background-color: #3A5795;
color: white;
height: 100px;
width:auto;
}
.yellowbox{
background-color: rgb(222, 224, 85);
height: 100px;
width: auto;
}
.greenbox{
background-color: #31af37;
height: 100px;
width: auto;
}
#strength, #strength2{
width: 200px;

}
</style>
</head>

<body>
<div class="bluebox ui-corner-all" id="facebook">
<label for="strength">
Select your biggest strength:
</label>
<br />
<form>
<select id="strength" name="strength">
<option>
Motivation
</option>
<option selected="selected">
Creativity
</option>
<option>
Curiosity
</option>
<option>
Integrity
</option>
<option>
Modesty
</option>
</select>

</form>
</div>

<div class="yellowbox ui-corner-all" id="apple">


<label for="strength2">
Select your biggest strength:
</label>
<br />
<form>
<select id="strength2" name="strength2">
<optgroup label="Group 1">
<option>
Motivation
</option>
<option selected="selected">
Creativity
</option>
<option>
Curiosity
</option>

</optgroup>
<optgroup label="Group 2">
<option>
Integrity
</option>
<option>
Modesty
</option>
</optgroup>
</select>

</form>
</div>
<div class="greenbox ui-corner-all" id="microsoft">
<p>
Microsoft
</p>
</div>
<script>
$(function(){
$("#strength").selectmenu();
$("#strength2").selectmenu();
}
);

</script>
</body>

</html>

You might also like