jpoz

$.engineer.define('example_button', {

  defaults: { color: '#336699', innerText: "This element" },

  structure: function(options) {
    var div = $('<div/>', {
      css: {
        'text-align':'center', 'background':options.color, 'color':'white', 
        'padding':'5px', 'margin':'5px', 'width': '140px', 'display': 'inline'
      },

jpoz

$('body')
  .append( $.engineer.make('example_button') )
  .append( $.engineer.make('example_button', {innerText:"this element"}) )
  .append( $.engineer.make('example_button', {innerText:"and"}) )
  .append( $.engineer.make('example_button', {color:"#994547",innerText:"this element"}) );

jpoz

structure: function(options) {
    var div = $('<div/>', {
      css: {
        'text-align':'center', 'background':options.color, 'color':'white', 
        'padding':'5px', 'margin':'5px', 'width': '140px', 'display': 'inline'
      },
      html: options.innerText
    });
 
    return div;

jpoz

behavior: function(options) {
    var self = this;
    
    self.click(function() {
      self.animate({ opacity: 0.4 }, 1500 );
    });
}

jpoz

defaults: { color: '#336699', innerText: "This element" },

jpoz

$.engineer.define('blinky', {
  behavior: function(options) {
    var self = this;
    var publicMethods = {};
    
    publicMethods.blink = function() {
      self.fadeOut(100).fadeIn(200);
    }

    return publicMethods;

jpoz

$('#some_element').behaveLike('blinky');

jpoz

$.engineer.make('gbutton', {text:"This button will send all the other elements a message"})
 
  .click(function() {
        $('div').send('blink');
  });

jpoz

$.engineer.define('gbutton_link', {
  defaults: {href:'/', text:'Click Me'},
  structure: function(options) {
    return $.engineer.make('gbutton', options)
    // gbutton is part of the edison library http://github.com/jpoz/edison
  },
  behavior: function(options) {
    this.click(function() {
      window.location = options.href
    })

jpoz

$.getJSON('buttons.json', function(users) {
  var target_div = $('#users');
  
  $.each(users, function(i, user) {
    target_div.append(

      $.engineer.make('gbutton_link', {
        "text":user['name'],
        "href":user['website'] 
      })