comfuture/ajaxize.js

## ajaxize.js
function ajaxize(selector) {
	$(selector).each(function(idx, el) {
		el = $(el);
		var opts = (el.attr('rel') || '').split(' ');
		var hasOption = function(opt) { return opts.indexOf(opt) > -1 }
		var pos = hasOption('before') ? 'Before' : 'After';
		var toggle = hasOption('toggle');
		var increase = hasOption('increase');
		var inherit = hasOption('inherit');
		var target_name = el.attr('target');
		target_name = /#[a-z][a-z0-9_]*/i.test(target_name)
			? target_name
			: '#target_' + Math.ceil(Math.random() * 1000000);
		var getTarget = function() {
			var div = $(target_name);
			if (div.length < 1) {
				div = $('<div id="' + target_name.substr(1) + '">')['insert'+pos](el);
			}
			return div;
		}
		if (!increase) {
			el.attr('target', target_name);
		}
		switch (el.get(0).tagName) {
			case 'A':
				el.click(function(event) {
					event.preventDefault();
					var target = getTarget();
					if (target.data('opener') && target.data('opener') != el) {
						target.data('opener').removeClass('toggle-on');
					}
					if (toggle && el.hasClass('toggle-on')) {
						target.empty();
						el.removeClass('toggle-on');
						return;
					}
					target.empty().load(el.attr('href'), function() {
						if (inherit) {
							ajaxize(target_name + ' ' +selector);
						}
						if (increase) target.replaceWith(target.html());
						// <!> XXX: not part of ajaxize functional
						var a = (el.attr('href').split('/').pop().replace('*',''));
						anchor((WebApp.url.fragment.indexOf(a) == 0) ?
								'#'+WebApp.url.fragment :
									(el.attr('href').split('/').pop().replace('*','')));
					}).data('opener', el);
					el.addClass('toggle-on');
				});
				break;
			case 'FORM':
				el.submit(function(event) {
					event.preventDefault();
					var target = getTarget();
					if (toggle && el.hasClass('toggle-on')) {
						target.empty();
						el.removeClass('toggle-on');
						return;
					}
					target = $(target_name);
					if (target.length < 1) {
						target = $('<div id="' + target_name.substr(1) + '">')['insert'+pos](el);
					}
					$.ajax({
						'type': el.attr('method') || 'GET',
						'url': el.attr('action') || document.URL,
						'data': el.serialize(),
						'success': function(html) {
							if (increase) {
								target.replaceWith(html);
							} else {
								target.empty().html(html);
							}
							el.addClass('toggle-on').get(0).reset();
						}
					})
				});
				break;
		}
	});
}

## basic_usage.html
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="ajaxize.js"></script>
    <script type="text/javascript">
    $(function() {
        ajaxize('[rel~=ajax]');
    });
    </script>
</head>
<body>
    <nav>
    <!-- page1.html will loaded into #content -->
    <a href="page1.html" rel="ajax" target="#content">page1</a>

    <!-- page2.html will loaded into #content and also ajaxized it's contents -->
    <a href="page2.html" rel="ajax inherit" target="#content">page2</a>

    <!-- page3.html will loaded into #content and toggled out when clicked link again -->
    <a href="page3.html" rel="ajax toggle" target="#content">page3</a>
    </nav>
    <section id="content">
        ajax contents goes here...
    </section>
    <footer>
    <!-- about.html will loaded below link and disappeared when clicked link again -->
    <a href="about.html" rel="ajax toggle">about me</a>
    </footer>
</body>
</html>
	function ajaxize(selector) {
	$(selector).each(function(idx, el) {
	el = $(el);
	var opts = (el.attr('rel') \|\| '').split(' ');
	var hasOption = function(opt) { return opts.indexOf(opt) > -1 }
	var pos = hasOption('before') ? 'Before' : 'After';
	var toggle = hasOption('toggle');
	var increase = hasOption('increase');
	var inherit = hasOption('inherit');
	var target_name = el.attr('target');
	target_name = /#[a-z][a-z0-9_]*/i.test(target_name)
	? target_name
	: '#target_' + Math.ceil(Math.random() * 1000000);
	var getTarget = function() {
	var div = $(target_name);
	if (div.length < 1) {
	div = $('<div id="' + target_name.substr(1) + '">')['insert'+pos](el);
	}
	return div;
	}
	if (!increase) {
	el.attr('target', target_name);
	}
	switch (el.get(0).tagName) {
	case 'A':
	el.click(function(event) {
	event.preventDefault();
	var target = getTarget();
	if (target.data('opener') && target.data('opener') != el) {
	target.data('opener').removeClass('toggle-on');
	}
	if (toggle && el.hasClass('toggle-on')) {
	target.empty();
	el.removeClass('toggle-on');
	return;
	}
	target.empty().load(el.attr('href'), function() {
	if (inherit) {
	ajaxize(target_name + ' ' +selector);
	}
	if (increase) target.replaceWith(target.html());
	// <!> XXX: not part of ajaxize functional
	var a = (el.attr('href').split('/').pop().replace('*',''));
	anchor((WebApp.url.fragment.indexOf(a) == 0) ?
	'#'+WebApp.url.fragment :
	(el.attr('href').split('/').pop().replace('*','')));
	}).data('opener', el);
	el.addClass('toggle-on');
	});
	break;
	case 'FORM':
	el.submit(function(event) {
	event.preventDefault();
	var target = getTarget();
	if (toggle && el.hasClass('toggle-on')) {
	target.empty();
	el.removeClass('toggle-on');
	return;
	}
	target = $(target_name);
	if (target.length < 1) {
	target = $('<div id="' + target_name.substr(1) + '">')['insert'+pos](el);
	}
	$.ajax({
	'type': el.attr('method') \|\| 'GET',
	'url': el.attr('action') \|\| document.URL,
	'data': el.serialize(),
	'success': function(html) {
	if (increase) {
	target.replaceWith(html);
	} else {
	target.empty().html(html);
	}
	el.addClass('toggle-on').get(0).reset();
	}
	})
	});
	break;
	}
	});
	}
	<html>
	<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="ajaxize.js"></script>
	<script type="text/javascript">
	$(function() {
	ajaxize('[rel~=ajax]');
	});
	</script>
	</head>
	<body>
	<nav>
	<!-- page1.html will loaded into #content -->
	<a href="page1.html" rel="ajax" target="#content">page1</a>

	<!-- page2.html will loaded into #content and also ajaxized it's contents -->
	<a href="page2.html" rel="ajax inherit" target="#content">page2</a>

	<!-- page3.html will loaded into #content and toggled out when clicked link again -->
	<a href="page3.html" rel="ajax toggle" target="#content">page3</a>
	</nav>
	<section id="content">
	ajax contents goes here...
	</section>
	<footer>
	<!-- about.html will loaded below link and disappeared when clicked link again -->
	<a href="about.html" rel="ajax toggle">about me</a>
	</footer>
	</body>
	</html>