DomHandler
DomHandler is a javascript class for creating structured blocks of html using DOM for the dynamic manipulation of web pages.license : GPL2
source : google code
demo : klenwell.googlepages.com
Sample Usage
working examplethe code below is the actual code from the demo listed above
<!-- HEAD -->
<script type="text/javascript" src="http://klenwell.googlecode.com/svn/trunk/JS/domhandler/domhandler.ini.js"></script>
<!-- BODY -->
<script type="text/javascript">
// create DomHandler object
var MyHandler = new DomHandler(1);
MyHandler.ini();
var blocks_added = 0;
function add_element()
{
if ( blocks_added < 3 )
{
blocks_added++;
var block_id = "ubody_" + blocks_added;
MyHandler.add_element(MyHandler.core, 'p', block_id);
MyHandler.set_html(block_id, 'extra block #' + blocks_added);
}
else
{
alert('this can only be done ' + blocks_added + ' times!');
}
}
MyHandler.add_element(MyHandler.core, 'h4', 'utitle');
MyHandler.add_element(MyHandler.core, 'div', 'ubody');
MyHandler.add_element(MyHandler.container, 'h6', 'ufooter');
MyHandler.set_html('utitle', 'title block');
MyHandler.set_html('ubody', 'body block');
MyHandler.set_html('ufooter', 'click here to add another block');
// add event handler to footer
function uEvent() { add_element(); }
MyHandler.attach_event('ufooter', 'click', uEvent);
MyHandler.publish('script_block');
</script>
</div>
<script type="text/javascript" src="http://klenwell.googlecode.com/svn/trunk/JS/domhandler/domhandler.ini.js"></script>
<!-- BODY -->
<script type="text/javascript">
// create DomHandler object
var MyHandler = new DomHandler(1);
MyHandler.ini();
var blocks_added = 0;
function add_element()
{
if ( blocks_added < 3 )
{
blocks_added++;
var block_id = "ubody_" + blocks_added;
MyHandler.add_element(MyHandler.core, 'p', block_id);
MyHandler.set_html(block_id, 'extra block #' + blocks_added);
}
else
{
alert('this can only be done ' + blocks_added + ' times!');
}
}
MyHandler.add_element(MyHandler.core, 'h4', 'utitle');
MyHandler.add_element(MyHandler.core, 'div', 'ubody');
MyHandler.add_element(MyHandler.container, 'h6', 'ufooter');
MyHandler.set_html('utitle', 'title block');
MyHandler.set_html('ubody', 'body block');
MyHandler.set_html('ufooter', 'click here to add another block');
// add event handler to footer
function uEvent() { add_element(); }
MyHandler.attach_event('ufooter', 'click', uEvent);
MyHandler.publish('script_block');
</script>
</div>
CategoryJavascript
There are no comments on this page. [Add comment]