Выбор данных из XML помогите плз
Не понимаю как индексируются данные в XML - отсюда не знаю как вызвать только тот элемент, который мне нужен для вставки в HTML по клику!?
вот.....index.html <!DOCTYPE html> <html> <head> <meta content="text/html" charset="utf-8"> <title>portfolio</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" href="css/index.css" type="text/css"> </head> <body> <table class="master"> <tr> <td> <center id="logo"> </center> </td> </tr> <tr> <td> <center id="menu"> </center> </td> </tr> <tr> <td id="view"> </td> </tr> </table> </body> </html> вот...base.xml <?xml version='1.0' encoding='utf-8'?> <container> <logo> <title>Portfolio</title> </logo> <site> <menu>Page1</menu> <url>page1.html</url> </site> <site> <menu>Page2</menu> <url>page2.html</url> </site> <site> <menu>Page3</menu> <url>page3.html</url> </site> </container> вот...index.css *{
padding: 0;
margin: 0;
}
body {
background: url('../img/free4.jpg') no-repeat center center fixed;
background-size: cover;
}
.master{
width: 1000px;
position: relative;
margin:0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.menu{
padding: 8px;
font-family: Georgia;
font-style: italic;
text-decoration: underline;
font-size: 28pt;
color: #fff;
cursor: pointer;
}
.menu:hover{
text-decoration: none;
}
.mactive {
text-decoration: none;
}
.view{
width: 1000px;
border: 0px solid #fff;
border-radius: 10px;
background: url('../img/bg2.png') repeat;
}
.logo{
font-family: Georgia;
font-size: 60px;
color: #fff;
position: relative;
bottom: 0px;
}
вот....sсript.js $(document).ready(function(){
$.ajax({
type: 'GET',
url: 'base.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('container logo').each(function(){
var logo = $(this).find('title').text();
$('<l class="logo"></l>').html(logo).appendTo('#logo');
$(xml).find('site').each(function(){
var menus = $(this).find('menu').text();
var pages = $(this).find('url').text();
$('<m class="menu"></m>').html(menus).appendTo('#menu');
$('<div class="view"></div)').load(pages).appendTo('#view');
var buttons = $('.menu');
var i = buttons.index(this);
buttons.click(function(){
buttons.removeClass('mactive'),
$(this).addClass('mactive');
});
});
});
},
error: function(){alert("ERROR not found XML file");}
});
});
сам скрипт еще не доделан, потому что остановился на индексации данных, а вот притаком раскладе скрипта, мне выдает все мои страницы и погружает в index.html.....а я хочу чтоб в начале грузилась только Page1.html, а остальные - по клику....но даже не могу вывести Page1.html.....прописывал .eq(0), начинает глючить сильно.....помогите плз! может не правильный XML??? |
В порядок код js приведи сначала и лучше дай онлайн демо.
Что там за var i? где она используется? Почему у тебя buttons.click навешивается в цикле? Что значит "глючить сильно"? Нафиг тебе вобще xml? С json ведь попроще работать. |
спасибо за быстрый ответ! дело в том что я и не знал про json....
вот попытался создать json и наткнулся на ту же проблему, не могу вызвать только те данные которые мне нужны.....дело в том что внешний файл с данными будет менятся и вот как вызывать эти данные я не смог понять.....во всем интернете, я нашел только то, как синхронно вызвать все данные....а мне надо по пределенному клику - вызвать определенные данные...вот как то сложно мне....вся мысль в том, что HTML шаблон с простой таличной разметкой "header", "menu", "content", "footer"... а во внешнем файле хронятся то что будет загружаться в шаблон и ко всему сам content храниться в отдельных HTML файлах..... |
Цитата:
|
<!DOCTYPE html> <html> <head> <meta content="text/html" charset="utf-8"> <title>portfolio</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" href="css/index.css" type="text/css"> </head> <body> <table class="master"> <tr> <td> <center id="logo"> </center> </td> </tr> <tr> <td> <center id="menu"> </center> </td> </tr> <tr> <td id="view"> </td> </tr> </table> </body> </html> <?xml version='1.0' encoding='utf-8'?> <base> <head head="Portfolio"/> <site menu="Page1" url="page1.html"/> <site menu="Page2" url="page2.html"/> <site menu="Page3" url="page3.html"/> <foot title="copyright"/> </base> $(document).ready(function(){
$.get('base.xml',{}, function(xml){
$(xml).find("head").each(function(){
var logo = $(this).attr("head");
$('<l class="logo">'+logo+'</l>').appendTo('#logo');
});
$(xml).find("site").each(function(){
var menu = $(this).attr("menu");
$('<m class="menu">'+menu+'</m>').appendTo('#menu');
});
$('<div class="view"></div>').load($(xml).find("site").eq(0).attr("url")).appendTo('#view');
var button = $('.menu');
button.click(function(){
var i = button.index(this);
button.removeClass('mactive');
$(this).addClass('mactive');
$('.view').fadeOut(600).queue(function() {
$('.view').stop(true, true).remove();
$('<div class="view"></div>').fadeIn(600).load(
$(xml).find("site").eq(i).attr("url"))
.appendTo('#view')
.dequeue();
});
});
});
});
исправил XML и дописал скрипт....работает так как мне надо....но не знаю на сколько грамотно...как тут читал "говнокод"....вот не знаю....мне это всё нужно для того что я учусь всего 2 месяца программированию....и очень мало чего знаю, моя метода в том, что я ставлю цель или задачу и таким способом учусь.... и к стати, при таком XML который у меня, он всё рано больше чем JSON? И что такое "индексация поисковиками"??? где почитать про это....я так догадываюсь, это то как мою страничку будет искать GOOGle и ему подобные? даже и не думал про это.... |
| Часовой пояс GMT +3, время: 00:43. |