Sefirut.ru Каталог статей Уроки по html/css Разное

• Требуется построить «дерево», на основе файла data.xml, где «Item» — узел дерева;


• Данные необходимо получать получать при помощи AJAX;


• Должна быть возможность сворачивать/показывать узлы дерева при клике на –/+;


• При клике на узел, должен появляться небольшой блок с содержимым «Description», следующий клик по странице должен скрывать этот блок.

MyTools = 

{

 'ajax': function()

 {

 var form, handler, method, xhr, data;

 

 form = arguments[0];

 handler = arguments[1];

 method = (form.method || arguments[2] || 'GET').toUpperCase();

 

 try {

 // create

 xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject('MSXML2.XMLHTTP.3.0') : null );

 

 // prepare

 datasend = '';

 data = form.elements;

 for(i = 0; i < data.length; i++) datasend += (data[i].name +'='+ encodeURIComponent( data[i].value ) + '&');

 

 // processing

 request = form.action;

 xhr.open( method, request + ( method == 'GET' ? (request.indexOf('?') == -1 ? '?' : '&')+ Math.random()*10E25 : '' ), true);

 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

 xhr.onreadystatechange = function() { if(xhr.readyState == 4 && handler != null) handler( xhr ) }

 xhr.send( datasend );

 }

 catch(e) { alert( e.message ) }

 },

 

 'parseXMLTree': function( node, replacement )

 {

 var placeholder = node.hasChildNodes() ? document.createElement('span') : document.createTextNode('');

 var container;

 var childs, child;

 var nodeName, nodeText, nodeAttr, tagName, tagAttr = {}, tagAttrAddon = {};

 

 childs = node.childNodes;

 

 for( var i = 0; i < childs.length; i++ )

 {

 child = childs[i];

 nodeName = child.nodeName;

 nodeAttr = child.attributes;

 nodeText = child.textContent || child.text;

 tagName = replacement[ nodeName ]

 

 if( typeof tagName == 'object' )

 {

 tagAttr = tagName[1];

 tagAttrAddon = tagName[2] || tagAttrAddon;

 tagName = tagName[0];

 }

 

 if( nodeName == '#text' ) container = document.createTextNode(nodeText);

 else {

 container = document.createElement( tagName ? tagName : nodeName );

 

 // sets xml-attributes

 for( var a = 0; a < nodeAttr.length; a++ )

 {

 var attr = nodeAttr[a];

 var attrName = tagAttr[ attr.nodeName ] || attr.nodeName;

 container.setAttribute( attrName, attr.nodeValue );

 }

 // sets addon attributes

 for( var b in tagAttrAddon) if( typeof tagAttrAddon[b] == 'string' ) container.setAttribute( b, tagAttrAddon[b] );

 

 container.appendChild( arguments.callee(child, replacement) );

 }

 

 placeholder.appendChild( container );

 }

 

 return placeholder;

 },



 'getXMLTree': function( obj, container, getsource )

 {

 if( !obj.parsed )

 {

 var myself = this;

 var container = typeof container == 'object' ? container : document.getElementById( container );

 obj.innerHTML = 'Загрузка файла..';

 

 this.ajax({'action': obj.href, 'elements': []}, 

 function( xhr )

 {

 // получаем распарсенный в HTML DOM-объект XML-файла

 var tree = myself.parseXMLTree( xhr.responseXML.getElementsByTagName('Items')[0], {

 'Item' : ['dl', {'Id': 'title'}, {'class': 'item'}],

 'Name' : 'dt',

 'Description' : 'dd',

 'Childs' : ['div', {}, {'class': 'subtree'}]

 });

 

 var items = tree.getElementsByTagName('dl');

 var descs = tree.getElementsByTagName('dd');

 var clear = function(){ for( var i = 0; i < descs.length; i++ ) if( descs[i].nodeName ) descs[i].style.display = 'none' }

 

 // назначаем обработчики событий для элентов дерева

 for( i = 0; i < items.length; i++ )

 {

 var child = items[i];

 var childs = child.getElementsByTagName('div')[0];

 

 child.getElementsByTagName('dt')[0].onclick = function( evt )

 {

 evt = evt || window.event;

 evt.cancelBubble = true;

 clear();

 this.parentNode.getElementsByTagName('dd')[0].style.display = 'block'

 }

 

 var opener = document.createElement('i');

 opener.innerHTML = childs.innerHTML ? '+' : '';

 opener.className = childs.innerHTML ? 'opener' : 'disabled';

 opener.onclick = function()

 {

 if( this.className == 'opener' )

 {

 var hidden = this.parentNode.getElementsByTagName('div')[0];

 this.innerHTML = this.innerHTML == '+' ? '–' : '+';

 hidden.style.display = !hidden.style.display || hidden.style.display == 'none' ? 'block' : 'none';

 }

 }

 child.insertBefore( opener, child.firstChild );

 

 }

 

 // результирующая вставка обработанного «дерева» на страницу

 container.appendChild( tree );

 window.onclick = clear;

 

 obj.innerHTML = 'XML-файл успешно загружен';

 obj.className = 'disabled';

 obj.parsed = true;

 

 // просмотр полученного HTML-кода из XML-файла

 document.getElementById( getsource ).innerHTML = 

 tree.innerHTML.replace(/&/g, '&amp;')

 .replace(/</g, '&lt;')

 .replace(/>/g, '&gt;')

 .replace(/\n/g, '<br>')

 .replace(/\t/g, '&nbsp;&nbsp;');

 }

 );



 }

 

 return false;

 }

}

#tree { padding:10px 0; width:50%; }

#tree .item { position:relative; display:block; float:left; clear:left; margin:5px; }

#tree .item dt { float:left; color:gray; border-bottom:1px dashed gray; cursor:pointer; }

#tree .item dt:hover { color:black; }

#tree .item dd { background:white; border:1px solid silver; padding:10px; width:250px; position:absolute; top:0; right:-290px; display:none; z-index:10; }

#tree .item .subtree { display:none; padding-left:30px; }

#tree .item .opener,

#tree .item .disabled { display:block; float:left; width:20px; height:20px; text-align:center; line-height:20px; cursor:pointer; margin-right:2px; }

#tree .item .disabled { background:none; cursor:default; }

#tree .item .opener:hover { color:green; background:#eee; }