Skip to content

Commit 717e0e4

Browse files
addyosmaniaddyosmani
committed
adding basic demo files for all patterns
1 parent b01a3e7 commit 717e0e4

27 files changed

+11154
-19
lines changed

‎index-basic-plugin.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
<script type="text/javascript" src="patterns/jquery.basic.plugin-boilerplate.js"></script>
7+
</head>
8+
<body>
9+
<script type="text/javascript">
10+
$(function(){
11+
console.log($('body').defaultPluginName());
12+
});
13+
</script>
14+
15+
</body>
16+
</html>

‎index-best-options.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
<script type="text/javascript" src="patterns/jquery.best.options.plugin-boilerplate.js"></script>
7+
</head>
8+
<body>
9+
<script type="text/javascript">
10+
$(function(){
11+
console.log($('body').pluginName());
12+
});
13+
</script>
14+
15+
</body>
16+
</html>

‎index-custom-events.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
7+
<script type="text/javascript" src="patterns/jquery.customevents.plugin-boilerplate.js"></script>
8+
</head>
9+
<body>
10+
<script type="text/javascript">
11+
$(function(){
12+
13+
console.log($('body').eventStatus());
14+
$('body').eventStatus().trigger('myEventStart');
15+
});
16+
</script>
17+
18+
</body>
19+
</html>

‎index-extend-skeleton.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="patterns/jquery.extend-skeleton.js"></script>
8+
</head>
9+
<body>
10+
<script type="text/javascript">
11+
$(function(){
12+
console.log($('body').pluginname());
13+
});
14+
</script>
15+
16+
</body>
17+
</html>

‎index-highly-configurable.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
<script type="text/javascript" src="patterns/jquery.highly-configurable.plugin.boilerplate.js"></script>
7+
</head>
8+
<body>
9+
<script type="text/javascript">
10+
$(function(){
11+
console.log($('body').plugin());
12+
});
13+
</script>
14+
15+
</body>
16+
</html>

‎index-namespace.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="patterns/jquery.namespace.plugin-boilerplate.js"></script>
8+
</head>
9+
<body>
10+
<script type="text/javascript">
11+
$(function(){
12+
console.log($('body').mynamespace_myPluginName());
13+
});
14+
</script>
15+
16+
</body>
17+
</html>

‎index-prototypal-inheritance.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="patterns/jquery.prototypal-inheritance.plugin-boilerplate.js"></script>
8+
</head>
9+
<body>
10+
<script type="text/javascript">
11+
$(function(){
12+
13+
$.plugin('myobj', myObject);
14+
15+
$('body').myobj({name: "John"});
16+
17+
var inst = $('body').data('myobj');
18+
inst.myMethod('I am a method');
19+
20+
});
21+
</script>
22+
23+
</body>
24+
</html>

‎index-widget-factory-bridge.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
8+
9+
<script type="text/javascript" src="patterns/jquery.widget-factory.bridge.boilerplate.js"></script>
10+
</head>
11+
<body>
12+
<script type="text/javascript">
13+
$(function(){
14+
15+
// connect the widget obj to jQuery's API under the "foo" namespace
16+
$.widget.bridge("foo", widgetName);
17+
18+
// create an instance of the widget for use
19+
var instance = $('body').foo({
20+
baz: true
21+
});
22+
23+
// your widget instance exists in the elem's data
24+
console.log(instance.data("foo").element); // => #elem element
25+
26+
// bridge allows you to call public methods...
27+
instance.foo("publicFunction"); // => "public method"
28+
29+
// bridge prevents calls to internal methods
30+
instance.foo("_privateFunction"); // => #elem element
31+
32+
});
33+
</script>
34+
35+
</body>
36+
</html>

‎index-widget-factory-mobile.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
8+
9+
<script type="text/javascript" src="patterns/jquery.widget-factory.mobile-plugin.boilerplate.js"></script>
10+
</head>
11+
<body>
12+
<script type="text/javascript">
13+
$(function(){
14+
var instance = ($('body').widgetName({
15+
foo: false
16+
}));
17+
console.log(instance);
18+
19+
instance.widgetName('methodB');
20+
});
21+
</script>
22+
23+
</body>
24+
</html>

‎index-widget-factory-plugin-boilerplate.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
6+
7+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
8+
9+
<script type="text/javascript" src="patterns/jquery.widget-factory.plugin-boilerplate.js"></script>
10+
</head>
11+
<body>
12+
<script type="text/javascript">
13+
$(function(){
14+
var instance = ($('body').widgetName({
15+
foo: false
16+
}));
17+
console.log(instance);
18+
19+
instance.widgetName('methodB');
20+
});
21+
</script>
22+
23+
</body>
24+
</html>

‎index-widget-factory.requirejs.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>jQuery Plugin Patterns</title>
4+
5+
6+
<script data-main="scripts/main" src="http://requirejs.org/docs/release/1.0.1/minified/require.js"></script>
7+
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎amd+commonjs/pluginCore.js ‎patterns/amd+commonjs/pluginCore.js

File renamed without changes.

‎amd+commonjs/pluginExtension.js ‎patterns/amd+commonjs/pluginExtension.js

File renamed without changes.

‎amd+commonjs/usage.html ‎patterns/amd+commonjs/usage.html

File renamed without changes.

‎jquery.basic.plugin-boilerplate.js ‎patterns/jquery.basic.plugin-boilerplate.js

File renamed without changes.

‎jquery.best-options.plugin-boilerplate.js ‎patterns/jquery.best.options.plugin-boilerplate.js

