+++ /dev/null
-<!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,