jquery随机加载xml内容

85173253

2013-12-20

jquery随机加载xml内容

XML/HTML Code
<div id="list">  
    </div>    

data.xml

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

readxml.js

JavaScript Code
/* 
Learn How to Read, Parse and Display XML Data in Random Order with jQuery 
Author: Kevin Liew 
Website: http://www.queness.com 
*/  
  
XMLLIST = {  
  
    //general settings  
    xml: 'data.xml?' + Math.random(0,1), //solve ie weird caching issue  
    display: '3', //number of items to be displayed  
    random: true, //display randomly {true|false}  
    appendTo: '#list', //set the id/class to insert XML data  
      
    init: function () {  
      
        //jQuery ajax call to retrieve the XML file  
        $.ajax({  
            type: "GET",  
            url: XMLLIST.xml,  
            dataType: "xml",              
            success: XMLLIST.parseXML  
        });   
      
    }, // end: init()  
      
    parseXML: function (xml) {  
      
        //Grab every single ITEM tags in the XML file  
        var data = $('item', xml).get();  
        //Allow user to toggle display randomly or vice versa  
        var list = (XMLLIST.random) ? XMLLIST.randomize(data) : data;  
        var i = 1;  
          
        //Loop through all the ITEMs  
        $(list).each(function () {  
              
            //Parse data and embed it with HTML  
            XMLLIST.insertHTML($(this));              
  
            //If it reached user predefined total of display item, stop the loop, job done.  
            if (i == XMLLIST.display) return false;  
            i++;  
        });  
  
      
    }, // end: parseXML()  
  
    insertHTML: function (item) {  
  
        //retrieve each of the data field from ITEM  
        var url = item.find('url').text();  
        var image = item.find('image').text();  
        var title = item.find('title').text();  
        var desc = item.find('desc').text();  
        var html;  
          
        //Embed them into HTML code  
        html = '<div class="item">';  
        html += '<a href="' + url + '"><img src="' + image + '" alt="' + title + '" />';  
        html += '<span>' + title + '</span></a>';  
        html += '<p>' + desc + '</p>';  
        html += '</div>';  
          
        //Append it to user predefined element  
        $(html).appendTo(XMLLIST.appendTo);  
          
    }, // end: insertHTML()  
  
      
    randomize: function(arr) {  
          
        //randomize the data  
        //Credit to JSFromHell http://jsfromhell.com/array/shuffle  
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);  
            return arr;  
    
    } // end: randomize()      
      
  
}  
  
//Run this script  
XMLLIST.init();  