File renamed without changes.

‎jquery.customevents.plugin-boilerplate.js ‎patterns/jquery.customevents.plugin-boilerplate.js

File renamed without changes.

‎jquery.extend-skeleton.js ‎patterns/jquery.extend-skeleton.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* jQuery extend-based plugin boilerplate
33
* Author: @oscargodson
4-
* Further changes: @timmywil
4+
* Further changes: @timmywil, @addyosmani
55
* Licensed under the MIT license
66
*/
77

‎jquery.highly-configurable.plugin.boilerplate.js ‎patterns/jquery.highly-configurable.plugin.boilerplate.js

File renamed without changes.

‎jquery.namespace.plugin-boilerplate.js ‎patterns/jquery.namespace.plugin-boilerplate.js

File renamed without changes.

‎jquery.prototypal-inheritance.plugin-boilerplate.js ‎patterns/jquery.prototypal-inheritance.plugin-boilerplate.js

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ var myObject = {
3232
myMethod: function( msg ){
3333
// You have direct access to the associated and cached
3434
// jQuery element
35+
console.log('myMethod triggered');
3536
// this.$elem.append('<p>'+msg+'</p>');
3637
}
3738
};

‎jquery.widget-factory.bridge.boilerplate.js ‎patterns/jquery.widget-factory.bridge.boilerplate.js

File renamed without changes.

‎jquery.widget-factory.mobile-plugin.boilerplate.js ‎patterns/jquery.widget-factory.mobile-plugin.boilerplate.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@
3131
},
3232

3333
// Private methods/props start with underscores
34-
_dosomething: function(){ ... },
34+
_dosomething: function(){ },
3535

3636
// Public methods like these below can can be called
3737
// externally:
3838
// $("#myelem").foo( "enable", arguments );
3939

40-
enable: function() { ... },
40+
enable: function() { },
4141

4242
// Destroy an instantiated plugin and clean up modifications
4343
// the widget has made to the DOM
@@ -57,25 +57,26 @@
5757
// [uiObject] )
5858
// eg. this._trigger( "hover", e /*where e.type ==
5959
// "mouseenter"*/, { hovered: $(e.target)});
60-
this._trigger('methodA', event, {
61-
key: value
62-
});
60+
console.log('method B called');
61+
//this.methodA();
6362
},
6463

6564
methodA: function ( event ) {
6665
this._trigger('dataChanged', event, {
67-
key: value
66+
key: 'someValue'
6867
});
6968
},
7069

7170
//Respond to any changes the user makes to the option method
7271
_setOption: function ( key, value ) {
7372
switch (key) {
7473
case "someValue":
75-
//this.options.someValue = doSomethingWith( value );
74+
// this is all optional
75+
this.options.someValue = doSomethingWith( value );
7676
break;
7777
default:
78-
//this.options[ key ] = value;
78+
// optional
79+
this.options[ key ] = value;
7980
break;
8081
}
8182

‎jquery.widget-factory.plugin-boilerplate.js ‎patterns/jquery.widget-factory.plugin-boilerplate.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
// existing widget prototype to inherit from, an object
1414
// literal to become the widget's prototype );
1515

16-
$.widget( "namespace.widgetname" , {
16+
$.widget( "namespace.widgetName" , {
1717

1818
//Options to be used as defaults
1919
options: {
@@ -52,14 +52,12 @@
5252
// [uiObject] )
5353
// eg. this._trigger( "hover", e /*where e.type ==
5454
// "mouseenter"*/, { hovered: $(e.target)});
55-
this._trigger('methodA', event, {
56-
key: value
57-
});
55+
console.log('methodB called');
5856
},
5957

6058
methodA: function ( event ) {
6159
this._trigger('dataChanged', event, {
62-
key: value
60+
key: 'someValue'
6361
});
6462
},
6563

‎jquery.widget-factory.requirejs.boilerplate.js ‎patterns/jquery.widget-factory.requirejs.boilerplate.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
// Then you can construct the widget like so:
1919

2020
//ao.myWidget.js file:
21-
define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
21+
//Uncomment this version for a sample using templates
22+
//define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.min","jquery.tmpl"], function ($, assetHtml) {
23+
define("ao.myWidget", ["jquery", "jqueryui"], function ($) {
2224

2325
// define your widget under a namespace of your choice
2426
// 'ao' is used here as a demonstration
@@ -59,14 +61,12 @@ define("ao.myWidget", ["jquery", "text!templates/asset.html", "jquery-ui.custom.
5961
// subscribe to
6062
//signature: _trigger( "callbackName" , [eventObject],
6163
// [uiObject] )
62-
this._trigger('methodA', event, {
63-
key: value
64-
});
64+
console.log('methodB called');
6565
},
6666

6767
methodA: function ( event ) {
6868
this._trigger('dataChanged', event, {
69-
key: value
69+
key: 'someValue'
7070
});
7171
},
7272

‎scripts/main.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
require({
2+
3+
paths: {
4+
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
5+
'jqueryui': 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min',
6+
'boilerplate': '../patterns/jquery.widget-factory.requirejs.boilerplate'
7+
}
8+
}, ['require', 'jquery', 'jqueryui', 'boilerplate'],
9+
function (req, $) {
10+
11+
$(function () {
12+
var instance = ($('body').myWidget());
13+
console.log(instance);
14+
15+
instance.myWidget('methodB');
16+
17+
});
18+
});

0 commit comments

Comments
 (0)