jqeury ajax plugins
DESCRIPTION
TRANSCRIPT
jQueryajax & plugins
Inbal Geffen
ajax before jQuery
function getXMLHttp(){ var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp;
}
function MakeRequest(){ var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) {
HandleResponse(xmlHttp.responseText); } } xmlHttp.open("GET", "ajax.php", true); xmlHttp.send();}
function HandleResponse(response) { document.getElementById('ResponseDiv').innerHTML = response;}
Inbal Geffen
ajax using jQuery - $.post
function MakeRequest() { var url = "ajax.php"; $.post(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); });}
Inbal Geffen
ajax using jQuery - $.get
function MakeRequest() { var url = "ajax.php"; $.get(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); });}
Inbal Geffen
function MakeRequest() {$.ajax({type: "GET",url: "ajax.php",success: function (result) { $("#ResponseDiv").html(result);},error: function (error) {alert(error);}});}
ajax using jQuery - $.ajax
Inbal Geffen
jQuery plugins
● Many plugins exist in the web
● http://archive.plugins.jquery.com - main jQuery plugins archive
● Plugins usually include instructions and example code for how to use them
● http://www.simplefadeslideshow.com/
● http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/
● http://plugins.in1.com/socialist/demo
● http://nbartlomiej.github.com/foggy/
● http://tsvensen.github.com/equalize.js/
Inbal Geffen
jQuery plugins
<!--Add the jQuery.js and the plugin.js-->
<head><title>Example</title><script src="jquery.js" type="text/javascript"></script><script src="jquery.plugin.js" type="text/javascript"></script></head>
<!--Carousel example Add the jQuery.js and the plugin.js-->
<script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
Inbal Geffen
<!--For each image we want to add to the carousel we need to add this kind of div-->
<div class="carousel-feature"><img class="carousel-image" src="images/flowers1.jpg" alt="Image1" /><div class="carousel-caption">
<p>Amazing flower</p></div>
</div>
jQuery plugins
Inbal Geffen
<!--All divs need to be nested under div with id="carousel" -->
<body><div id="carousel-container">
<div id="carousel"><div class="carousel-feature">
<img class="carousel-image" src="images/flowers1.jpg" alt="Image1" /><div class="carousel-caption">
<p>Amazing flower</p></div>
</div><div class="carousel-feature">.....
</div></div></body>
jQuery plugins
Inbal Geffen