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();
相关推荐
PHP, JQuery编写的自动组卷系统,完成功能包括,按照随机原则自动组卷,选择试卷难易度,完成组卷后转成word文档,并提供下载
8.3 加载网页文件内容并传递服务器端参数 8.4 使用AJAX刷新删除网页记录 8.5 使用AJAX异步验证用户名和密码 8.6 页面滚动时加载新的网页内容 8.7 打造自己的站内搜索引擎 8.8 异步加载并解析XML文件 8.9 动态加载...
加载后 系统会解析xml并存储到数组中 再随机排序数组 不过有一个坏处 单词是无限加载的 js基础不多的我开始了摸索之路 更改: 1.删除了cokkie 防止作弊 2.增加了单词上限 默写完成自动停止 3.调用有道接口实现了在线...
17、Hibernate是如何延迟加载的? 93 18、如果优化Hibernate? 93 19、什么是ORM? 94 20、Hibernate的主键生成策略? 94 21、Hibernate的级联操作 94 22、Hibernate有哪5个核心接口? 95 23、什么是重量级?什么是...
16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm 通过XML HTTP做一个特殊HEAD的请求。 16_7.htm 显示XML数据...
16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm 通过XML HTTP做一个特殊HEAD的请求。 16_7.htm 显示XML数据...
利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码) 15个目标文件 摘要:Java源码,初学实例,基于EJB的真实世界模型 基于EJB的真实世界模型,附源代码,部分功能需JSP配合完成。 J2ME优化压缩PNG文件 4个...
凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码) 15个目标文件 摘要:Java源码,初学实例,基于EJB的真实...