I am trying to learn some things from AJAX and jQuery, i believe that it is a basic knowledge a programmer must开发者_开发百科 have. I am a self instructed so I am reading tutorials and examples to get in touch with these technologies as good as I can.
I saw this page www.soby.gr that I guess uses a XML feed for the main content ( is a groupon like aggregator ). My question is what did they use for their menu on the left of the page. When you click/select an option, the content on main page changes based on the criteria the user clicked on. For example SPA will show only the deals having SPA. What I like is how fast the content is filtered.
Can anyone give me some clues about how it is working and what technology is used for that fast content-changing?
Thank you all.
"Can anyone give me some clues about how it is working and what technology is used for that fast content-changing?"
Looks like all the content is already loaded in the DOM and they are just showing/hiding with Prototype / JavaScript.
This can be done very easily using jquery. There's a jquery built in function called .load('your div content page path')
so, when you click a menu, you can just load only the particular part. following is an example:
$(function(){
$("#1stmenu").live('click', function(){
$("#content").load('1stdivcontent.html');
return false;
});
$("#2ndmenu").live('click', function(){
$("#content").load('2nddivcontent.html');
return false;
});});
The main idea behind how the menu works is a basic filter. For example, all the "deal items" will be loaded initially, with multiple relevant classes being added to each item. Each link on the left will hide all the deal items in the main area then show all items with the the related class.
This basic functionality is quite easy to implement (edit) but more feature-rich plugins such as Isotope for jQuery exist too.
精彩评论