Report abuse 

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

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Extensible jQuery</title>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="simple-inheritance.js"></script>
	<script type="text/javascript">
	$.plugin = function(name, object) {
		$.fn[name] = function(options) {
			var args = Array.prototype.slice.call(arguments, 1);
			return this.each(function() {
				var instance = $.data(this, name);
				if (instance) {
					instance[options].apply(instance, args);
				} else {
					instance = $.data(this, name, new object(options, this));
				}
			});
		};
	};
	
	var Stepper = Class.extend({
		init: function(options, element) {
			this.options = $.extend({
				value: 0,
				stepSize: 1
			}, options);
			this.element = $(element);
			this.display();
		},
		stepUp: function(steps) {
			this.options.value += this.options.stepSize * steps;
			this.display();
		},
		stepDown: function(steps) {
			this.options.value -= this.options.stepSize * steps;
			this.display();
		},
		value: function() {
			return this.options.value;
		},
		display: function() {
			this.element.html(this.options.value);
		}
	});
	
	var Pager = Stepper.extend({
		init: function(options, element) {
			this._super(options, element);
			this.options.pageSize = this.options.pageSize || 10;
		},
		pageUp: function() {
			this.options.value += this.options.pageSize * this.options.stepSize;
			this.display();
		},
		pageDown: function() {
			this.options.value -= this.options.pageSize * this.options.stepSize;
			this.display();
		}
	});
	
	$.plugin('stepper', Stepper);
	$.plugin('pager', Pager);
	
	$(document).ready(function() {
		
		// instantiate and use a stepper via jQuery
		$('#stepper').stepper({ value: 5 });
		var stepper = $('#stepper').data('stepper');
		
		console.log(stepper.value());
		
		$('#stepper').stepper('stepUp', 3);
		console.log(stepper.value());
		
		
		// instantiate and use a pager via jQuery
		$('#pager').pager({ value: 30 });
		var pager = $('#pager').data('pager');
		
		console.log(pager.value());
		
		$('#pager').pager('stepUp', 3);
		console.log(pager.value());
		
		$('#pager').pager('pageUp');
		console.log(pager.value());
		
		
		// instantiate and use a stepper directly
		var stepper2 = new Stepper({ value: 20 }, '#stepper2');
		
		console.log(stepper2.value());
		
		stepper2.stepDown(2);
		console.log(stepper2.value());
		
		
		// modify stepper
		Function.prototype.partial = function() {
			var fn = this,
				args = $.makeArray(arguments);
			
			return function() {
				return fn.apply(this, args.concat(arguments));
			};
		};
		Stepper.prototype.increment = Stepper.prototype.stepUp.partial(1);
		
		$('#stepper').stepper('increment');
	});
	</script>

</head>
<body>

<h1>Extensible jQuery</h1>

<p>This page shows that any class system can be used in conjuction with jQuery.plugin.</p>

<div id="stepper"></div>
<div id="pager"></div>
<div id="stepper2"></div>

</body>
</html>