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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.sub()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/core/" title="View all posts in Core">Core</a></span>
</div>
</div>
<div id="jQuery-sub1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.sub()</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.</p>
<ul class="signatures"><li class="signature" id="jQuery-sub"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.5/">1.5</a></span>jQuery.sub()</h4></li></ul>
<div class="longdesc">
<p>There are two specific use cases for which jQuery.sub() was created. The first was for providing a painless way of overriding jQuery methods without completely destroying the original methods and another was for helping to do encapsulation and basic namespacing for jQuery plugins.</p>
<p>Note that jQuery.sub() doesn't attempt to do any sort of isolation - that's not its intention. All the methods on the sub'd version of jQuery will still point to the original jQuery (events bound and triggered will still be through the main jQuery, data will be bound to elements through the main jQuery, Ajax queries and events will run through the main jQuery, etc.).</p>
<p>Note that if you're looking to use this for plugin development you should first <i>strongly</i> consider using something like the jQuery UI widget factory which manages both state and plugin sub-methods. <a href="http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/">Some examples of using the jQuery UI widget factory</a> to build a plugin.</p>
<p>The particular use cases of this method can be best described through some examples.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Adding a method to a jQuery sub so that it isn't exposed externally:</span>
</h4>
<pre class="prettyprint"><code class="example"> (function(){
var sub$ = jQuery.sub();
sub$.fn.myCustomMethod = function(){
return 'just for me';
};
sub$(document).ready(function() {
sub$('body').myCustomMethod() // 'just for me'
});
})();
typeof jQuery('body').myCustomMethod // undefined</code></pre>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Override some jQuery methods to provide new functionality.</span>
</h4>
<pre class="prettyprint"><code class="example">
(function() {
var myjQuery = jQuery.sub();
myjQuery.fn.remove = function() {
// New functionality: Trigger a remove event
this.trigger("remove");
// Be sure to call the original jQuery remove method
return jQuery.fn.remove.apply( this, arguments );
};
myjQuery(function($) {
$(".menu").click(function() {
$(this).find(".submenu").remove();
});
// A new remove event is now triggered from this copy of jQuery
$(document).bind("remove", function(e) {
$(e.target).parent().hide();
});
});
})();
// Regular jQuery doesn't trigger a remove event when removing an element
// This functionality is only contained within the modified 'myjQuery'.</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">Create a plugin that returns plugin-specific methods.</span>
</h4>
<pre class="prettyprint"><code class="example">
(function() {
// Create a new copy of jQuery using sub()
var plugin = jQuery.sub();
// Extend that copy with the new plugin methods
plugin.fn.extend({
open: function() {
return this.show();
},
close: function() {
return this.hide();
}
});
// Add our plugin to the original jQuery
jQuery.fn.myplugin = function() {
this.addClass("plugin");
// Make sure our plugin returns our special plugin version of jQuery
return plugin( this );
};
})();
$(document).ready(function() {
// Call the plugin, open method now exists
$('#main').myplugin().open();
// Note: Calling just $("#main").open() won't work as open doesn't exist!
});</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
