manifold/js/plugin-sample.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Extensible jQuery</title>
   6
   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);
  15                                 if (instance) {
  16                                         instance[options].apply(instance, args);
  17                                 } else {
  18                                         instance = $.data(this, name, new object(options, this));
  19                                 }
  20                         });
  21                 };
  22         };
  23
  24         var Stepper = Class.extend({
  25                 init: function(options, element) {
  26                         this.options = $.extend({
  27                                 value: 0,
  28                                 stepSize: 1
  29                         }, options);
  30                         this.element = $(element);
  31                         this.display();
  32                 },
  33                 stepUp: function(steps) {
  34                         this.options.value += this.options.stepSize * steps;
  35                         this.display();
  36                 },
  37                 stepDown: function(steps) {
  38                         this.options.value -= this.options.stepSize * steps;
  39                         this.display();
  40                 },
  41                 value: function() {
  42                         return this.options.value;
  43                 },
  44                 display: function() {
  45                         this.element.html(this.options.value);
  46                 }
  47         });
  48
  49         var Pager = Stepper.extend({
  50                 init: function(options, element) {
  51                         this._super(options, element);
  52                         this.options.pageSize = this.options.pageSize || 10;
  53                 },
  54                 pageUp: function() {
  55                         this.options.value += this.options.pageSize * this.options.stepSize;
  56                         this.display();
  57                 },
  58                 pageDown: function() {
  59                         this.options.value -= this.options.pageSize * this.options.stepSize;
  60                         this.display();
  61                 }
  62         });
  63
  64         $.plugin('stepper', Stepper);
  65         $.plugin('pager', Pager);
  66
  67         $(document).ready(function() {
  68
  69                 // instantiate and use a stepper via jQuery
  70                 $('#stepper').stepper({ value: 5 });
  71                 var stepper = $('#stepper').data('stepper');
  72
  73                 console.log(stepper.value());
  74
  75                 $('#stepper').stepper('stepUp', 3);
  76                 console.log(stepper.value());
  77
  78
  79                 // instantiate and use a pager via jQuery
  80                 $('#pager').pager({ value: 30 });
  81                 var pager = $('#pager').data('pager');
  82
  83                 console.log(pager.value());
  84
  85                 $('#pager').pager('stepUp', 3);
  86                 console.log(pager.value());
  87
  88                 $('#pager').pager('pageUp');
  89                 console.log(pager.value());
  90
  91
  92                 // instantiate and use a stepper directly
  93                 var stepper2 = new Stepper({ value: 20 }, '#stepper2');
  94
  95                 console.log(stepper2.value());
  96
  97                 stepper2.stepDown(2);
  98                 console.log(stepper2.value());
  99
 100
 101                 // modify stepper
 102                 Function.prototype.partial = function() {
 103                         var fn = this,