-
Notifications
You must be signed in to change notification settings - Fork 10
/
uiji.html
90 lines (88 loc) · 4.57 KB
/
uiji.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<title>uiji.js by Aakil Fernandes</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.snippet.js"></script>
<script type="text/javascript" src="scripts/beautify.js"></script>
<script type="text/javascript" src="scripts/uiji.js"></script>
<script type="text/javascript" src="scripts/uiji.hnComments.js"></script>
<script type="text/javascript" src="scripts/googleAnalytics.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/ui.forms.js"></script>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Bitter:400,700,400italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style/reset.css"/>
<link rel="stylesheet" href="style/style.css"/>
<link rel="stylesheet" href="style/colorBar.css"/>
<link rel="stylesheet" href="style/jquery.snippet.css"/>
<link rel="stylesheet" href="style/uiji.hnComments.css"/>
</head>
<body>
<script type="text/javascript">
page={
title:'uiji.js',
tagline:'Reverse jQuery',
githubRepo:'uiji',
contentCallback:function(){$(this)
.uiji('.section',function(){$(this)
.uiji('p"We know that we can use jQuery to select elements like so:"')
.uiji(snippet("$('#main') ",'javascript'))
.uiji('.divider')
.uiji('p"But with uiji.js, you can use the same syntax to <b>create</b> jQuery elements."')
.uiji(holder('helloWorld',demos.helloWorld))
.uiji('p"Or you can pass in an object. Note that I used a string \'class\' for instead of a key. This is because \'class\' is a reserved word, and using it as a key will cause a crash in older browsers."')
.uiji(holder('objectWorld',demos.objectWorld))
.uiji('p"When you\'ve got a lot of html to create, you can use some baked in shortcuts."')
.uiji(holder('slimShady',demos.slimShady))
.uiji('p"You can use callbacks to create heirarchy."')
.uiji(holder('heirarchy',demos.heirarchy))
.uiji('p"Use templates for ease. This demo uses a uiji.js template \'timeButton\'. Create some timeButtons and click to check when they were created"')
.uiji(holder('timeButton',demos.timeButton))
.uiji('p"How far can you take uiji.js? If you view the source of this page you\'ll see that the entire body was created with jQuery."')
.uiji('p.viewSource',function(){
var $this=$(this);
$.get('',function(data){
window.x=data;
$this.uiji(snippet(data,'html'))
})
})
.uiji('p"Thats definitely overkill. I did it just so I\'d have to confront as many kinks as possible. But the great thing about uiji.js is that you can switch between jQuery and plain ol\l HTML when it suits you. Check the source code for more examples."')
.uiji('p"uiji.js has been tested in (Mobile) Safari, Chrome, Firefox, and IE7+."')
.uiji('.divider')
.uiji(hnComments(4678482))
})
}
}
demos = {
helloWorld:function(){$('#helloWorld .output').uiji('p.greeting"Hello World!"')},
objectWorld:function(){$('#objectWorld .output').uiji({tag:'p','class':'greeting',html:'Hello Object World!'})},
slimShady:function(){$('#slimShady .output')
.uiji('p{style=font-style:italic;}"May I have your attention please"*2')
.uiji('a{href=http://en.wikipedia.org/wiki/Eminem|target=blank"}"Will the real Slim Shady please stand up."')
},
heirarchy:function(){$('#heirarchy .output')
.uiji('.white.block',function(){$(this)
.uiji('.gray.block*2',function(){$(this)
.uiji('.black.block*2')
})
})
},
timeButton:function(){
var timeButton = function(time){
return uiji('.time.button',function(){$(this)
.uiji({tag:'input',type:'submit',value:'When was I born?','class':'emphasis'},function(){$(this)
.click(function(){alert(time)});
})})
}
var time = new Date().getTime();
$('#timeButton .output').uiji(timeButton(time))
}
}
</script>
<noscript>
This is a demo for uiji.js that requires javascript. You can view the repo at
<a href="http://github.com/aakilfernandes/uiji">http://github.com/aakilfernandes/uiji</a>
</noscript>
</body>
</html>