mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-17 23:13:15 +00:00
307 lines
8.8 KiB
HTML
307 lines
8.8 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Exploring the Dom Collection's API</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css" media="screen">
|
|
|
|
div.contentContainer {
|
|
border: 1px solid #333;
|
|
padding: 10px;
|
|
margin-bottom:1em;
|
|
}
|
|
|
|
#source li {
|
|
list-style-type: decimal;
|
|
margin-left: 20px;
|
|
}
|
|
#source li.highlight {
|
|
list-style-type: decimal;
|
|
}
|
|
.highlight {
|
|
background: #ccf;
|
|
color: blue;
|
|
}
|
|
|
|
li.even {
|
|
background: #b3b3b3;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
<cite class="byline">This example was contributed by <a href='http://www.wait-till-i.com/'>Christian Heilmann</a> and members of his <a href='http://yuiblog.com/blog/2007/12/06/juku/'>Juku</a> training class at Yahoo.</cite>
|
|
|
|
<h1>Exploring the Dom Collection's API</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>In this example, the use of several key Dom Collection methods is explored. Given the markup in the source section, you can invoke any of the methods by clicking on them; the Source is updated, as is its in-browser appearance (Render). In the Outupt section, you can review the elements that are selected or affected (or, in a few cases, the JavaScript <code>return</code> value) of the function you invoked.</p>
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<h3>Source</h3>
|
|
|
|
<div id="source" class="contentContainer">
|
|
<pre>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3>Functions</h3>
|
|
<div id="functions" class="contentContainer">
|
|
<ul id="functionList">
|
|
<li id="get1"><a href="foo.html">get('demo')</a></li>
|
|
<li id="get2"><a href="foo.html">get(['demo', 'demoList'])</a></li>
|
|
<li id="getAncestorByTagName"><a href="foo.html">getAncestorByTagName('one', 'div')</a></li>
|
|
<li id="getAncestorByClassName"><a href="foo.html">getAncestorByClassName('listItem')</a></li>
|
|
<li id="getChildren"><a href="foo.html">getChildren('demoList')</a></li>
|
|
|
|
<li id="getElementsBy"><a href="foo.html">getElementsBy(<em>getElementsByClassName('specialItems')</em>, 'li', 'demo')</a></li>
|
|
<li id="getFirstChild"><a href="foo.html">getFirstChild('demoList')</a></li>
|
|
<li id="getLastChild"><a href="foo.html">getLastChild('demoList')</a></li>
|
|
<li id="getNextSibling"><a href="foo.html">getNextSibling('one')</a></li>
|
|
<li id="getPreviousSibling"><a href="foo.html">getPreviousSibling('two')</a></li>
|
|
|
|
<li id="isAncestor"><a href="foo.html">isAncestor('demo', 'one')</a></li>
|
|
<li id="insertBefore"><a href="foo.html">insertBefore(<em>li</em>, 'one')</a></li>
|
|
<li id="insertAfter"><a href="foo.html">insertAfter(<em>li</em>, 'one')</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Render</h3>
|
|
<div id="render" class="contentContainer">
|
|
</div>
|
|
|
|
<h3>Output</h3>
|
|
<div id="output" class="contentContainer">
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
(function() {
|
|
YAHOO.util.Event.addListener("functionList", "click", function(evt) {
|
|
var target = YAHOO.util.Event.getTarget(evt);
|
|
YAHOO.util.Event.preventDefault(evt);
|
|
if(evt.type === 'click' && target && target.parentNode.id) {
|
|
setView(target.parentNode.id);
|
|
}
|
|
});
|
|
|
|
// constant codedemo
|
|
var codedemo = [];
|
|
codedemo.push('<div id="demo">');
|
|
codedemo.push(' <ul id="demoList" class="parent">');
|
|
codedemo.push(' <li id="one" class="listItem">item 1</li>');
|
|
codedemo.push(' <li id="two" class="listItem">item 2</li>');
|
|
codedemo.push(' <li id="three" class="specialItem">item 3</li>');
|
|
codedemo.push(' </ul>');
|
|
codedemo.push('</div>');
|
|
|
|
// views object
|
|
var views = {
|
|
sourceView: document.getElementById('source'),
|
|
renderView: document.getElementById('render'),
|
|
outputView: document.getElementById('output'),
|
|
|
|
defaultView: {
|
|
source: function() {
|
|
return codedemo;
|
|
},
|
|
output: ['Please select a function.']
|
|
},
|
|
get1 : {
|
|
source: function(){
|
|
var temp = [].concat(codedemo);
|
|
temp[0] = '<div id="demo" class="highlight">';
|
|
return temp;
|
|
},
|
|
output: ['<div id="demo" class="highlight">']
|
|
},
|
|
get2 : {
|
|
source: function(){
|
|
var temp = [].concat(codedemo);
|
|
temp[0] = '<div id="demo" class="highlight">';
|
|
temp[1] = ' <ul id="demoList" class="parent highlight">';
|
|
return temp;
|
|
},
|
|
output: ['<div id="demo" class="highlight">', '<ul id="demoList" class="parent highlight">']
|
|
},
|
|
getAncestorByTagName : {
|
|
source: function() {
|
|
var temp = [].concat(codedemo);
|
|
temp[0] = '<div id="demo" class="highlight">';
|
|
return temp;
|
|
},
|
|
output: ['<div id="demo" class="highlight">']
|
|
},
|
|
getAncestorByClassName : {
|
|
source: function (){
|
|
var temp = [].concat(codedemo);
|
|
temp[1]=' <ul id="demoList" class="parent highlight">';
|
|
return temp;
|
|
},
|
|
output: ['<ul id="demoList" class="parent highlight">']
|
|
},
|
|
getChildren : {
|
|
source: function (){
|
|
var temp = [].concat(codedemo);
|
|
temp[2]=' <li id="one" class="listItem highlight">item 1</li>';
|
|
temp[3]=' <li id="two" class="listItem highlight">item 2</li>';
|
|
temp[4]=' <li id="three" class="specialItem highlight">item 3</li>';
|
|
return temp;
|
|
},
|
|
output: ['<li id="one" class="listItem">first</li>',
|
|
'<li id="two" class="listItem highlight">second</li>' ,
|
|
'<li id="three" class="specialItem highlight">item 3</li>']
|
|
},
|
|
getFirstChild : {
|
|
source: function (){
|
|
var temp =[].concat(codedemo);
|
|
temp[2]=' <li id="one" class="listItem highlight">item 1</li>';
|
|
return temp;
|
|
},
|
|
output: ['<li id="one" class="listItem">']
|
|
},
|
|
getLastChild : {
|
|
source: function(){
|
|
var temp =[].concat(codedemo);
|
|
temp[4] = ' <li id="three" class="specialItem highlight">item 3</li>';
|
|
return temp;
|
|
},
|
|
output : ['<li id="three" class="specialItem">']
|
|
},
|
|
getNextSibling : {
|
|
source: function(){
|
|
var temp = [].concat(codedemo);
|
|
temp[3]=' <li id="two" class="listItem highlight">item 2</li>';
|
|
return temp;
|
|
},
|
|
output: ['<li id="two" class="listItem">']
|
|
},
|
|
getPreviousSibling : {
|
|
source: function(){
|
|
var temp = [].concat(codedemo);
|
|
temp[2]=' <li id="one" class="listItem highlight">item 1</li>';
|
|
return temp;
|
|
},
|
|
output: ['<li id="one" class="listItem">']
|
|
},
|
|
isAncestor : {
|
|
source : function(){
|
|
var temp = [].concat(codedemo);
|
|
temp[0] = '<div id="demo" "highlight">';
|
|
temp[2]=' <li id="one" class="listItem highlight">item 1</li>';
|
|
return temp;
|
|
},
|
|
output: ['true']
|
|
},
|
|
insertBefore : {
|
|
source : function(){
|
|
var temp = [].concat(codedemo);
|
|
temp.splice(2,0,' <li id="four" class ="listItem highlight">new Item</li>');
|
|
return temp;
|
|
},
|
|
output: ['<li id="four">']
|
|
},
|
|
insertAfter: {
|
|
source : function(){
|
|
var temp = [].concat(codedemo);
|
|
temp.splice(3,0,' <li id="four" class ="listItem highlight">new Item</li>');
|
|
return temp;
|
|
},
|
|
output: ['<li id="four">']
|
|
},
|
|
getElementsBy : {
|
|
source: function (){
|
|
var temp = [].concat(codedemo);
|
|
temp[4] =' <li id="three" class="specialItem highlight">item 3</li>';
|
|
return temp;
|
|
},
|
|
output: ['<li id="three" class="specialItem">item 3</li>']
|
|
}
|
|
};
|
|
|
|
// render initial view
|
|
setView('defaultView');
|
|
|
|
function setView(viewName) {
|
|
// update sourceView
|
|
views['sourceView'].innerHTML = renderCode(views[viewName].source());
|
|
|
|
// update renderView
|
|
var code = views[viewName].source().join('');
|
|
code = code.replace(',', '');
|
|
views['renderView'].innerHTML = code;
|
|
|
|
var output = views[viewName].output;
|
|
views['outputView'].innerHTML = '';
|
|
var pre = document.createElement('pre');
|
|
for (var i = 0; output[i]; i++) {
|
|
pre.appendChild(document.createTextNode(output[i]));
|
|
pre.appendChild(document.createTextNode('\n'));
|
|
views['outputView'].appendChild(pre);
|
|
}
|
|
}
|
|
|
|
|
|
function renderCode(codedemo){
|
|
var out = '';
|
|
out += '<pre><ol>';
|
|
var hlString = '';
|
|
|
|
for(var i=0;codedemo[i];i++){
|
|
if (codedemo[i].search('highlight') !== -1) {
|
|
hlString = ' class="highlight"';
|
|
} else {
|
|
if (i%2==0)
|
|
hlString = ' class="even"';
|
|
}
|
|
out += '<li' + hlString + '><code>'+encode(codedemo[i])+'</code></li>'
|
|
hlString = ''
|
|
}
|
|
out+='</ol></pre>';
|
|
return out;
|
|
}
|
|
function encode(str){
|
|
str = str.replace(/</g,'<');
|
|
str = str.replace(/>/g,'>');
|
|
str = str.replace(/"/g,'"');
|
|
return str;
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|