Včera jsem vám ukázal, jak připojit AJAX spinner vedle prvku formuláře pomocí mých milovaných MooTools. Dnes vám ukážu, jak implementovat stejnou funkci pomocí jQuery.
Zobrazit ukázkuXHTML
<select class="ajax"> <option value="">-- Select a Site--</option> <option value="David Walsh Blog">David Walsh Blog</option> <option value="Script & Style">Script & Style</option> <option value="Band Website Template">Band Website Template</option> </select> <br /><br /> <input type="text" id="my-text" class="ajax" />
Naším cílem budou prvky s třídou CSS „ajax“.
JavaScript jQuery
$(document).ready(function() { //create image $('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body'); //for every field change $('.ajax').change(function() { //get element position var position = $(this).offset(); //position image $('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn(); //ajax $.post('<?php echo $_SERVER['REQUEST_URI']; ?>',{ ajax:1, value: $(this).val() },function() { $('#spinner').fadeOut(); }); }); });
Vložíme obrázek spinneru do stránky a přemístíme jej podle toho, které pole provádí požadavek. Velmi jednoduché!
Zobrazit ukázkuNení JavaScript zábavný? Ach jo...a také to zlepšuje uživatelský dojem.