-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathaciPlugin.html
171 lines (133 loc) · 6.58 KB
/
aciPlugin.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
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<title>aciPlugin demo - A jQuery plugin boilerplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.aciPlugin.js"></script>
</head>
<body>
<p>Dig into source code and/or visit the
<a href="http://acoderinsights.ro/en/aciPlugin-a-helper-for-jQuery-plugin-creation" title="A jQuery plugin boilerplate">page</a>
to read about this sample plugin implementation.</p>
<p>See a demo for private data usage <a href="private.html" target="_blank" title="Private data usage">here</a>.</p>
<p>See a demo for _super (parent method call) <a href="super.html" target="_blank" title="Parent method call">here</a>.</p>
<p>(<span style="color:red">new</span>) See a demo for setting/getting namespaced options <a href="namespaced-options.html" target="_blank" title="Namespaced options">here</a></p>
<a class="button" href="#" title="">button</a> (changed each time) <br />
<a class="button1" href="#" title="">button 1</a> <br />
<a class="button2" href="#" title="">button 2</a> <br />
<a class="button3" href="#" title="">button 3</a> <br />
<a class="button4" href="#" title="">button 4</a> <br />
<a class="button5" href="#" title="">button 5</a> <br />
<a class="button6" href="#" title="">button 6</a> <br />
<script class="code" type="text/javascript">
// create 'myButton' plugin ...
(function($){
// create myButton plugin to make a link (for example) into a button
// with padding set, a background color and display inline-block
aciPluginClass.plugins.myButton = aciPluginClass.aciPluginUi.extend({
init: function(){
this._super();
// we do not use states for this plugin ...
// but we should check for 'wasInit' for a stateful plugin
// (and implement the 'destroy' function)
this._instance.jQuery.css({
display: 'inline-block',
'background-color': this._instance.options.bg,
padding: this._instance.options.padding
});
// destroy it cause there is no need for it anymore (the job was done)
this.destroy();
}
});
// register the plugin to be usable (with default options set)
aciPluginClass.publish('myButton', {
bg: '#ffc',
padding: '15px'
});
})(jQuery);
// because the extended code it's not included yet (till this point)
// only the original plugin will be run (no borders yet...)
var timer = 0;
setTimeout(function(){
// use myButton plugin with the default options
$('a.button1,a.button').myButton();
}, timer += 1500);
setTimeout(function(){
// set one default option and use it again
$.fn.myButton.defaults.padding = '5px';
$('a.button2,a.button').myButton();
}, timer += 1500);
setTimeout(function(){
// run it again with an option set
$('a.button3,a.button').myButton({
padding: '10px'
});
}, timer += 1500);
// extend 'myButton' plugin ...
(function($){
// extend myButton to set a border on the button
aciPluginClass.plugins.myButton = aciPluginClass.plugins.myButton.extend({
init: function(){
this._instance.jQuery.css({
'border-style': this._instance.options.style,
'border-width': this._instance.options.width,
'border-color': this._instance.options.color
});
// call the original 'init'
this._super();
}
});
// add a few more default options
aciPluginClass.defaults('myButton', {
style: 'solid',
width: '1px',
color: '#000'
});
})(jQuery);
// because the extended code is 'visible' from this point on
// the original plugin was exdended and will be run with the border stuff
setTimeout(function(){
// use myButton plugin with the default (but changed) options
$('a.button4,a.button').myButton();
}, timer += 1500);
setTimeout(function(){
// set one default option and use it again
$.fn.myButton.defaults.style = 'dashed';
$('a.button5,a.button').myButton();
}, timer += 1500);
setTimeout(function(){
// run it again with options set
$('a.button6,a.button').myButton({
autoInit: false, // init it later ;)
padding: '10px',
width: '4px',
color: 'red',
bg: 'cyan'
}).myButton('init');
}, timer += 1500);
// or using the 'api' ...
setTimeout(function(){
$('a.button6,a.button').myButton({
autoInit: false, // init it later ;)
padding: '10px',
width: '4px',
color: 'red',
bg: 'cyan',
style: 'dotted'
}).each(function(){
// we need to get the 'api' for each element
$(this).myButton('api').init();
});
}, timer += 1500);
</script>
<script type="text/javascript">
$(function() {
$('script.code').each(function() {
$(this).before('<div style="clear:both;margin:10px 0 10px 0"><pre style="padding:20px;border:1px dashed #000;background:#f6f6f6;display:inline-block;"></pre></div>');
$(this).prev('div').find('pre').text($(this).html());
});
});
</script>
</body>
</html>