-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathexample.htm
95 lines (78 loc) · 3.02 KB
/
example.htm
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
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<title>jQuery Create Event Demos - Eric Hynds</title>
<link type="text/css" rel="stylesheet" href="http://www.erichynds.com/examples/style.css" />
<link type="text/css" rel="stylesheet" href="http://www.erichynds.com/examples/prettify.css" />
<style type="text/css">
h2 { margin-top:0 }
div { margin-bottom:10px }
#create-new-div { font-weight:bold; text-decoration:underline; font-size:14px }
</style>
</head>
<script type="text/javascript" src="http://www.erichynds.com/examples/prettify.js"></script>
<body onload="prettyPrint()">
<div id="bar">
<h1><a href="http://www.erichynds.com">eric<span>hynds</span></a></h1>
<div><a href="http://www.erichynds.com/jquery/jquery-create-event">« Return to Blog Post</a></div>
</div>
<div id="content">
<h2>jQuery "create" Event Demo</h2>
<p>This new event duck punches <code>$.fn.domManip</code> and <code>$.fn.html</code> to fire a custom "create" event when new, matching elements are inserted into the DOM.</p>
<ul>
<li><a href="/jquery/jquery-create-event/">Return to blog post</a></li>
<li><a href="http://github.com/ehynds/jquery-create-event/raw/master/jquery.create.js" target="_blank">Download</a> and <a href="http://github.com/ehynds/jquery-create-event" target="_blank">follow</a> on GitHub</li>
</ul>
<p>Code for this demo:</p>
<pre class="prettyprint" style="margin-bottom:20px; padding:8px; background:#f1f1f1; width:710px">
$.fn.geocities(function(){
/*
code to make a div look friggin sweet.
wraps text in marquee and applies a
beautiful color scheme.
*/
});
// apply plugin to all current div.geocities
$("div.geocities").geocities();
// apply plugin to all future div.geocities
$("div.geocities").live("create", function(e){
$(this).text("I am a new element!").geocities();
});
// the "create another" link
$("#create-new-div").click(function(){
$("div.geocities:last").after('<div class="geocities"></div>');
return false;
});
</pre>
<p><a id="create-new-div" href="#">Create another</a></p>
<div class="geocities">Welcome to 1999. Look at me go!!</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.create.js"></script>
<script type="text/javascript">
// plugin to geocityify a div. obviously the CSS should go into a class but you get the idea.
$.fn.geocities = function(){
return this.css({
border:"5px solid red",
padding:"10px",
width:"695px",
background:"#0042ff",
color:"#ffff00",
fontWeight:"bold",
textTransform:"uppercase",
fontFamily:"comic sans ms, serif"
}).contents().wrap("<marquee></marquee>");
}
$("#create-new-div").click(function(){
$("div.geocities:last").after('<div class="geocities"></div>');
return false;
});
// apply plugin to all div.geocities in the DOM now
$("div.geocities").geocities();
// apply plugin to all future div.geocities elements
$("div.geocities").live("create", function(e){
$(this).text("I am a new element!").geocities();
});
</script>
</body>
</html>