Для начала рассмотрим, что же из себя представляет xml-файл. Это файл с расширением xml (например, books.xml), просмотреть содержимое которого и отредактировать можно в обычном редакторе "Блокнот".
Код внутри xml-файла выглядит примерно так:
Code
<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
<Book>
<Title>My Cool Book Title</Title>
<Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>Another PHP book</Title>
<Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
<Date>4/1/2010</Date>
</Book>
<Book>
<Title>jQuery Techniques</Title>
<Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
<Date>6/2/2010</Date>
</Book>
<Book>
<Title>MySQL Database Book</Title>
<Description>Brush up your knowledge with the best MySQL database book on the market.</Description>
<Date>14/2/2010</Date>
</Book>
</RecentBooks>
На первый взгляд всё не понятно,да? Первая строка листинга кода - это декларация XML, обязательная строка, которая даёт понять браузерам, что этот документ составлен по правилам XML 1.0
Code
<?xml version="1.0" encoding="utf-8" ?>
Ну а далее,собственно, идёт сам контент, оформленный с помощью элементов (тегов) XML. Как мы сможем это использовать на своём сайте? Да очень просто,например,для вывода рекламных блоков.
Итак, что мы делаем:
1. Открываем Блокнот
2. Вставим в наш новый документ содержимое:
Code
<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
<Book>
<Title>PS-Studio.Info</Title>
<Description>Уроки и решения на css,javascript,jquery,flash. Форум сайта: помощь по системе uCoz.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>PS-Studio.Info</Title>
<Description>Уроки и решения на css,javascript,jquery,flash. Форум сайта: помощь по системе uCoz.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>PS-Studio.Info</Title>
<Description>Уроки и решения на css,javascript,jquery,flash. Форум сайта: помощь по системе uCoz.</Description>
<Date>12/1/2010</Date>
</Book>
<Book>
<Title>PS-Studio.Info</Title>
<Description>Уроки и решения на css,javascript,jquery,flash. Форум сайта: помощь по системе uCoz.</Description>
<Date>12/1/2010</Date>
</Book>
</RecentBooks>
3. Далее выполняем: Файл - Сохранить как, выбираем внизу формы кодировку UTF-8 и присваиваем файлу имя books.xml
4. Закачиваем файл в файловый менеджер панели управления вашим сайтом
Каким образом содержимое xml-файла будет выводиться на страницах сайта? А для того, чтобы оно выводилось,нужно на странице сайта вставить блок, в котором будет выводиться нужная нам информация:
Code
<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>
<div class="clear"></div>
После открывающего тега body вставим скрипт
Code
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "ЗДЕСЬ ВСТАВЛЯЕМ ССЫЛКУ НА ВАШ XML- ФАЙЛ",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("Book").each(function () {
$(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
$(".book").fadeIn(1000);
});
}
</script>
осталось добавить лишь немного css-стилей в файл со стилями
Code
.main{
width:1000px;
margin:0 auto;
height:130px;
}
.book{
width:208px;
float:left;
margin:10px;
border:1px #dedede solid;
padding:5px;
display:none;
}
.title{
margin-bottom:6px;}
.description{font-size:11px; font-family:Geneva, Arial, Helvetica, sans-serif;}
.date{font-size:10px; color:#999; margin-top:4px;}
.loader{
height:11px;
}
За рецепт спасибо сайту
Всего комментариев: 0
Оставь комментарий первым!
