Question

我目前正在为盖尔学校开发一个网站。目前，他们将Flash用于Web应用程序，我将链接到下面，但是我正在尝试在HTML5中创建/重新创建它，因为它目前无法被所有人访问。

应用程序由按钮组成，所有按钮都由XML输入绘制，另一个XML文件包含按下每个按钮时播放的mp3数据。一个XML文件绘制框，而另一个填充它们。

此应用程序的链接：“http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html”

正如您所看到的，当单击一个按钮时，会出现更多按钮。

我已经尝试过关注HTML5媒体播放器的指南但是我并不完全了解如何读取XML文件以创建这些格式，如图所示。我也研究了树格式，但找不到一个好的起点。

如果有人能让我朝着正确的方向前进，我会非常感激，我的搜索会让我失望，因为他们不是我正在寻找的。

谢谢！

Answer 1

您需要Read XML file using javascript或jQuery的load和选择器来阅读您的XML文件。

对于HTML元素，最佳选择可能是利用动态元素创建。以下是读取XML数据的演示：

＆＃13;

var xml= '<ASSETS><Box ><id>1</id><url>bogsa01.xml</url><text>Bogsa1</text></Box><Box ><id>2</id><url>bogsa02.xml</url><text>Bogsa2</text></Box><Box ><id>3</id><url>bogsa03.xml</url><text>Bogsa3</text></Box><Box ><id>4</id><url>bogsa04.xml</url><text>Bogsa4</text></Box></ASSETS>';

var xmlDoc = $.parseXML( xml ); 
var $xml = $(xmlDoc);
var $box = $xml.find("Box");

$box.each(function(){
   var id = $(this).find('id').text();
   var text = $(this).find('text').text();
   var url = $(this).find('url').text();
   // From here you can do whatever you want with the data 
   $("#BoxList" ).append('<li><b>ID: </b>' +id+ '  <b>TEXT: </b> '+text+ '  <b>URL: </b> ' +url+ '</li>'); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="BoxList">XML:</div>

＆＃13;

带有XML和按钮的动态HTML5播放器

1 个答案: