spooky-element
A lightweight DOM element wrapper with only the essentials (css, on, off, append, prepend ...)
Last updated 4 years ago by maxtherocket .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install spooky-element 
SYNC missed versions from official npm registry.

spooky-element

A very lightweight, jQuery-like wrapper for DOM elements, with a lot of functionality.

Makes working with DOM elements a little less scary :)

Couldn't find anything like this, so I've put it together to help me build awesome sites, extra FAST!

  • Saves you time
  • Built for performance! Great for creating DOM elemennts on the fly
  • Works well with Handlebars, especially with hbsfy
  • Works great with GSAP (TweenLite, TimelineLite, etc.)
  • Built on the shoulders of giants
  • Extra spooky :ghost:

SPOOKY

Browser testing is provided by the awesome folks at BrowserStack

Installation

npm install spooky-element

Usage

Feature Examples

var SpookyElement = require('spooky-element');

// Select an existing element withing the DOM
// new SpookyElement( selector [, parentSelector] )
// or
// new SpookyElement( selector [, spookyElementParent] )

new SpookyElement('.ghost');
new SpookyElement('.ghost', '#haunted-house');
// Or without the new keyword
SpookyElement('.ghost', spookyElementHauntedHouse);

// Pass in jQuery elements
new SpookyElement($('.ghost'), $('body'));

// Pass in a DOM element
// new SpookyElement( domElement );

new SpookyElement( document.getElementById('boo') );

// Pass in an HTML string
// new SpookyElement( HTMLString );

new SpookyElement( '<div class="boo"></div>' );

// Provide a template function (like handlebars)
// new SpookyElement( templateFunction [, templateData] );
// using hbsfy (https://github.com/epeli/node-hbsfy) browserify transform here, very handy!

new SpookyElement( require('templates/Boo.hbs'), {autoSpook:true} );

// You can also extend a SpookyElement
// This will automatically render the template on initialization

var ExtraSpooky = function(data){
    this.template = require('../templates/ExtraSpooky.hbs');
    SpookyElement.call(this, data);
}
ExtraSpooky.prototype = Object.create(SpookyElement.prototype);


// Or ES6 syntax
class ExtraSpooky extends SpookyElement {
    constructor(data){
        super(require('../templates/ExtraSpooky.hbs'), data);
    }
}

// Pass in data to the template for extra spoookiness
var extraSpooky = new ExtraSpooky({eyes:'angry', slime:true});

Basic Usage

var spooky = new SpookyElement( '<div class="boo">BOO!</div>' );
spooky.css({
    fontSize: '40px',
    fontWeight: 'bold',
    color: 'red',
    cursor: 'pointer'
})
// yes it's chainable
.appendTo('body')
.on('mousedown', function(){
    spooky.css('color', 'blue');
})
.on('mouseup', function(){
    spooky.css('color', 'red');
});

All The Goods


spookyElementInstance.view // Contains the DOM element

getElement(selector) // returns found element within the spooky element

findElement(selector) // alias to getElement()

find(selector) // Returns a found DOM element and wraps it into a SpookyElement

findAll(selector) // Returns an array of all found DOM elements as SpookyElements

appendTo(element) // Appends to either a DOM element or a SpookyElement

prependTo(element) // Prepends to a DOM or a SpookyElement

append(element) // Append a DOM or a SpookyElement

on(event, handler) // Attach an event handler to the element

off(event, handler) // Detach an event handler from the element

css(objectOrProp [, val]) // Modify CSS

attr(attr, val) // Modify attributes

addClass(class) // Add class to element

removeClass(class) // Remove class from element

hasClass(class) // Check if element has class

getWidth() // Get element width

getHeight() // Get element height

html([html]) // Get or set innerHTML

resize(w,h) // Set the width/height of the element

destroy() // Removes element

remove() // Removes element

License MIT

See LICENSE file

Current Tags

  • 2.2.2                                ...           latest (4 years ago)

49 Versions

  • 2.2.2                                ...           4 years ago
  • 2.2.1                                ...           4 years ago
  • 2.2.0                                ...           5 years ago
  • 2.1.2                                ...           5 years ago
  • 2.1.1                                ...           5 years ago
  • 2.1.0                                ...           5 years ago
  • 2.0.4                                ...           5 years ago
  • 2.0.3                                ...           5 years ago
  • 2.0.2                                ...           5 years ago
  • 2.0.1                                ...           5 years ago
  • 2.0.0                                ...           5 years ago
  • 1.13.0                                ...           5 years ago
  • 1.12.3                                ...           6 years ago
  • 1.12.2                                ...           6 years ago
  • 1.12.1                                ...           6 years ago
  • 1.12.0                                ...           6 years ago
  • 1.11.0                                ...           6 years ago
  • 1.10.3                                ...           6 years ago
  • 1.10.2                                ...           6 years ago
  • 1.10.1                                ...           6 years ago
  • 1.10.0                                ...           6 years ago
  • 1.9.13                                ...           6 years ago
  • 1.9.12                                ...           6 years ago
  • 1.8.12                                ...           6 years ago
  • 1.8.11                                ...           6 years ago
  • 1.8.10                                ...           6 years ago
  • 1.7.10                                ...           6 years ago
  • 1.7.9                                ...           6 years ago
  • 1.6.9                                ...           6 years ago
  • 1.5.9                                ...           6 years ago
  • 1.4.9                                ...           6 years ago
  • 1.3.9                                ...           6 years ago
  • 1.3.8                                ...           6 years ago
  • 1.2.7                                ...           6 years ago
  • 1.2.8                                ...           6 years ago
  • 1.2.6                                ...           6 years ago
  • 1.2.5                                ...           6 years ago
  • 1.2.4                                ...           6 years ago
  • 1.1.4                                ...           6 years ago
  • 1.1.3                                ...           6 years ago
  • 1.0.3                                ...           6 years ago
  • 1.0.2                                ...           6 years ago
  • 1.0.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 5
Last Day 0
Last Week 3
Last Month 1
Dependencies (14)
Dev Dependencies (11)

Copyright 2014 - 2017 © taobao.org |