5 <title>Extensible jQuery</title>
7 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
8 <script type="text/javascript" src="simple-inheritance.js"></script>
9 <script type="text/javascript">
10 $.plugin = function(name, object) {
11 $.fn[name] = function(options) {
12 var args = Array.prototype.slice.call(arguments, 1);
13 return this.each(function() {
14 var instance = $.data(this, name);
16 instance[options].apply(instance, args);
18 instance = $.data(this, name, new object(options, this));
24 var Stepper = Class.extend({
25 init: function(options, element) {
26 this.options = $.extend({
30 this.element = $(element);
33 stepUp: function(steps) {
34 this.options.value += this.options.stepSize * steps;
37 stepDown: function(steps) {
38 this.options.value -= this.options.stepSize * steps;
42 return this.options.value;
45 this.element.html(this.options.value);
49 var Pager = Stepper.extend({
50 init: function(options, element) {
51 this._super(options, element);
52 this.options.pageSize = this.options.pageSize || 10;
55 this.options.value += this.options.pageSize * this.options.stepSize;
58 pageDown: function() {
59 this.options.value -= this.options.pageSize * this.options.stepSize;
64 $.plugin('stepper', Stepper);
65 $.plugin('pager', Pager);
67 $(document).ready(function() {
69 // instantiate and use a stepper via jQuery
70 $('#stepper').stepper({ value: 5 });
71 var stepper = $('#stepper').data('stepper');
73 console.log(stepper.value());
75 $('#stepper').stepper('stepUp', 3);
76 console.log(stepper.value());
79 // instantiate and use a pager via jQuery
80 $('#pager').pager({ value: 30 });
81 var pager = $('#pager').data('pager');
83 console.log(pager.value());
85 $('#pager').pager('stepUp', 3);
86 console.log(pager.value());
88 $('#pager').pager('pageUp');
89 console.log(pager.value());
92 // instantiate and use a stepper directly
93 var stepper2 = new Stepper({ value: 20 }, '#stepper2');
95 console.log(stepper2.value());
98 console.log(stepper2.value());
102 Function.prototype.partial = function() {