Jqeury ajax plugins

437 views
409 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jqeury ajax plugins

  1. 1. jQueryajax & pluginsInbal Geffen
  2. 2. 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
  3. 3. ajax using jQuery - $.post function MakeRequest() { var url = "ajax.php"; $.post(url, ,function(data) { $("#ResponseDiv").html(data).show(); }); }Inbal Geffen
  4. 4. ajax using jQuery - $.get function MakeRequest() { var url = "ajax.php"; $.get(url, ,function(data) { $("#ResponseDiv").html(data).show(); }); }Inbal Geffen
  5. 5. ajax using jQuery - $.ajax function MakeRequest() { $.ajax({ type: "GET", url: "ajax.php", success: function (result) { $("#ResponseDiv").html(result); }, error: function (error) { alert(error); } }); }Inbal Geffen
  6. 6. 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
  7. 7. 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
  8. 8. jQuery plugins <!--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>Inbal Geffen
  9. 9. jQuery plugins <!--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>Inbal Geffen

×