Jqeury ajax plugins
Upcoming SlideShare
Loading in...5
×
 

Jqeury ajax plugins

on

  • 385 views

 

Statistics

Views

Total Views
385
Views on SlideShare
385
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jqeury ajax plugins Jqeury ajax plugins Presentation Transcript

    • jQueryajax & pluginsInbal 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
    • 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
    • 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
    • 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
    • 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