Skip to content

Commit 48a53ae

Browse files
author
InfinitiesLoop
committed
first commit
0 parents  commit 48a53ae

File tree

3 files changed

+465
-0
lines changed

3 files changed

+465
-0
lines changed

‎README.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
A jQuery live bindings plugin - created for demonstration purposes.
2+
Adds 'attrChanging', 'attrChange', 'arrayChanging', 'arrayChange' events.
3+
Adds jQuery.x array operations: pop, push, splice, sort, reverse, shift, unshift
4+
Adds linkTo, linkFrom, and linkBoth plugins.
5+
6+
'attrChange' event -- be notified when an attribute is changed.
7+
8+
function report(ev) {
9+
alert("Change attr '" + ev.attrName + "' from '" +
10+
ev.oldValue + "' to '" + ev.newValue + "'.");
11+
}
12+
13+
$("#el").attrChange(report)
14+
// Change attr 'foo' from 'undefined' to 'bar'
15+
.attr("foo", "bar").
16+
// Change attr 'foo' from 'bar' to 'baz'
17+
.attr("foo", "baz");
18+
19+
// restricted scope
20+
$("#el").attrChange("x", report)
21+
// Change attr 'x' from 'undefined' to '1'
22+
.attr( { x: "1", y: "2" } );
23+
24+
$("#el").attrChange([ "x", "y" ], report)
25+
// Change attr 'x' from 'undefined' to '1'
26+
// Change attr 'y' from 'undefined' to '2'
27+
.attr( { x: "1", y: "2", z: "3" } );
28+
29+
// consolidating different mutation operations
30+
// rather than a 'dataChange' event for data() operations
31+
32+
$("#el").attrChange("data:foo", report)
33+
// Change attr 'data:foo' from 'undefined' to 'bar'
34+
.data( "foo", "bar" )
35+
// Change attr 'data:!' from '[Object object]' to '[Object object]'
36+
.data( { } );
37+
38+
// works with val()
39+
$("#el").attrChange("val", report)
40+
// Change attr 'val' from 'hi' to 'bye'
41+
.val( 'bye' );
42+
43+
'attrChanging' event -- be notified before an attribute changes
44+
45+
$("#el")
46+
.attrChanging(function(ev) {
47+
if (!confirm("Allow changing attr '" + ev.attrName + "' from '" +
48+
ev.oldValue + "' to '" + ev.newValue + "'?")) {
49+
50+
ev.preventDefault();
51+
}
52+
53+
})
54+
// Allow changing attr 'y' from 'undefined' to '2'?
55+
// yes: value set, attrChange event raised
56+
// no: value not set, attrChange event not raised
57+
.attr("foo", "bar");
58+
59+
'arrayChange' event -- be notified when an array is modified
60+
61+
var arr = [1,2,3];
62+
$([arr])
63+
.arrayChange(function(ev) {
64+
alert("Array operation " + ev.change + " executed with args " + ev.arguments);
65+
});
66+
// Array operation push executed with args 4,5
67+
$.push(arr, 4, 5);
68+
69+
// restricted scope
70+
$("push", [arr])
71+
.arrayChange(function(ev) {
72+
alert("Array operation " + ev.change + " executed with args " + ev.arguments);
73+
});
74+
// nothing
75+
$.pop(arr);
76+
// Array operation push executed with args 4,5
77+
$.push(arr, 4, 5);
78+
79+
$(["push", "pop", "splice"], [arr])
80+
.arrayChange(function(ev) {
81+
alert("Array operation " + ev.change + " executed with args " + ev.arguments);
82+
});
83+
// Array operation pop executed with args undefined
84+
$.pop(arr);
85+
// Array operation push executed with args 4,5
86+
$.push(arr, 4, 5);
87+
// nothing
88+
$.splice(arr, 0, 1);
89+
90+
'arrayChanging' event -- be notified before an array is modified
91+
// works just like 'attrChange', can cancel operation
92+
93+
'linkTo' plugin -- bind the value of the current object to the value of another
94+
95+
var person = {};
96+
$("#name").linkTo("val", person, "name");
97+
alert(person.name); // $("#name").val()
98+
$("#name").val("foo");
99+
alert(person.name); // foo
100+
// ... user changes value ...
101+
alert(person.name); // <user typed value>
102+
103+
'linkFrom' plugin -- bind the value of the current object from the value of another
104+
105+
var person = {};
106+
$(person).linkFrom("name", "#name", "val");
107+
alert(person.name); // $("#name").val()
108+
$("#name").val("foo");
109+
alert(person.name); // foo
110+
// ... user changes value ...
111+
alert(person.name); // <user typed value>
112+
113+
'linkBoth' plugin -- links the values of two objects to each other
114+
var person = {};
115+
$(person).linkBoth("name", "#name", "val");
116+
alert(person.name); // $("#name").val()
117+
$("#name").val("foo");
118+
alert(person.name); // foo
119+
$(person).attr("name", "bob");
120+
alert($("#name").val()); // bob

