jQuery.engineer

Objective way to create and manage object’s structure and behavior with JQuery.

Download

jquery.engineer.js

jquery.engineer-min.js

API

To define a new object with JQuery Engineer use the define method. Each JQuery Object definition can have three parts:

1. structure – Defines the html structure of the object.
2. defaults – These are the default values of options passed to the structure.
3. behavior – Defines how the object will behave.

All parts are optional.

$.engineer.define()

The example below defines a new objects named “photo_tile”. Which displays a photo and when you click on the photo alerts you of it’s title.

  
    $.engineer.define('picture_tile', {
      structure: function(options) {
        this.image = $('<img/>', {src:options.photo_url, alt:photo_title})
        return $('<div/>', { html:this.image, class:photo_tile });
      },
      
      defaults: {'photo_tile':'Untitled',
                 'photo_url':'/images/missing.png'},

      behavior: function(options) {
        this.click(function() { 
          alert('This image is named '+ options.photo_title; ) 
        });
      }
    });
  

$.engineer.make()

To create a object use the make() function. The make() function takes two arguments: the object’s key and options. The options given to make() are passed into both the structure and behavior functions. If the options do not include a key the default value will be used.

The example below will create a new instance of the photo tile that was defined above.

  
    var new_photo_tile = $.engineer.make('picture_tile', { photo_url:'/images/1.png', photo_title:'My trip to Vegas' });
    $('body').append(new_photo_tile);
  

$(’’).behaveLike()

To add only the functionality of an object to a DOM element use the behaveLike() function.

The example below will only add functionality and not change the element’s structure.

  
    $('.photo').behaveLike('photo_tile', { photo_title:'My trip to LA' });
  

$(’’).makeInto()

To replace an existing DOM element with new object use the .makeInto() function.

The .makeInto() function uses xhtml attributes on the existing DOM element to define a new instance of an object. Imagine you have the following HTML:

 
   <div class='placeholder' photo_url='/images/2.png' photo_title='My trip to New York'>Loading Image...</div>
 

You can make your placeholder element into a new instance of a JQuery object by using the makeInto() function. This will translate the xhtml attributes into the options passed into the creation of your object.

 
   $('.placeholder').makeInto('photo_tile');
   // this will have the photo_url of '/images/2.png'
   // and a photo_title of 'My trip to New York'
 

$(’’).send()

JQuery Objects also allows you the ability to send messages to invoke functions between objects. Lets say I have a bunch of objects I’m going to want to collapse on my page. You can define an object with public methods by returning the definitions of those methods in your behavior function:

  
    $.engineer.define('collapsable',{
      behavior: function(options) {
        var self = this;
        publicMethods = {};
        
        publicMethods.closeMe = function() {
          self.fadeOut(1000);
        }
        
        return publicMethods;
      }
    })
  

Then add the behavior to each object you want:

  
    $('div.description').behaveLike('collapsable');
    $('div.controls').behaveLike('collapsable');
    $('div.footer').behaveLike('collapsable');
  

Then send the message “closeMe” to each element to invoke the functionality:

  
    $('div').send('closeMe');
  

This will cause all the divs that have the function closeMe() to hide themselves.

License

(The MIT License)

Copyright © 2010 James Pozdena

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
‘Software’), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.