jquery-url.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="/js/jquery-1.11.0.min.js"></script>
	<script src="/js/jquery.json.js"></script>
	<script src="/jquery.url.js"></script>
</head>
<body>


<table class="table table-bordered table-striped" style="table-layout: fixed; word-wrap: break-word;">
	<thead>
		<tr>
			<th colspan="2">Results:</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="width: 200px; background-color: lightgrey;">source</td>
			<td style="background-color: lightgrey;"><span id="source">&nbsp;</span></td>
		</tr>
		<tr>
			<td>protocol</td>
			<td><span id="protocol">&nbsp;</span></td>
		</tr>
		<tr>
			<td>host</td>
			<td><span id="host">&nbsp;</span></td>
		</tr>
		<tr>
			<td>port</td>
			<td><span id="port">&nbsp;</span></td>
		</tr>
		<tr>
			<td>relative</td>
			<td><span id="relative">&nbsp;</span></td>
		</tr>
		<tr>
			<td>path</td>
			<td><span id="path">&nbsp;</span></td>
		</tr>
		<tr>
			<td>directory</td>
			<td><span id="directory">&nbsp;</span></td>
		</tr>
		<tr>
			<td>file</td>
			<td><span id="file">&nbsp;</span></td>
		</tr>
		<tr>
			<td>query</td>
			<td><span id="query">&nbsp;</span></td>
		</tr>
		<tr>
			<td>fragment (alias: anchor)</td>
			<td><span id="fragment">&nbsp;</span></td>
		</tr>
		<tr>
			<td>param</td>
			<td><span id="param">&nbsp;</span></td>
		</tr>
		<tr>
			<td>sky</td>
			<td><span id="sky">&nbsp;</span></td>
		</tr>
		<tr>
			<td>grass</td>
			<td><span id="grass">&nbsp;</span></td>
		</tr>
		<tr>
			<td>segment</td>
			<td><span id="segment">&nbsp;</span></td>
		</tr>
		<tr>
			<td>segment1</td>
			<td><span id="segment1">&nbsp;</span></td>
		</tr>
		<tr>
			<td>segment2</td>
			<td><span id="segment2">&nbsp;</span></td>
		</tr>
		<tr>
			<td>segment3</td>
			<td><span id="segment3">&nbsp;</span></td>
		</tr>
		<tr>
			<td style="background-color: lightgrey;">source1</td>
			<td style="background-color: lightgrey;"><span id="source1">&nbsp;</span></td>
		</tr>
		<tr>
			<td>fparam</td>
			<td><span id="fparam">&nbsp;</span></td>
		</tr>
		<tr>
			<td>sky1</td>
			<td><span id="sky1">&nbsp;</span></td>
		</tr>
		<tr>
			<td>grass1</td>
			<td><span id="grass1">&nbsp;</span></td>
		</tr>
		<tr>
			<td style="background-color: lightgrey;">source2</td>
			<td style="background-color: lightgrey;"><span id="source2">&nbsp;</span></td>
		</tr>
		<tr>
			<td>fsegment</td>
			<td><span id="fsegment">&nbsp;</span></td>
		</tr>
		<tr>
			<td>about</td>
			<td><span id="about">&nbsp;</span></td>
		</tr>
		<tr>
			<td>us</td>
			<td><span id="us">&nbsp;</span></td>
		</tr>
	</tbody>
</table>



<script type="text/javascript">
//<![CDATA[

$(function () {

    var url = $.url('http://test.com:8080/directory1/directory2/page.php?sky=blue&grass=green#about-us');
    var source = url.attr('source');
    var protocol = url.attr('protocol');
    var host = url.attr('host');
    var port = url.attr('port');
    var relative = url.attr('relative');
    var path = url.attr('path');
    var directory = url.attr('directory');
    var file = url.attr('file');
    var query = url.attr('query');
    var fragment = url.attr('fragment');
    var anchor = url.attr('anchor');

    var param = url.param();
    var sky = url.param('sky');
    var grass = url.param('grass');

    var segment = url.segment();
    var segment1 = url.segment(1);
    var segment2 = url.segment(-2);
    var segment3 = url.segment(3);

    url = $.url('http://test.com/#sky=blue&grass=green');
    var source1 = url.attr('source');
    var fparam = url.fparam();
    var sky1 = url.fparam('sky');
    var grass1 = url.fparam('grass');

    url = $.url('http://test.com/#/about/us/');
    var source2 = url.attr('source');
    var fsegment = url.fsegment();
    var about = url.fsegment(1);
    var us = url.fsegment(-1);

    $('#source').html(source);
    $('#protocol').html(protocol);
    $('#host').html(host);
    $('#port').html(port);
    $('#relative').html(relative);
    $('#path').html(path);
    $('#directory').html(directory);
    $('#file').html(file);
    $('#query').html(query);
    $('#fragment').html(fragment);

    $('#param').html($.JSON.encode(param));
    $('#sky').html(sky);
    $('#grass').html(grass);

    $('#segment').html($.JSON.encode(segment));
    $('#segment1').html(segment1);
    $('#segment2').html(segment2);
    $('#segment3').html(segment3);

    $('#source1').html(source1);
    $('#fparam').html($.JSON.encode(fparam));
    $('#sky1').html(sky1);
    $('#grass1').html(grass1);

    $('#source2').html(source2);
    $('#fsegment').html($.JSON.encode(fsegment));
    $('#about').html(about);
    $('#us').html(us);

});

//]]>
</script>

</body>
</html>