‎demo.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<style type="text/css">
2+
.field {
3+
display: block
4+
}
5+
.person {
6+
cursor: Hand;
7+
color: Blue;
8+
text-decoration: underline
9+
}
10+
</style>
11+
<script src="http://code.jquery.com/jquery.js"></script>
12+
<script src="jquery.livelink.js"></script>
13+
<script>
14+
jQuery(function(){
15+
16+
var person = {
17+
id: 1,
18+
name: "John Doe",
19+
bio: "Gets around."
20+
}
21+
22+
var person2 = {
23+
id: 2,
24+
name: "Jane Doe",
25+
bio: "Unlucky."
26+
}
27+
28+
var persons = [ person, person2 ];
29+
30+
$.fn.convertFn.enclose = function(value) {
31+
return "[" + value + "]";
32+
}
33+
34+
$("#label").linkFrom("text", "#name", "val", "enclose");
35+
$("#preview").linkFrom("html", "#html", "val");
36+
$(person)
37+
.linkBoth("name", "#name", "val")
38+
.linkBoth("bio", "#html", "val");
39+
40+
$("#showme").click(function() {
41+
alert("Name '" + person.name + "', bio '" + person.bio + "'");
42+
});
43+
$("#revert").click(function() {
44+
$(person).attr({
45+
name: "John Doe",
46+
bio: "Gets around."
47+
});
48+
});
49+
50+
var maxid = 2;
51+
$("#addperson").click(function() {
52+
$.push( persons, {
53+
id: maxid++,
54+
name: person.name,
55+
bio: person.bio
56+
});
57+
});
58+
59+
$([persons]).arrayChange(function(ev) {
60+
alert("Changed array with operation '" + ev.change + "'. args: " + ev.arguments);
61+
showPersons();
62+
});
63+
64+
function showPersons() {
65+
$("ul").empty();
66+
$(persons)
67+
.each(function() {
68+
$("<li/>", { "data-id" : this.id, text: this.name, class: "person" })
69+
.click(function() {
70+
var id = parseInt($(this).attr("data-id"));
71+
$.each(persons, function(i) {
72+
if ( this.id === id ) {
73+
$.splice(persons, i, 1);
74+
return false;
75+
}
76+
});
77+
})
78+
.appendTo("ul");
79+
});
80+
}
81+
showPersons();
82+
83+
});
84+
</script>
85+
<div>
86+
<input type="button" id="showme" value="Data?" />
87+
<input type="button" id="revert" value="Revert" />
88+
</div>
89+
<span class="field">Enter your name:</span>
90+
<input type="text" value="" size="30" id="name" /> <span id="label"></span>
91+
92+
<span class="field">Enter some HTML</span>
93+
<textarea id="html" rows="15" cols="50"></textarea>
94+
<span class="field">Preview</span>
95+
<div id="preview"></div>
96+
97+
<div>
98+
Dealing with arrays
99+
<ul></ul>
100+
<input type="button" id="addperson" value="add person" />
101+
</div>

0 commit comments

Comments
 (0)