Форум

Vasy · #1 (**permalink**) 12.03.2013, 19:58

Добрый день,Есть такой xml файл

Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE test SYSTEM "test.xml">
<test>
<border X="100" Y="100" weight="100" hight="100"></border>
	<questions>
		<single>
		<question>Вопрос</question>
		<answer rating="0"> 20</answer>
		<answer rating="1"> 40</answer>
		<answer rating="1"> 50</answer>
		<answer rating="0"> 20,5</answer>
		</single>
		
	</questions>
<TextButton>Ответить на вопрос</TextButton>
<TextButton>Стереть ответы</TextButton>
<ResultTextTrue>Ваш ответ верен!</ResultTextTrue>
<ResultTextFalse>Ваш ответ не верен!</ResultTextFalse>
</test>

в котором якобы задаютса там длинна ширина расположение цвет многое другое,допустим как border.

Подскажите как мне правильно создать рамку в 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 файла я просто даже не представляю,натолкните пожалуста.

danik.js · #2 (**permalink**) 12.03.2013, 20:36

Vasy, xml файл тоже ты проектируешь походу?
Атрибуты ноды получай через $node.attr('width') или node.getAttribute('width') для width например.

Vasy · #3 (**permalink**) 13.03.2013, 11:58

так видно?

Я это все делаю сам и не для какойто там работи,а для себя пока.Сами понимаете с моими знаниями рано пока=)
тоесть мне получать из 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 являетса его стилями?

danik.js · #4 (**permalink**) 13.03.2013, 13:26

block.style.border = '1px solid red';
// или по отдельности:
//border.style.borderWidth = '1px';
//border.style.borderStyle = 'dotted';
//border.style.borderColor = 'red';

Почему XML, а не JSON ? С ним же проще.

Vasy · #5 (**permalink**) 13.03.2013, 13:29

Сообщение от danik.js

block.style.border = '1px solid red';
// или по отдельности:
//border.style.borderWidth = '1px';
//border.style.borderStyle = 'dotted';
//border.style.borderColor = 'red';

Почему XML, а не JSON ? С ним же проще.

Я хочу чтобы все данные я получал из xml

И несовсем понял,что вы это написали,задание некого стиля?

И всеже как мне из xml получать эти стили?

Vasy · #6 (**permalink**) 13.03.2013, 13:44

ну что я имею ввиду

<border  width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black"  hight="100"></border>

как мне вот это передать в Javascript я уже понял,если передать по отдельности каждый атрибут(а подскажите ище если возможно как организовать некую функцию которая будет забирать все артибуты),и использовать как стили?Тоесть как мне это все указать как стили для div чтобы div понял что это не просто циферки а его стили?

danik.js · #7 (**permalink**) 13.03.2013, 13:53

var decoration = xml.querySelector('border');
div.style.border = decoration.getAttribute('border');

Vasy · #8 (**permalink**) 13.03.2013, 14:06

Скорее всего я туплю но несовсем понимаю где использовать то што вы написали?в каком месте кода?и как передавать это в 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>

danik.js · #9 (**permalink**) 13.03.2013, 14:23

var div = document.getElementById('id')

Использовать там, где доступен xml конечно же)

Vasy · #10 (**permalink**) 13.03.2013, 14:44

А блин ну я и тупил долго,да заработало спасибо,но в чем фишка.мне нужен не только border="5px solid black"
а все атрибуты из <style></style>

<style  width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black"  hight="100"></style>

Форум

Справочник

Discord чат

Курсы javascript