Я хотел собрать простую веб-страницу для размещения информации, чтобы немного упростить мою работу, я использовал примеры по всей сети и перепроектировал их, чтобы попытаться выяснить, как они работают.
До сих пор я был в состоянии получить раскрывающееся меню для заполнения из файла XML, но не смог понять, как заставить каждый отдельный элемент меню иметь свой собственный определенный URL, который в конечном итоге будет указывать на IP-адреса для сетевых конфигураций систем различного оборудования.
Я уверен, что мне просто нужно добавить URL-информацию к элементам xml и каким-то образом проанализировать ее по кликабельному URL при добавлении в раскрывающееся меню, но как это ускользнуло от меня, несмотря на мое интернет-траление.
Заранее спасибо.
<!DOCTYPE html>
<html>
<head>
<title>TECHNICIAN PORTAL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body bgcolor="Grey">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header class="w3-container tech-theme w3-padding" id="myHeader">
<div class="tech-center">
<h1 class="w3-xxxlarge w3-animate-bottom">TECHNICIAN PORTAL</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge tech-modal-hover tech-modal-nohover" onclick="document.getElementById('id05').style.display='block'" style="font-weight:900;">SOFTWARE</button>
</header>
<div id="id05" class="tech-modal">
<div class="tech-modal-content tech-card w3-animate-top">
<header class="w3-container tech-theme-l1">
<span onclick="document.getElementById('id05').style.display='none'" class="w3-button tech-display-topright">X</span>
<h4>SOFTWARE</h4>
</header>
<div class="modal-list">
<nav role="navigation">
<ul class="dropdown">
<li id="powersystems1"></li>
</ul>
</nav>
</div>
<footer class="w3-container tech-theme-l1">
<p></p>
</footer>
</div>
</div>
<script>
$(document).ready(function () {
var li = $('<li/>')
.appendTo('#powersystems1');
$('<a />')
.text('APPLICATIONS')
.attr('href', '#')
.appendTo(li); // ADD THE TOP LIST TO THE HEADER (<ul>).
var sub_ul = $('<ul/>')
.appendTo(li);
$.ajax({
type: 'GET',
url: 'site_info.xml',
dataType: 'xml',
success: function (xml) {
$(xml).find('EquipmentID').each(function () {
var sub_li = $('<li/>')
.appendTo(sub_ul);
title = $(this).find('Power_Systems').text();
$('<a />')
.text(title)
.attr('href', '')
.appendTo(sub_li);
});
}
});
});
</script>
XML-файл называется site_info.xml. Содержит:
<?xml version="1.0" encoding="UTF-8"?>
<site_info>
<EquipmentID>
<SiteName>1</SiteName>
<Power_Systems>Rectifier 1</Power_Systems>
<Radio_Systems>Digital Radios 1</Radio_Systems>
<Asset_Prot>Signal 1</Asset_Prot>
<Software>Radio Software1</Software>
</EquipmentID>
<EquipmentID>
<SiteName>2</SiteName>
<Power_Systems>Rectifiers 2</Power_Systems>
<Radio_Systems>Digital Radios 2</Radio_Systems>
<Asset_Prot>Signal 2</Asset_Prot>
<Software>Radio Software 2</Software>
</EquipmentID>
<EquipmentID>
<SiteName>3</SiteName>
<Power_Systems>Rectifiers 3</Power_Systems>
<Radio_Systems>Digital Radios 3</Radio_Systems>
<Asset_Prot>Signal 3</Asset_Prot>
<Software>Radio Software 3</Software>
</EquipmentID>
</site_info>