/
example.html
71 lines (69 loc) · 2.52 KB
/
example.html
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
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="states.js"></script>
<style type="text/css" media="screen">
html, body, div, h1, h2, h3, p {
margin: 0; padding: 0; font: 14px/20px arial, sans-serif; }
body {
width: 600px; margin: 0 auto; }
.header {
float: left; color: #750; background-color: #fc0; width: 100%; }
.header > * {
padding:10px; }
.header h1 {
float: left; font-weight: 800; }
.header .utils {
float: right; }
.post h2, .post h3 {
font-weight: 800; }
.post h2 {
font-size: 18px; line-height: 36px; }
.post h3 {
font-size: 14px; line-height: 28px; }
.post p {
width: 40em; }
.post textarea, .post input {
display: block; }
</style>
</head>
<body>
<div class="header">
<h1>states.js example</h1>
<p class="utils">
<span class="state" title="Logged in">
Welcome Tim!
<a href="#">Logout</a>
</span>
<span class="state" title="Comments closed">
Welcome Tim!
<a href="#">Logout</a>
</span>
<span class="state" title="Not logged in">
<a href="">Login</a> or <a href="">Register</a>
</span>
</p>
</div>
<div class="post">
<h2>Some great article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Leave a comment</h3>
<div class="state" title="Comments closed">
<p>Comments are now closed for this article.</p>
</div>
<div class="state" title="Logged in">
<form action="">
<textarea></textarea>
<input type="submit" />
</form>
</div>
<div class="state" title="Not logged in">
You must <a href="">Login</a> or <a href="">Register</a> before you can comment
</div>
</div>
</body>
</html>