首页>>Jquery文字>>jquery随机加载xml内容(2013-11-22)

jquery随机加载xml内容

jquery随机加载xml内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div id="list">  
  2.     </div>    

 data.xml

XML/HTML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <items>  
  3.   
  4.     <item>  
  5.         <url>http://freejs.net/article_fenye_49.html</url>  
  6.         <image>http://freejs.net/demo/49/demo.jpg</image>         
  7.         <title>Jquery, Ajax无刷新翻页,支持跳转页面</title>  
  8.         <desc>freejs已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。  
  9. 数据库与本站其他翻页的相同，本例和《jquery 无刷新翻页》均是非常实用的案例，而且本例更简单易懂</desc>  
  10.     </item>   
  11.   
  12.     <item>  
  13.         <url>http://freejs.net/article_jiaodiantu_82.html</url>  
  14.         <image>http://freejs.net/demo/82/demo.jpg</image>         
  15.         <title>右侧带透明遮罩效果文字简要的jQuery焦点图代码</title>  
  16.         <desc>css文件请到演示页面查看源码</desc>  
  17.     </item>   
  18.   
  19.   
  20.     <item>  
  21.         <url>http://freejs.net/article_daohangcaidan_67.html</url>  
  22.         <image>http://freejs.net/demo/67/demo.jpg</image>         
  23.         <title>类似京东和易迅的菜单-可以折叠隐藏的导航菜单</title>  
  24.         <desc>很流行的菜单，很多购物网站在使用，包括京东，新蛋中国，易迅都是类似的  
  25. 演示地址可以存源码</desc>  
  26.     </item>   
  27.   
  28.     <item>  
  29.         <url>http://freejs.net/article_tabbiaoqian_29.html</url>  
  30.         <image>http://freejs.net/demo/29/demo.jpg</image>         
  31.         <title>jquery实现简单的Tab切换菜单</title>  
  32.         <desc>jquery实现简单的Tab切换菜单</desc>  
  33.     </item>   
  34.   
  35.     <item>  
  36.         <url>http://www.freejs.net</url>  
  37.         <image>http://freejs.net/images/logo.png</image>          
  38.         <title>freejs-Web演示,导航菜单,TAB标签,焦点图,图片特效,分页,表单</title>  
  39.         <desc>导航菜单,TAB标签,焦点图,图片特效,分页,表单等各种jquery代码演示</desc>  
  40.     </item>   
  41.   
  42.   
  43.   
  44. </items>  

 readxml.js

JavaScript Code
  1. /* 
  2. Learn How to Read, Parse and Display XML Data in Random Order with jQuery 
  3. Author: Kevin Liew 
  4. Website: http://www.queness.com 
  5. */  
  6.   
  7. XMLLIST = {  
  8.   
  9.     //general settings  
  10.     xml: 'data.xml?' + Math.random(0,1), //solve ie weird caching issue  
  11.     display: '3', //number of items to be displayed  
  12.     random: true, //display randomly {true|false}  
  13.     appendTo: '#list', //set the id/class to insert XML data  
  14.       
  15.     init: function () {  
  16.       
  17.         //jQuery ajax call to retrieve the XML file  
  18.         $.ajax({  
  19.             type: "GET",  
  20.             url: XMLLIST.xml,  
  21.             dataType: "xml",              
  22.             success: XMLLIST.parseXML  
  23.         });   
  24.       
  25.     }, // end: init()  
  26.       
  27.     parseXML: function (xml) {  
  28.       
  29.         //Grab every single ITEM tags in the XML file  
  30.         var data = $('item', xml).get();  
  31.         //Allow user to toggle display randomly or vice versa  
  32.         var list = (XMLLIST.random) ? XMLLIST.randomize(data) : data;  
  33.         var i = 1;  
  34.           
  35.         //Loop through all the ITEMs  
  36.         $(list).each(function () {  
  37.               
  38.             //Parse data and embed it with HTML  
  39.             XMLLIST.insertHTML($(this));              
  40.   
  41.             //If it reached user predefined total of display item, stop the loop, job done.  
  42.             if (i == XMLLIST.display) return false;  
  43.             i++;  
  44.         });  
  45.   
  46.       
  47.     }, // end: parseXML()  
  48.   
  49.     insertHTML: function (item) {  
  50.   
  51.         //retrieve each of the data field from ITEM  
  52.         var url = item.find('url').text();  
  53.         var image = item.find('image').text();  
  54.         var title = item.find('title').text();  
  55.         var desc = item.find('desc').text();  
  56.         var html;  
  57.           
  58.         //Embed them into HTML code  
  59.         html = '<div class="item">';  
  60.         html += '<a href="' + url + '"><img src="' + image + '" alt="' + title + '" />';  
  61.         html += '<span>' + title + '</span></a>';  
  62.         html += '<p>' + desc + '</p>';  
  63.         html += '</div>';  
  64.           
  65.         //Append it to user predefined element  
  66.         $(html).appendTo(XMLLIST.appendTo);  
  67.           
  68.     }, // end: insertHTML()  
  69.   
  70.       
  71.     randomize: function(arr) {  
  72.           
  73.         //randomize the data  
  74.         //Credit to JSFromHell http://jsfromhell.com/array/shuffle  
  75.         for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);  
  76.             return arr;  
  77.     
  78.     } // end: randomize()      
  79.       
  80.   
  81. }  
  82.   
  83. //Run this script  
  84. XMLLIST.init();  

 


原文地址:http://www.freejs.net/article_jquerywenzi_120.html