Jqeury ajax plugins
10 Feb 2013•0 j'aime•366 vues
Télécharger pour lire hors ligne
Signaler
Inbal GeffenSuivre
Contenu connexe
Tendances
Introducing jQueryWildan Maulana
Sprout core and performanceYehuda Katz
Dart and AngularDartLoc Nguyen
AngulrJS OverviewEyal Vardi
Aplicacoes dinamicas Rails com BackboneRafael Felix da Silva
jQuery and Rails, Sitting in a Treeadamlogic
En vedette
Jquery mobile2Inbal Geffen
J querypracticeInbal Geffen
jQuery mobile UXInbal Geffen
J queryuiInbal Geffen
Jqeury ajax pluginsInbal Geffen
Jquery2Inbal Geffen
Similaire à Jqeury ajax plugins
Building iPhone Web Apps using "classic" DominoRob Bontekoe
Clean JavascriptRyunosuke SATO
jQueryDileep Mishra
Rich Portlet Development in uPortalJennifer Bourey
jQuery Internals + Cool Stuffjeresig
jQuery: Events, Animation, AjaxConstantin Titarenko
Jqeury ajax plugins
- 1. jQuery ajax & plugins Inbal Geffen
- 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. ajax using jQuery - $.post function MakeRequest() { var url = "ajax.php"; $.post(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
- 4. ajax using jQuery - $.get function MakeRequest() { var url = "ajax.php"; $.get(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
- 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. 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. 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. 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. 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