Парсинг из xml
Добрый день,Есть такой xml файл
Код:
<?xml version="1.0" encoding="windows-1251"?>Подскажите как мне правильно создать рамку в JS коде,если нагляднее то chtckbox поместить внутрь рамки заберая все данные о рамке из xml документа так же как я забираю и все остальное из этого xml документа. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
var answer={}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "test.xml",
dataType: "xml",
success: vasa
});
function vasa(xml) {
question=$(xml).find('question')[0].textContent;
$('.cont').append('<h4>'+question+'</h4>');
TextButton=$(xml).find('TextButton')[0].textContent;
$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
TextButton=$(xml).find('TextButton')[1].textContent;
$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;
border=$(xml).find('border').Content;
$('.border');
var answers = $(xml).find('answer');
answers.each(function(index){
var a = this.textContent;
var rating = +this.getAttribute('rating');
$('.cont').append('<p><label><input type="checkbox">'+a+'</label></p>');
answer[index] = rating;
});
}
});
function checkAnswer() {
var error = false;
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length ; i++){
var checked = inputs[i].checked;
var right = answer[i] == 1;
if (checked !== right){
error=true;
break;
}
}
output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
return false;
}
</script>
</head>
<body>
<form onsubmit="return checkAnswer()">
<div class='cont'></div>
<p><button typre="submit"><div class='onki'></div></button> <button type="reset"><div class='lolki'></div></button></p>
<p><textarea id="output" readonly></textarea></p>
</form>
</body>
</html>
И поправте меня по пониманию проблемы.Я так понимаю что эта рамка это что-то типа дива с задаными размерами цветом и тому подобным?или это что-то другое?И я могу делать примерно так <div class='?????'></div> Тоесть создавать див с задаными размерами в xml и что бы это выглядело как рамка и засовывать туда checkbox? Зделать это прописывая стили в самом JS коде а потом создавать поле в котором будут чекбоксы,это у меня особых усилий не заняло.А как подгребать из xml файла я просто даже не представляю,натолкните пожалуста. |
Vasy, xml файл тоже ты проектируешь походу?
Атрибуты ноды получай через $node.attr('width') или node.getAttribute('width') для width например. |
так видно?:D
Я это все делаю сам и не для какойто там работи,а для себя пока.Сами понимаете с моими знаниями рано пока=) тоесть мне получать из border каждый атрибут отдельно?но как их тогда связать в единое целое? ну тоесть вот так оно подключает все,но по отдельности. width=$(xml).find('border').attr('width');
Пробовал зделать функцию которая вытаскивает все attr из border и в див вызывать функцию несовсем получилась и функция да и вызывать в див/ Достаю из xml документа я его вот так width=$(xml).find('border').attr('width');
$('.width')
hight=$(xml).find('border').attr('hight');
$('.hight')
а пытаюсь создать div вот так <div id="id" class="hight"></div> Что нетак? И какбы если я все это задаю в самом javascripte то проблем не возникает <style type="text/css">
.block1 {
width: 200px;
background: #FFFAFA;
padding: 5px;
padding-right: 20px;
border: solid 5px black;
float: left;
}
а в <body> </body> я просто вызываю вот так <div class="block1"> <div class='cont'></div> </div> Я некак немогу понять как я все эти стили которые я получу по отдельности как атрибуты могу соеденить в один в один див как я это делалл прописывая css в самом javascript? я непойму как мне сказать диву что то что я достал из xml являетса его стилями? |
block.style.border = '1px solid red'; // или по отдельности: //border.style.borderWidth = '1px'; //border.style.borderStyle = 'dotted'; //border.style.borderColor = 'red'; Почему XML, а не JSON ? С ним же проще. |
Цитата:
И несовсем понял,что вы это написали,задание некого стиля? И всеже как мне из xml получать эти стили? |
ну что я имею ввиду
<border width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black" hight="100"></border> как мне вот это передать в Javascript я уже понял,если передать по отдельности каждый атрибут(а подскажите ище если возможно как организовать некую функцию которая будет забирать все артибуты),и использовать как стили?Тоесть как мне это все указать как стили для div чтобы div понял что это не просто циферки а его стили? |
var decoration = xml.querySelector('border');
div.style.border = decoration.getAttribute('border');
|
Скорее всего я туплю но несовсем понимаю где использовать то што вы написали?в каком месте кода?и как передавать это в div с id="id"?
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
var answer={}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "test.xml",
dataType: "xml",
success: vasa
});
function vasa(xml) {
question=$(xml).find('question')[0].textContent;
$('.cont').append('<h4>'+question+'</h4>');
TextButton=$(xml).find('TextButton')[0].textContent;
$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
TextButton=$(xml).find('TextButton')[1].textContent;
$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;
var answers = $(xml).find('answer');
answers.each(function(index){
var a = this.textContent;
var rating = +this.getAttribute('rating');
$('.cont').append('<p><label><input type="checkbox">'+a+'</label></p>');
answer[index] = rating;
});
}
});
function checkAnswer() {
var error = false;
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length ; i++){
var checked = inputs[i].checked;
var right = answer[i] == 1;
if (checked !== right){
error=true;
break;
}
}
output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
return false;
}
</script>
</head>
<body>
<form onsubmit="return checkAnswer()">
<div id="id" >
<div class='cont'></div>
</div>
<p><button type="submit"><div class='onki'></div></button> <button type="reset"><div class='lolki'></div></button></p>
<p><textarea id="output" readonly></textarea></p>
</form>
</body>
</html>
|
var div = document.getElementById('id')
Использовать там, где доступен xml конечно же) |
А блин ну я и тупил долго,да заработало спасибо,но в чем фишка.мне нужен не только border="5px solid black"
а все атрибуты из <style></style> <style width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black" hight="100"></style> |
Ну здорово. А в чем сложность?
|
если делать так как вы,то оно добавляет только первый заданый стиль тоесть код
var div = document.getElementById('id')
var decoration = xml.querySelector('style');
div.style.border = decoration.getAttribute('border');
div.style.height = decoration.getAttribute('hight');
Неимеет смысла так как height уже не будет задаватса как стиль.Ну вернее он почемуто вообще не задаётса никуда.А почему кстате? а как же задавать всё и тега <style> из хмл? |
<div id="id"></div>
<script>
var xmlData = '<style border="1px solid red" hight="100px" />';
var xml = new DOMParser().parseFromString(xmlData, 'application/xml');
var div = document.getElementById('id')
var decoration = xml.querySelector('style');
div.style.border = decoration.getAttribute('border');
div.style.height = decoration.getAttribute('hight');
</script>
|
а што бы не задавать явно
var xmlData = '<style border="1px solid red" hight="100px" />'; подругому некак нельзя?сейчас же как-бы задаётса на уровне javascript а не подгребаетса из xml? ну как-бы в этом коде я же не получаю данные из xml? |
Тогда же по сути я могу ничево даже не завать в xml документе а задавать тут.И по сути это получаетса тот же код что и я задам стили в javascript файле.или нет?
Я непойму почему но работает и вот так,если задавать все в xml,для чего тогда в вашем коде присутсвуют строки,вы типа имитируете созданый xml документ? var xmlData = '<style border="1px solid red" hight="100px" />';
var xml = new DOMParser().parseFromString(xmlData, 'application/xml');
var div = document.getElementById('id')
var decoration = xml.querySelector('style');
div.style.border = decoration.getAttribute('border');
div.style.width = decoration.getAttribute('width');
div.style.height = decoration.getAttribute('hight');
div.style.padding = decoration.getAttribute('padding');
div.style.margin = decoration.getAttribute('margin');
alert(div.style.margin);
|
Цитата:
xml instanceof XMLDocument //true |
Понял спасибо большое вам
|
А есть ли возможность как-то с помощью функции получать все те же атрибты?тоесть не явно присваивать стилям дива какието данные а с помощью функции,что бы допустим ненужно было добавлять ище строки.
|
Зачем ты все усложняешь до такой степени, что сам не понимаешь как реализовать свою задумку?
Можно все в один атрибут засунуть со всеми стилями и присвоить его значение в element.style.cssText. Можно оставить как есть и проходить циклом по node.attributes (это массиво-подобный объект). attributes[0].name, attributes[0].value и т.д. |
спасибо,буду пробовать.Ну нужно же с чего-то начинать не сразу все понятно и ясно
|
| Часовой пояс GMT +3, время: 12:26. |