如何创建基于XML的菜单? [英] How to create an XML based Menu?
问题描述
我正在尝试通过jquery从xml文件创建菜单.
I'm trying to create a menu from an xml file, via jquery.
为此，我需要在窗口加载时运行脚本. 这是一个下拉菜单，在我的plugins.js中带有一些jQuery代码 我正在尝试将xml的所有项目完全添加到菜单列表类的UL中.
I need to run the script for this, on window-load. It's a dropdown menu with some jquery code to it in my plugins.js I'm trying to completely add all the items of the xml to the UL of the menu list class...
这是我需要在其中添加菜单的代码:
Here's the code in which I need to add my menu to:
<li class="w-nav-item level_1 has_sublevel">
<a class="w-nav-anchor level_1" href="#">
<span class="w-nav-icon"><i class="fa fa-files-o"></i></span>
<span class="w-nav-title">Animals</span>
<span class="w-nav-arrow"></span>
</a>
<!-- level 2 -->
<ul class="w-nav-list level_2">
<!---------------1 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
<a class="w-nav-anchor level_2" href="javascript:void(0);">
<span class="w-nav-title">Birds </span>
<span class="w-nav-arrow"></span>
</a>
<!-- level 3 -->
<ul class="w-nav-list level_3">
<li class="w-nav-item level_3">
<a class="w-nav-anchor level_3" href="animals/1_sparrow.html">
<span class="w-nav-title">Sparrow</span>
<span class="w-nav-arrow"></span>
</a>
</li>
<li class="w-nav-item level_3">
<a class="w-nav-anchor level_3" href="animals/1_crow.html">
<span class="w-nav-title">Crow</span>
<span class="w-nav-arrow"></span>
</a>
</li>
</ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------2 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
<a class="w-nav-anchor level_2" href="javascript:void(0);">
<span class="w-nav-title">Carnivorous Animals</span>
<span class="w-nav-arrow"></span>
</a>
<!-- level 3 -->
<ul class="w-nav-list level_3">
<li class="w-nav-item level_3">
<a class="w-nav-anchor level_3" href="animals/2_tiger.html">
<span class="w-nav-title">Tiger</span>
<span class="w-nav-arrow"></span>
</a>
</li>
</ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------3 START animals with sublevel---------------->
</li>
<!---------------END animals with sublevel------------------>
这是我需要从中创建菜单的XML..:
And here's the XML From which I need to create the menu..:
<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<item>
<animal_id>1_1</animal_id>
<animal_title>Sparrow </animal_title>
<animal_generic>A Sparrow Bird</animal_generic>
<animal_category>Birds </animal_category>
<animal_code>Code 152</animal_code>
<animal_img>images_animals/1_1_sparrow.png</animal_img>
<animal_url>1_sparrow.html</animal_url>
</item>
<item>
<animal_id>1_2</animal_id>
<animal_title>Crow</animal_title>
<animal_generic>A Crow Bird</animal_generic>
<animal_category>Birds </animal_category>
<animal_code>Code 153</animal_code>
<animal_img>images_animals/1_2_crow.png</animal_img>
<animal_url>1_crow.html</animal_url>
</item>
<item>
<animal_id>2_1</animal_id>
<animal_title>Tiger </animal_title>
<animal_generic>A Wild Tiger</animal_generic>
<animal_category>Carnivorous Animals </animal_category>
<animal_code>Code 151</animal_code>
<animal_img>images_animals/2_1_tiger.png</animal_img>
<animal_url>2_tiger.html</animal_url>
</item>
...
...
...
我试图按照li list的div格式将xml中的所有项目"附加到菜单中. <ul class="w-nav-list level_2">
I'm trying to append all the "items" in the xml to the menu, as per the div format of li list. After the <ul class="w-nav-list level_2">
我有这段代码，我曾经在联系表单中添加国家"，但是我不知道如何更改它以添加所需的div.
I have this code, that I was using to add "countries" to in my contact form, but I don't know how to change it to add the required divs.
var cList = $('ul.w-nav-list.level_2')
$.each(data, function(i)
{
var cat_no = data.id.split('_');
var opt = $('<option/>')
.attr('value', countries[i])
.text(countries[i])
.appendTo(cList);
});
我的XML id格式为:
1_1: first item, category 1,
1_2: second item, category 1,
1_3: third item, category, 1,
2_1: fourth item, category 2,
3_1: fifth item, category 3,
....像这样，大约有10-13个类别，其中包含大约100个xml项目.
..... like this there are about 10-13 categories with about 100 xml items.
我相信这种事情应该做:
I believe something of this sort should do:
ajax: xml_url, etc
xml response, data ,
data.xml_id.split('_'); //to get the first element of the xml id, but I guess this would only return the last element. Don't know how to change it to return first element.
function add_menu(){
$('ul.w-nav-list level_2').append(data, function ( ){ for(i=0;i<=data.length) for all data.xml_id==i: add category + item divs, li, ul, /li, /ul) }
以上只是一种算法或我认为可以实现的方式...我不知道如何在jquery/javascript中做到这一点.
The above is just a kindof alogrithm or a way of how I think this can be done... I don't know how to do this in jquery/javascript.
这是我要在javasacript/jquery中执行的操作:
Here's what I'm trying to do in javasacript/jquery:
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function() {
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: function parse(xmlResponse){
var data = $("item", xmlResponse).map(function() {
return {
id: $("animal_id", this).text(),
title: $("animal_title", this).text(),
url: $("animal_url", this).text(),
category: $("animal_category", this).text().split('/'),
};
}).get();
var categnumber = new Array();
for(i=0;i<=data.length;i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
{ categnumber[i] = data[i].id.split('_');
console.log(categnumber[i][0]);
for(j=0;j<=data.length;j++) //appending via a function.
{ var data_text = category_or_animal(data, categnumber, j);
console.log(data_text);
$('ul.w-nav-list.level_2').append( data_text );
}
}
function category_or_animal(d, catg, k){
var catg1 = new Array();
var catg2 = new Array();
var catg1 = d[k].id.split('_');
if(d[k-1]){
var catg2 = d[k-1].id.split('_');
//if(d[k-1].id)
if (catg1[0] != catg2[0])
return category_gen(d,k);
} else return '</ul>' + animal_gen(d,k);
}
function category_gen(d,z){
var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">';
return category_var;
}
function animal_gen(d,z){
var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
return animal_var;
}
}, error: function(){console.log('Error: Animals info xml could not be loaded.');}
});
});
请有人对此提供帮助吗?
Please could someone provide help regarding this?
这里是jsfiddle，没有html菜单: http://jsfiddle.net/mohitk117/d7XmQ /2/
Here's the jsfiddle WITHOUT the menu filled in html: http://jsfiddle.net/mohitk117/d7XmQ/2/
这是jsfiddle，菜单填充了html，这是我试图在菜单中获取的内容的一般概念，但仅通过jquery + xml动态创建，而不像此处的html示例那样进行硬编码: http://jsfiddle.net/mohitk117/r6LQg/
And here's the jsfiddle, WITH the menu filled in html, this is the a general idea of what I'm trying to get in the menu, but only being created dynamically via jquery+xml and not hardcoded like the html example here: http://jsfiddle.net/mohitk117/r6LQg/
我不知道如何将xml上传到小提琴，也不知道该写下什么javascript代码，因此我将代码保留为类似于alogrithm的代码.
I didn't know how to upload the xml to the fiddle, and also didn't know what javascript code to write down, so I kept the code similar to an alogrithm.
更新了javascript代码... + 更新的jsfiddle: http://jsfiddle.net/mohitk117/d7XmQ/4/
Updated the javascript code... + Updated jsfiddle: http://jsfiddle.net/mohitk117/d7XmQ/4/
推荐答案
我针对相同的问题问了另一个问题，但是新的问题有所不同.我收到了DannyFritz的回信，信中有答案 .他的代码完美地耗尽了xml文件，并将相关字段转换为列表格式.那不是我想要做的完全，但是经过一些添加和较小的更简单的更改，我使菜单起作用了.
I asked another question for the same problem, but the new question was different. And I received a reply from DannyFritz with the answer. His code perfectly exhausts the xml file and puts the revelant fields into a list format. That was not completely what I was trying to do, but after some additions and minor easier changes, I got the menu functioning.
这是我基于xml的菜单版本的完整编辑代码:[ ::: JsFiddle: :: ]
Here's the complete edited code of my version of the xml based menu: [ ::: JsFiddle ::: ]
"use strict";
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function () {
var $menu = $('.w-nav-list.level_2');
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: handleResponse,
error: function () {
console.log('Error: Animals info xml could not be loaded.');
}
});
function handleResponse(xmlResponse) {
var $data = parseResponse(xmlResponse);
createMenu($data);
}
function parseResponse(xmlResponse) {
return $("item", xmlResponse).map(function () {
var $this = $(this);
return {
id: $this.find("animal_id").text(),
title: $this.find("animal_title").text(),
url: $this.find("animal_url").text(),
category: $this.find("animal_category").text()
};
});
}
function createMenu($data) {
var categories = {};
$data.each(function (i, dataItem) {
if (typeof categories[dataItem.category] === 'undefined') {
categories[dataItem.category] = [];
}
categories[dataItem.category].push(dataItem);
});
for (var category in categories) {
var categoryItems = categories[category];
$menu.append($('<li class="w-nav-item level_2 has_sublevel">').html('<a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + category + '</span><span class="w-nav-arrow"></span></a>' + createCategory(categoryItems) + '</li>'));
} //console.log($menu.html());
}
function createCategory(categoryItems) {
var $list = $('<p>');
$.each(categoryItems, function (i, dataItem) {
var $item = $('<li class="w-nav-item level_3"></li>')
.html('<a class="w-nav-anchor level_3" href="' + dataItem.url + '"><span class="w-nav-title">' + dataItem.title + '</span><span class="w-nav-arrow"></span></a>');
$list.append($item);
});
var list_array = ['<ul class="w-nav-list level_3">' , '</ul>'];
return list_array[0] + $list.html() + list_array[1];
}
function createItem() {}
});
这篇关于如何创建基于XML的菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
