Sunday, August 05, 2007

prototype javascript library Selector.handlers example


<ul id="fruits">
<li id="apples">
<h3 title="yummy!" id="hid">Apples</h3>
<ul id="list-of-apples">
<li id="golden-delicious" title="yummy!" >Golden Delicious</li>
<li id="mutsu" title="yummy!">Mutsu</li>
<li id="mcintosh">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
<p id="saying">An apple a day keeps the doctor away.</p>
</li>
</ul>
<form action="index" method="post" id="f1" accept-charset="utf-8" style="background: #ddd; border: #ccc double 1px;">
<input type="text" name="input1" value="origin is enabled" id="input1"><br/>
<input type="text" name="input2" value="origin is disabled" id="input2" disabled="true"><br/>
<input type="text" name="other3" value="origin is disabled" id="other3" disabled=""><br/>
<input type="submit" value="Continue →" id="submit" name="submit"><br/>
</form>
<script type="text/javascript" charset="utf-8">
function doc(argument) {
document.write("<br/>\n");
document.write(argument);
document.write("<br/>\n");
}

var s1 = Selector.matchElements($('apples', 'golden-delicious', 'mutsu', 'mcintosh', 'ida-red'), 'li');
var s2 = $('apples').getElementsBySelector( 'p#saying', 'li[title="yummy!"]' );
var sh = Selector.handlers;
var l = new Selector('ul li');
var f = l.findElements($('fruits'));
sh.mark(f).each(function (s) {
doc(s.id + ' counted? ' + s._counted);
});
sh.unmark(f).each(function (s) {
doc(s.id + ' counted? ' + s._counted);
});
doc('=============================================');
s1.each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('=============================================');
s2.each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('concat=============================================');
sh.concat(s1, s2).each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('unique=============================================');
sh.unique(sh.concat(s1, s2)).each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('array.uniq()=============================================');
sh.concat(s1, s2).uniq().each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('descendant=============================================');
sh.descendant(sh.unique(sh.concat(s1, s2))).each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('child=============================================');
sh.child(sh.concat(s1, s2)).each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('adjacent=============================================');
sh.adjacent(f).each(function (s) {
doc(s.tagName.toLowerCase() + ".id = " + s.id);
});
doc('=============================================');
var inputs = $$('form/input[name*="input"]');
inputs.each(function (i) {
doc(i.id);
});

</script>

No comments :