Example of add to shopping cart using draggable and droppable interaction of jQuery UI

<!–

Using this code you can add some books to shoping cart.When add one book the cart you can’t add this book to the cart again.More animation can be possible but i just test this one and this code is completely made by me.Hope this will be helpfull.

 –>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”jquery_ui_full/jquery-ui-1.8.16/themes/base/minified/jquery-ui.min.css” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery_ui_full/jquery-ui-1.8.16/ui/minified/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var text;
var selected;
$(‘span’).draggable({containment:’document’,revert:true,opacity:.4,
drag: function(){
text = $(this).html();
selected = $(this);
}
});
$(‘#drop’).droppable({accept:’span’,hoverClass:’highlight’,tolerance:’fit’,
drop: function(event,ui){

$(this).append(text);
selected.draggable({disabled:true})
}
});
});

</script>
<style type=”text/css”>
#drop
{
background-color:#9F9;
height:300px;
width:200px;
}
span
{
border:2px solid #0CF;
}
hr
{
width:100px;
height:4px;
background-color:#F0AE7D;
}
</style>
</head>

<body>
<caption>..::Books::..</caption>
<hr align=”left”/>
<span>Teach yourself C<br/></span>
<span>Teach youself C++<br/></span>
<span>Algorithm<br/></span>
<br />

<caption>..::ADD TO CART::..</caption>
<hr align=”left”/>
<div id=”drop”></div>
</body>
</html>

Advertisements

Progressbar widget in jQuery

<!–
Well, you may have notice that i am including files like jquery-ui.min.js without using only jquery-ui.js and so on. This is why because i am using minified versions and why?
cause that the size of minified version is less then the normal version.

Lets do some animation using progressbar

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”jquery_ui_full/jquery-ui-1.8.16/themes/base/minified/jquery-ui.min.css” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery_ui_full/jquery-ui-1.8.16/ui/minified/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

var a = 0;
function increase()
{
a = ++a;

$(‘#spa’).progressbar({ value: a });
$(‘#a’).text(a);
if(a >= 100){
clearInterval(interval);
a = 0;
}
}

$(‘#b1’).click(function(){

interval = setInterval(increase,100);
$(‘#b2’).click(function(){

clearInterval(interval);

});

});

});
</script>
<style type=”text/css”>
#spa
{
width:500px;
}
</style>
</head>

<body>
<input type=”button” value=”start” id=”b1″/><input type=”button” value=”stop” id=”b2″/>
<div id=”spa”></div>
<div id=”a”></div>
</body>
</html>

Accordion widget in jQuery

<!–

Don’t forget to link the css file.

–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”jquery_ui_full/jquery-ui-1.8.16/themes/base/minified/jquery-ui.min.css” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery_ui_full/jquery-ui-1.8.16/ui/minified/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#accordion’).accordion({active:false,collapsible: true,animated: ‘bounceslide’, icons: { ‘header’: ‘ui-icon-plus’, ‘headerSelected’: ‘ui-icon-minus’ }});

});

</script>
</head>

<body>
<div id=”accordion”>
<h3><a href=””>Author</a></h3>
<div> Author is tanvir </div>
<h3><a href=””>Address</a></h3>
<div> I live no where </div>
<h3><a href=””>Qualification</a></h3>
<div> Are u crazy!!, i m not gonna talk about my qualification <br/>Hello<br/>Hello Again</div>
</div>
</body>
</html>

resizable() interaction in jQuery UI

<!–

when you are goning to use the resizable interaction don’t forget to link up its css file.If you missed it the result will not be shown precisely.

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link type=”text/css” rel=”stylesheet” href=”ui/jquery.ui.resizable.css” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”ui/ui/jquery-ui.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#hell’).resizable({animate:true,animateDuration:1000,animateEasing:’linear’,ghost:true,maxHeight:400,maxWidth:400,minHeight:100,minWidth:100,
start: function(){
// wher the resize is start
},
stop: function(){
// when the resize is stop
},
resize: function(){
// when it resizing
}

}
);

});

</script>
<style type=”text/css”>
#hell
{
background-color: #0CF;
height:150px;
width:200px;
}
</style>
</head>

<body>
<div id=”hell”> </div>
</body>
</html>

draggable() interaction in jQuery UI

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link type=”text/css” rel=”stylesheet” href=”” />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”ui/ui/jquery-ui.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#hell’).draggable({containment:’parent’,revert:true,revertDuration:1000,helper:’clone’,snap:true,

start:function(){

// use the functionality when dragging just start

},
drag: function(){

// some code can be written in here and the output will be shown while dragging

},
stop: function(){

// when dragging ends

}

}

);

});

</script>
<style type=”text/css”>
#main
{
height:600px;
width:900px;
border:2px solid #666;
}
</style>
</head>

<body>
<div id=”main”>
<span id=”hell”>You can drag me</span>
</div>
</body>
</html>

What is jQuery UI and how to use

jQuery UI stands for jQuery user interface is a javascript library that provides interactions, widgets, effects that gives your website more dynamic look.Any one can build dynamic application.
This makes creating dynamic web pages lot easier.

so how can i use these !!
well then ..

first click the below link and download the stable version of jQuery UI.

LINK:    http://jqueryui.com/home

In the downloaded zip file you will get jquery-ui.js that you have to include in your script just like including jQuery.js

But keep in your mind that before you include the jquery-ui.js file you must include jquery.js file.

It will more clear to you if you look an example …

One last thing is you may become worried about the options and it’s values and other events .. Well don’t be worried about this you will not have  to memorize all this because you can take help and can understand all of this from the below site:

LINK:    http://jqueryui.com/demos/