format/index.html at master · krzyzak00/format · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="jquery.format.js"></script>
		<title>jQuery Format Plugin</title>

		<script type="text/javascript">
		// <![CDATA[
		$(document).ready( function() {

			$('button').click( function() {

				$('p.code').each( function(k, v) {
					try {
						v.innerHTML += ($.fn.format('<span>{}</span>', eval(v.innerHTML)));
					} catch(e) {
						throw('Eval error ' + e)
					}
				});

				$(this).attr('disabled', 'disabled');
			});
		});
		//]]>
		</script>

		<style type="text/css">
			span { display: block; font-family: sans-serif; }
			.code { font-family: monospace; margin-top: 5px;}
		</style>

	</head>
	<body>

		<h1>Tiny jQuery string format plugin</h1>
		<h2>Adds Python-like format function to jQuery</h2>
		<h3>Usage examples:</h3>
		<p class="code">
			$.fn.format('The quick {} {} jumped over the {} {}', "brown", "fox", "lazy", "dog");
		</p>
		<p class="code">
			$.fn.format('The quick {0} {2} jumped over the {1} {3}', "brown", "lazy", "fox", "dog");
		</p>
		<p class="code">
			$.fn.format('The quick {_brown_} {_fox_} jumped over the {_lazy_} {_dog_}', {
				_brown_: "brown",
				_fox_: "Fox",
				_lazy_: "lazy",
				_dog_: "Dog"
			});
		</p>
		<p class="code">
			$.fn.format('The quick {0} {1} jumped over the {2} {3}', {
				0: "brown",
				1: "fox",
				2: "lazy",
				3: "dog"
			});
		</p>
		<p><br />Click to eval code above</p>
		<button>Format</button>

	</body>
</html>