Script

Register

To register a new chainable method follow the pattern below.

Wee.$chain('setId', function(id) {
    this.attr('id', id);

    return this;
});

Alternatively you can register methods in a jQuery-compatible syntax.

$.fn.setId = function(id) {
    this.data('id', id);

    return this;
};

To execute the method use the following.

$('.element').setId(3).show();

Be sure to return this at the end of your method if the function’s purpose is not to return another value. This ensures the chain can continue.

Core

Reverse

The reverse method simply reverses the order of the selection results.

$('.element').reverse();

toArray

Convert a Wee selection to a simple array

$('.element').toArray();

Animate

In this example, the target is faded out to full transparency.

$('ref:element').tween({
    opacity: 0
}, {
    duration: 600
});

Events

In this example, the selector is the element to which the event is bound.

$('.element').on('click', function() {
    // Click logic
});

Here the event is being triggered on the selector.

$('.element').trigger('click');

Shortcuts

All the core and DOM methods prefixed with $ are shortcut when chaining is enabled. Just remove the method’s dollar sign and replace Wee with $.

Examples

$.unique([1, 2, 2, 3]);
$.get('key');
$.height('ref:element');

View

The view chain method updated the content of a DOM element given a data object.

<div class="element">
    <span class="{{ className }}">{{ content }}</span>
</div>
$('.element').render({
    className: 'dynamic-class',
    content: 'Span contents'
});

$

Get matches to specified selector or return parsed HTML

VariableTypeDefaultDescriptionRequired

selector

selection

-

Target selection or HTML string

context

selection

document

Context selection

Wee.$('.js-element li');
[node, node, ...]

Contextual

The context selection subsets the query to a more specific scope. This can result in a more limited and efficient traversal of the DOM.

Wee.$('li', '.js-element');
[node, node, ...]

References

Pre-fetched elements can be selected by using the ‘ref:name’ format.

Wee.$('ref:element');
[node, node, ...]

References can’t be chained like $('ref:element .child'). To scope a selection within a reference pass the ref selector as the context argument like $('.child', 'ref:element').

Multiple

Multiple selectors can be concatenated with commas. You can even mix refs with standard selectors.

Wee.$('ref:element, .js-element li');
[node, node, ...]

Parsing HTML

If HTML is provided it will be parsed and returned.

Wee.$('<div class="element" />');
[node]

External selector engine

To use another query engine set the global WeeSelector variable. This variable can be set anywhere at any time but before Wee instantiation is ideal.

var WeeSelector = Sizzle;

addEasing

Add additional easing function(s)

VariableTypeDefaultDescriptionRequired

a

object, string

-

Multiple ease object or easing key

b

function

-

Easing function

Single

Wee.animate.addEasing('split', function(t) {
    return t / 2;
});

Multiple

Wee.animate.addEasing({
    split: function(t) {
        return t / 2;
    },
    slow: function(t) {
        return t < 1 ? 1 : (t / 3);
    }
});

Tween

Transition an attribute or property value

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

props

object

-

Key/value object of attributes or properties

options

object

-

Object parameters below

Options Object

VariableTypeDefaultDescriptionRequired

complete

function

-

Callback function

duration

number

400

Transition duration in milliseconds

ease

string

'ease'

ease, linear, or name of registered easing

Simple

Wee.animate.tween('ref:element', {
    height: 200
});

Advanced

Wee.animate.tween('ref:element', {
    height: 200,
    marginTop: 100
}, {
    duration: 500,
    ease: 'linear',
    complete: function() {
        // Complete logic
    }
});

If no unit is provided then pixel values will be assumed when tweening CSS attributes.

Load

Load specified assets with specified set of options

VariableTypeDefaultDescriptionRequired

options

object

-

Object parameters below

Configuration Object

VariableTypeDefaultDescriptionRequired

async

boolean

true

Load assets asynchronously, only applicable to scripts

cache

boolean

true

Bust request cache with random querystring

css

string, array

-

Single CSS path or array of CSS paths

error

function

-

Failure callback

files

string, array

-

Single file path or array of file paths

group

string

-

Optional reference for use with ready

img

string, array

-

Single image path or array of image paths

js

string, array

-

Single JavaScript path or array of JavaScript paths

root

string

-

Root path or domain override for ready

success

function

-

Success callback

Single File

Wee.assets.load({
    files: '/path/to/alert.js'
});

Multiple Files

Wee.assets.load({
    root: 'https://cdn.weepower.com',
    files: [
        '/path/to/alert.js',
        '/path/to/override.css',
        '/path/to/sample.png'
    ],
    success: function() {
        // Success logic
    },
    error: function() {
        // Failure logic
    }
});

If an absolute URL beginning with "//", "http://", or “https://” is requested the root option will be ignored.

Group

By providing a group name you can optionally check against the group later for completion.

Wee.assets.load({
    files: '/path/to/alert.js',
    group: 'dynamicAssets'
});

Ready

When specified references are ready execute callback

VariableTypeDefaultDescriptionRequired

group

string

-

Group reference name

options

object

-

Override any load configuration options

poll

boolean

false

Poll the queue every 20 milliseconds for completion

Check

Wee.assets.ready('dynamicAssets');
true

Check and Set

Wee.assets.ready('dynamicAssets', {
    success: function() {
        // Success logic
    }
});

Remove

Remove one or more files from the DOM

VariableTypeDefaultDescriptionRequired

files

string, array

-

Single file path or file array

root

string

-

Root path or domain override for root

Single File

Wee.assets.remove('/samples/override.css');

Multiple Files

Wee.assets.remove([
    '/samples/override.css',
    '/samples/alert.js'
], 'https://cdn.weepower.com');

Root

Get current asset root or set with specified value

VariableTypeDefaultDescriptionRequired

value

string

-

Root request path

Set

The value set here is prepended to every request if not specifically overridden.

Wee.assets.root('https://cdn.weepower.com');

Get

Retrieve the current root which defaults to an empty string, unless previously set.

Wee.assets.root();
"https://cdn.weepower.com"

Advanced

Only set the asset root to a CDN in the production environment.

if (Wee.$env() == 'prod') {
    Wee.assets.root('https://cdn.weepower.com');
}

You can override the root on individual requests. For instance, you may want to load all your static assets from a CDN but pull JSON or other files from a local server.

Request

Make Ajax request based on specified options

VariableTypeDefaultDescriptionRequired

options

object

-

Request options below

Options Object

VariableTypeDefaultDescriptionRequired

args

array

-

Callback arguments appended after default parameters

cache

boolean

true

Disable automatic cache-busting query string

complete

function

-

Complete callback

data

object

-

Object to serialize and pass along with request

error

function

-

Failure callback

headers

object

-

{key: val} object of request headers

json

boolean false

-

Evaluate the response as JSON and return object

jsonp

boolean, string

false

Boolean or override name for callback query string parameter

jsonpCallback

string

-

Override the name of the JSONP callback function

method

string

get

Request verb (get, post, put, etc) in lowercase

processData

boolean

true

Post data in the body if applicable

root

string

-

Prepended request path

scope

object

-

Callback scope

send

function

-

Send callback

success

function

-

Success callback

type

string

-

Form, html, json, or xml to toggle content type header

url

string

-

URL endpoint to request

Get

The callback receives the response as the first parameter followed by the XHR object. Any custom arguments provided are injected afterwards.

Wee.fetch.request({
    url: '/samples/test.json',
    success: function(data, xhr) {
        console.log(data);
    }
});

By default the X-Requested-With header is set to XMLHttpRequest. Also, when js json is set to true the Content-Type header is set to 'application/json’. Either can be overridden or removed if set to false.

Post w/Data

Wee.fetch.request({
    url: '/samples/login.php',
    method: 'post',
    data: {
        username: 'user@weepower.com',
        password: 'pass123'
    },
    success: function(data) {
        console.log('Login succeeded');
    },
    error: function(data) {
        console.log('Login failed');
    }
});

JSONP

JSONP is a technique for cross-domain requests that would otherwise be blocked because of the same-origin policy. Unless overridden Wee will send js callback as the query string parameter to communicate to the server how to format the response.

Wee.fetch.request({
    url: 'https://example.com/entry/465',
    jsonp: true,
    success: function(data) {
        console.log('Login succeeded');
    }
});

The request above will create a script reference in the head with the source set to js https://example.com/entry/465?callback=callback1. If configured correctly the server will return a JSON object executed like the following.

callback1({
    id: 465,
    name: "Lorem Ipsum",
    active: true
});

The jsonpCallback parameter can be set to direct the callback to a pre-existing method instead of the generically registered success callback.

$after

Insert selection or markup after each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback, or HTML string

remove

boolean

false

Remove target after insertion

Selection

Wee.$after('ref:element', Wee.$('.js-element'));

Markup

Wee.$after('ref:element', '<span>Injected notice</span>');

Function

The current index and HTML are injected into the callback. The scope of this is the element.

<div data-name="John Smith">
    <h1 data-ref="bioName">Name</h1>
</div>
Wee.$after('ref:bioName', function(i, html) {
    // Add the parent data-name as a paragraph after the matched element
    return '<p>' + Wee.$data(Wee.$parent(this), 'name') + '</p>';
});
<div data-name="John Smith">
    <h1 data-ref="bioName">Name</h1>
    <p>John Smith</p>
</div>

$siblings

Get unique siblings of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

<p>Sibling paragraph</p>
<span>Sibling span</span>
<div data-ref="sibling">Target div.</div>

All Siblings

Without a filter all siblings will be returned.

Wee.$siblings('ref:sibling');
[<p>Sibling paragraph</p>, <span>Sibling span</span>]

Filtered

Wee.$siblings('ref:sibling', 'p');
[<p>Sibling paragraph</p>]

$offset

Get the offset position of a matching selection relative to the document

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

object

-

Offset values

Set

Wee.$offset('ref:element', {
    top: 100,
    left: 20
});

Get

Wee.$offset('ref:element');
{
    top: 520,
    left: 30
}

The object values are returned as unitless pixel values.

$slice

Get subset of selection matches from specified range

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

start

integer

-

Starting index

end

integer

-

Ending index

Wee.$slice('li', 0, 3);

$append

Append selection or markup after each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

Source selection, callback, or HTML string

Selection

Wee.$append('ref:element', Wee.$('.js-element'));

Function

The current index and HTML are injected into the callback. The scope of this is the element.

<h1 data-ref="listHeading">Names</h1>
<ul>
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>
Wee.$append('ref:listHeading', function(i, html) {
    // Modify the heading to include the number of listed names
    return ' (' + Wee.$children(Wee.$next()).length + ')';
});
<h1 data-ref="listHeading">Names (2)</h1>
<ul>
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>

$parent

Get unique parent from each matching selection

VariableTypeDefaultDescriptionRequired

child

selection

-

Child selection

filter

selection

-

Filter selection

Selection Parent

Wee.$parent('ref:element');

Filtered

Return selection parent only if it matches the filter.

Wee.$parent('ref:element', 'main');

$attr

Get attribute of first matching selection or set attribute of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Attribute to get or set or an object

b

function, string

-

Value to assign to attribute

Get

Wee.$attr('ref:element', 'href');

"https://www.weepower.com"

Single

Wee.$attr('ref:element', 'href', 'https://www.weepower.com/start');

Multiple

Wee.$attr('ref:element', {
    href: 'https://developer.mozilla.org',
    target: '_blank'
});

$before

Insert selection or markup before each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback or HTML string

remove

boolean

false

Remove target after insertion

Selection

Wee.$before('ref:element', Wee.$('.js-element'));

Markup

Wee.$before('ref:element', '<span>Injected notice</span>');

Function

Wee.$before('ref:element', function(i, html) {
    // Callback logic
});

$children

Get unique direct children of each matching selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

filter

selection

-

Filter selection

All Children

Without a filter all direct children will be returned.

Wee.$children('ref:element');

Filtered

With a filter, only matching children will be returned.

Wee.$children('ref:element', 'li');

The response excludes text and comment nodes.

$clone

Clone each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Wee.$clone('ref:element');

$closest

Get unique closest ancestors of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

context

selection

-

Context selection

<div class="nav">
    <a class="link--account">Your Account</a>
</div>
<div class="nav">
    <a class="link--about">About Us</a>
</div>
Wee.$closest('.link--about', '.nav');
<div class="nav">
    <a class="link--about">About Us</a>
</div>

This method traverses up the DOM for the closest match. It doesn't match descendants.

$parents

Get unique ancestors of each matching selection

VariableTypeDefaultDescriptionRequired

child

selection

-

Child selection

filter

selection

-

Filter selection

Wee.$parents('ref:element');

$text

Get inner text of first selection or set each matching selection's text

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Text to set or callback

<div class="js-element">Inner text</div>

Get

Wee.$text('.js-element');
"Inner text"

Set

Wee.$text('.js-element', 'New text');

Function

The current index and text are injected into the callback. The scope of this is the element.

Wee.$text('.js-element', function(el, i, text) {
    // Return uppercase text
    return text.toUpperCase();
});

$contains

Determine if any matching parent selection contains descendant selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

descendant

selection

-

Descendant selection

Wee.$contains('ref:element', '.descendant');
true

$position

Get the position of the first matching selection relative to its offset parent

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Wee.$position('ref:element');
{
    top: 250,
    left: 30
}

The object values are returned as unitless pixel values.

$contents

Get unique content of each matching selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

Wee.$contents('ref:element');

The response includes text and comment nodes.

$css

Get CSS value of first matching selection or set value of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Property to get or set or an object

b

string

-

Value to assign to property

Get Value

Wee.$css('ref:element', 'marginTop');
"0px"

Set Single Value

Wee.$css('ref:element', 'marginTop', '5px');

Set Multiple Values

Wee.$css('ref:element', {
    marginTop: '5px',
    color: 'red'
});

$prepend

Prepend selection or markup before each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback, or HTML string

options

object

-

Callback options

Selection

Wee.$prepend('ref:element', Wee.$('.js-element'));

Function

The current index and HTML are injected into the callback. The scope of this is the element.

<h1 data-ref="listHeading">Names</h1>
<ul data-ref="list">
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>
Wee.$prepend('ref:listHeading', function() {
    return Wee.$children('ref:list').length + ' ';
});
(<h1 data-ref="listHeading">2 Names</h1>
<ul data-ref="list">
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>)

$toggle

Toggle the display of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Rotates calling the hide and show methods.

Wee.$toggle('ref:element');

$toggleClass

Toggle adding and removing class(es) from the specified element

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

className

function, string

-

Class name(s) or callback

state

boolean

-

Force add or remove

Single

Wee.$toggleClass('ref:element', 'modifier');

Multiple

Separate multiple class names with spaces.

Wee.$toggleClass('ref:element', 'modifier modifier2');

Function

The current index, class value and state are injected into the callback. The scope of this is the element.

Wee.$toggleClass('.element', function(i, className, state) {
    // Return the class intended for toggle
    return className + (state === true ? '-on' : '-off');
});

$data

Get data of first matching selection or set data of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Data attribute to get or set or an object

b

string

-

Value to assign to data attribute

Get All

<div data-ref="element" data-id="150"></div>
Wee.$data('ref:element');
{
    ref: "element",
    id: 150
}

Get Single

<div data-ref="element" data-id="150"></div>
Wee.$data('ref:element', 'id');
150

Set Single

Wee.$data('ref:element', 'id', '250');;

Set Multiple

Wee.$data('ref:element', {
    id: '350',
    active: 'true'
});

$prev

Get the unique previous sibling of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

options

object

-

Callback options

Simple

Wee.$prev();

Filtered

<ul>
    <li>John Doe</li>
    <li>John Smith</li>
    <li data-ref="name">Jane Doe</li>
    <li>Jane Smith</li>
</ul>
Wee.$prev('ref:name');
<li>John Smith</li>

$val

Get value of first matching selection or set values of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to add or callback

Get

Wee.$val('ref:element');

Set

Wee.$val('ref:element', '123');

Function

<input type="text" value="This is an ordinary sentence in an input field." data-ref="input">
Wee.$val('ref:input', function(i, value) {
    // Check the length of the current value but don't change the value
    if (value.length > 20) {
        alert('Getting long winded, aren\'t we?');
    }

    return value;
});

$empty

Remove child nodes from each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

<div data-ref="bio">
    <h1>John Smith</h1>
    <p>Lorem ipsum dolor.</p>
</div>
Wee.$empty('ref:bio');
<div data-ref="bio"></div>

$width

Get or set the width of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

Width to set or callback

Get

Wee.$width('ref:element');
100

The value returned is a unitless pixel value.

Set

Wee.$width('ref:element', '10rem');

Function

The current index and width are injected into the callback. The scope of this is the element.

<div data-ref="example" style="width: 100px;"></div>
Wee.$width('ref:example', function(i, width) {
    // Increase the width of the element by 50px
    return (width += 50) + 'px';
});

If no unit is provided pixels will be set.

$prop

Get property of first matching selection or set property of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Property to get or set or an object

b

function, string

-

Value to assign to property

Get

Wee.$prop('ref:element', 'checked');
true

Single

Wee.$prop('ref:element', 'checked', true);

Multiple

Wee.$prop('ref:element', {
    checked: true,
    required: false
});

$eq

Get indexed node of matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

index

number

-

Element index

context

selection

-

Context selection

<ul class="js-element">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
Wee.$eq('.js-element li', 1);
<li>List item 2</li>

Negative Index

Wee.$eq('.js-element li', -1);
<li>List item 3</li>

$wrap

Wrap markup around each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

html

function, string

-

Wrapper HTML or callback

Markup

Wee.$wrap('ref:element', '<div class="wrapper"></div>');

Function

The current index is injected into the callback. The scope of this is the element.

<div class="library">
    <ul class="books programming">
        <li>JavaScript: The Definitive Guide</li>
        <li>Mastering Regular Expressions</li>
    </ul>
    <ul class="books technique">
        <li>Code Complete</li>
        <li>The Pragmatic Programmer</li>
    </ul>
</div>
Wee.$wrap('.books', function(i) {
    if (Wee.$hasClass($(this), 'programming')) {
        return '<div class="reference"></div>'
    } else {
        return '<div class="readers"></div>'
    }
});
<div class="library">
    <div class="reference">
        <ul class="books programming">
            <li>JavaScript: The Definitive Guide</li>
            <li>Mastering Regular Expressions</li>
        </ul>
    </div>
    <div class="readers">
        <ul class="books technique">
            <li>Code Complete</li>
            <li>The Pragmatic Programmer</li>
        </ul>
    </div>
</div>

$remove

Remove each matching selection from the document

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Context selection

Wee.$remove('ref:element');

$wrapInner

Wrap markup around the content of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

html

function, string

-

Wrapper HTML or callback

Markup

Wee.$wrapInner('ref:element', '<div class="wrapper"></div>');

Function

The current index is injected into the callback. The scope of this is the element.

<ul class="names">
    <li class="boss">Jane Doe</li>
    <li>John Doe</li>
</ul>
Wee.$wrapInner('.names li', function(i) {
    // Wrap bosses in bold tag
    if (Wee.$hasClass($(this), 'boss')) {
        return '<b></b>';
    }
});
<ul class="names">
    <li class="boss"><b>Jane Doe</b></li>
    <li>John Doe</li>
</ul>

$removeAttr

Remove specified attribute of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

name

string

-

Attribute name

Wee.$removeAttr('ref:element', 'title');

$filter

Return a filtered subset of elements from a matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

Selection

Wee.$filter('ref:element', '.filter');

Function

The current index and element are injected into the callback. The scope of this is the element.

<ul class="people">
    <li>John Doe</li>
    <li>John Smith</li>
    <li>Jane Doe</li>
    <li>Jane Smith</li>
</ul>
Wee.$filter('.people li', function(i, el) {
    // Return elements containing 'Doe'
    return Wee.$text(el).indexOf('Doe') !== -1;
});
[<li>John Doe</li>, <li>Jane Doe</li>]

$find

Get unique filtered descendants from each matching selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

filter

selection

-

Filter selection

Wee.$find('table', 'tr');

$first

Get the first element of a matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Selection context

Works the same as Wee.$() but only returns the first result from the result set.

var $first = Wee.$first('ref:element');

$hasClass

Determine if the matching selection has a class

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

className

string

-

Specific class name

Single

<div class="hello" data-ref="element"></div>
$('ref:element').hasClass('hello');
$('ref:element').hasClass('donuts');
true
false

$removeClass

Remove classes from each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to remove or callback

Single

Wee.$removeClass('ref:element', 'modifier');

Multiple

Separate multiple class names with spaces.

Wee.$removeClass('ref:element', 'modifier modifier2');

Function

The current index and class value are injected into the callback. The scope of this is the element.

Wee.$removeClass('ref:element', function(i, className) {
    // Remove an indexed class
    return className + i;
});

$height

Get or set the height of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string, number, boolean

-

Height to set, callback, or true to get outer height

Get

Wee.$height('ref:element');
100

Outer Height

Wee.$height('ref:element', true);
120

The value returned is a unitless pixel value.

Set

Wee.$height('ref:element', '10rem');

Function

The current index and height are injected into the callback. The scope of this is the element.

<div data-ref="example" style="height: 100px;"></div>
Wee.$height('ref:example', function(i, height) {
    // Increase the height of the element by 50px
    return (height += 50) + 'px';
});

If no unit is provided pixels will be set.

$replaceWith

Replace each matching selection with selection or markup

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

Source selection, callback, or HTML string

Selection

Wee.$replaceWith('ref:element', Wee.$('.js-element'));

Markup

Wee.$replaceWith('ref:element', '<span>Replacement element</span>');

Function

The current index and HTML are injected into the callback. The scope of this is the element.

<ul class="names">
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>
Wee.$replaceWith('.names li', function(i, html) {
    return "<li>The " + html + "</li>";
});
<ul class="names">
    <li>The Jane Doe</li>
    <li>The John Doe</li>
</ul>

$hide

Hide each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Hide works by adding the js-hide class which applies display: none !important;

Wee.$hide('ref:element');

$html

Get inner HTML of first selection or set each matching selection's HTML

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

HTML to set or callback

<div data-ref="element"><h1>Heading</h1></div>

Get

Wee.$html('ref:element');
"<h1>Heading</h1>"

Set

Wee.$html('ref:element', '<h2>New Heading</h2>');

Function

The current index and HTML are injected into the callback. The scope of this is the element.

Wee.$html('.js-element', function(el, i, html) {
    // Return uppercase HTML
    return html.toUpperCase();
});

$index

Get the zero-based index of a matching selection relative to it's siblings

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

<ul>
    <li></li>
    <li></li>
    <li class="js-last"></li>
</ul>
Wee.$index('.js-last');
2

$insertAfter

Insert each matching source selection element after each matching target selection

VariableTypeDefaultDescriptionRequired

source

selection

-

Source selection

target

selection

-

Target selection

Wee.$insertAfter('ref:element', '.js-element');

$insertBefore

Insert each matching source selection element before each matching target selection

VariableTypeDefaultDescriptionRequired

source

selection

-

Source selection

target

selection

-

Target selection

Wee.$insertBefore('ref:element', '.js-element');

$scrollLeft

Get or set the X scroll position of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

window

Target Selection

value

integer

-

Left position

Get Value

Wee.$scrollLeft();
0

The value returned is a unitless pixel value.

Set Value

Wee.$scrollLeft(15);

Scroll position should be provided as unitless pixel value.

$scrollTop

Get or set the Y scroll position of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

window

Target selection

value

integer

-

Top position

Wee.$scrollTop();
1560

The value returned is a unitless pixel value.

Set Value

Wee.$scrollTop('body', 15);

Scroll position should be provided as unitless pixel value.

$is

Determine if at least one matching selection matches a specified criteria

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

Selection

<div class="js-element"></div>
Wee.$is('.js-element', 'div');
true

Function

<ul class="names">
    <li>John Doe</li>
    <li data-hidden="true">Jane Doe</li>
    <li>John Smith</li>
    <li>Jane Smith</li>
</ul>
Wee.$is('.names li', function(i, el) {
    // Check if data-hidden is set to true
    return Wee.$data(el, 'hidden') === 'true';
});
true

$serializeForm

Serialize input values from first matching form selection

VariableTypeDefaultDescriptionRequired

select

selection

-

Target selection

json

boolean

false

Convert to JSON

Standard

Wee.$serializeForm('ref:element');
"inputName=value&inputName2=value2"

JSON

Wee.$serializeForm('ref:element', true);
{
    "inputName": "value",
    "inputName2": "value2"
}

$last

Get the last element of a matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Context selection

Works the same as Wee.$() but only returns the last result from the result set.

<ul class="names">
    <li>John Doe</li>
    <li>John Smith</li>
    <li>Jane Doe</li>
    <li>Jane Smith</li>
</ul>
Wee.$last('.names li');
<li>Jane Smith</li>

$show

Show each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Show works by removing the js-hide class either set manually or through Wee.$hide().

Wee.$show('ref:element');

$next

Get the unique next sibling of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

options

object

-

Callback options

Simple

Wee.$next();

Filtered

<ul>
    <li>John Doe</li>
    <li>John Smith</li>
    <li data-ref="name">Jane Doe</li>
    <li>Jane Smith</li>
</ul>
Wee.$next('ref:name');
<li>Jane Smith</li>

$addClass

Add classes to each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to add or callback

Single

Wee.$addClass('ref:element', 'modifier');

Multiple

Separate multiple class names with spaces.

Wee.$addClass('ref:element', 'modifier modifier2');

Function

The current index and class value are injected into the callback. The scope of this is the element.

Wee.$addClass('ref:element', function(i, className) {
    // Add an indexed class
    return className + i;
});

Callbacks can also be in the format of 'controllerName:method'. The index argument is always 0-based.

$not

Returns elements not matching the filtered selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

Selection

Wee.$not('ref:element', 'div');

Function

The current index and element are injected into the callback. The scope of this is the element.

<ul class="names">
    <li>John Doe</li>
    <li data-hidden="true">Jane Doe</li>
    <li>John Smith</li>
    <li>Jane Smith</li>
</ul>
Wee.$not('.names li', function(i, el) {
    // Check if data-hidden is set to true
    return Wee.$data(el, 'hidden') === true;
});
[<li>John Doe</li>, <li>John Smith</li>, <li>Jane Smith</li>]

addEvent

Add a custom event

VariableTypeDefaultDescriptionRequired

name

string

-

Event name

on

function

-

Enable function

off

function

-

Disable function

Wee.events.addEvent('pressHold', function(el, fn, conf) {
    var scope = this,
        duration = conf.duration || 400;

    Wee.events.on(el, 'mousedown.pressHold', function(e, el) {
        scope.timer = setTimeout(function() {
            scope.timer = false;

            fn.apply(conf.scope || el, W._slice.call(arguments));
        }, duration);
    }, conf);

    Wee.events.on(el, 'mouseup.pressHold', function() {
        if (scope.timer) {
            clearTimeout(scope.timer);
        }
    });
}, function(el, fn) {
    Wee.events.off(el, 'mouseup.pressHold', fn);
});

$('ref:element').on('pressHold', function(e, el) {
    // Trigger logic
});

Bound

Get currently bound events to optional specified element, event, and function

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

event

string

-

Specific event name

fn

function

-

Specific callback

By default bound will return all bound events.

Wee.events.bound();
[Object, Object, ...]

Selection

Wee.events.bound('ref:element');
[Object, Object, ...]

Selection Event

Wee.events.bound('ref:element', 'click');
[Object, Object, ...]

Off

Remove specified function to specified element and optional event and function

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string

-

Event name or object of events

b

function

-

Callback to remove

Target

If no event or callback is provided all element events will be removed.

Wee.events.off('ref:element');

Selection Event

Wee.events.off('ref:element', 'click');

Selection Event Callback

Wee.events.off('ref:element', 'click', function(e, el) {
    // Click logic
});

Multiple Selections

Wee.events.off({
    'ref:element': {
        mouseenter: function() {
            // Enter logic
        }
    },
    '.js-element': {
        click: function(e, el) {
            // Click logic
            e.preventDefault();
        }
    }
});

Global

You can remove entire groups of namespaced events.

Wee.events.off(false, '.namespace');

On

Bind specified function to specified element and event

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Event name or object of events

b

function, object

-

Event callback or options object

c

object

-

option parameters below

VariableTypeDefaultDescriptionRequired

args

array

-

Callback arguments

context

selection

-

Context selection

delegate

selection

-

Delegate selection

namespace

string

-

Apply namespace to all events

once

boolean

false

Remove the event after first execution

scope

object

-

Callback scope

Simple

Wee.events.on('ref:element', 'click', function(e, el) {
    // Click logic
    e.preventDefault();
});

Once

Wee.events.on('ref:element', 'click', function(e, el) {
    // Click logic
    e.preventDefault();
}, {
    once: true
});

Delegation

Wee.events.on('.js-descendant', 'click', function(e, el) {
    // Click logic
    e.preventDefault();
}, {
    delegate: 'ref:element'
});

Multiple Events

Wee.events.on('ref:element', {
    click: function() {
        // Click logic
    },
    blur: function() {
        // Blur logic
    }
});

Multiple Selections

Wee.events.on({
    'ref:element': {
        mouseenter: function() {
            // Enter logic
        }
    },
    '.js-element': {
        click: function(e, el) {
            // Click logic
            e.preventDefault();
        }
    }
});

Namespacing

Events can be namespaced by appending ‘.namespace’ to the end of the event name. Namespaced events can then be selected, modified, and destroyed as a group.

Wee.events.on('ref:element', 'click.namespace', function(e, el) {
    // Click logic
    e.preventDefault();
});
Wee.events.on({
    'ref:element': {
        click: function(e, el) {
        // Click logic
        e.preventDefault();
    },
    '.js-element': {
        click: function(e, el) {
            // Click logic
            e.preventDefault();
        }
    }
}, {
    namespace: 'namespace'
});

Touch

Standard swipe events are available out of the box

VariableTypeDefaultDescriptionRequired

distance

integer

50

Minimum swipe distance in pixels

movement

integer

25

Maximum opposing shift in pixels

The swipeLeft, swipeRight, swipeUp, swipeDown events are available and work just like standard events.

Wee.on('ref:element', 'swipeRight', function() {
    // Swipe logic
}, {
    distance: 150,
    movement: 20
});

Trigger

Execute event for each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

event

string

-

Event name

Wee.events.trigger('ref:element', 'click');

Lifecycle

The following events are available in this order at different stages throughout the History lifecycle.

All examples below could use Wee.history.go as well.

Begin

Triggers before any history state or data request occurs. Returning false will halt process entirely.

Wee.history.init({
    ...
    begin: function(config) {
        // config is the entire configuration object passed into init method
    }
});

Send

Triggers when data request is initially sent.

Wee.history.init({
    ...
    request: {
        send: function() {
            //...
        }
    }
});

Replace

Triggers once HTML from data request is received but before the received markup is placed onto the DOM. Returned HTML is passed as parameter to this method. The return value will be treated as the HTML to be appended to DOM. If return value is js false, HTML will be prevented from being appended.

Wee.history.init({
    ...
    replace: function(html, config) {
        //...optionally modify html

        return html;
    }
});

Success

Triggers when the data request is returned successfully and after markup has been replaced on DOM.

Wee.history.init({
    ...
    request: {
        success: function(html, xhr) {
            //...
        }
    }
});

Error

Triggers when the data request is not returned successfully.

Wee.history.init({
    ...
    request: {
        error: function(xhr) {
            //...
        }
    }
});

Complete

Triggers when the data request is returned successfully and after either the success or error callback fires.

Wee.history.init({
    ...
    request: {
        complete: function(xhr) {
            //...
        }
    }
});

Pushstate

Triggers when new history entry is added to browser history.

Wee.history.init({
    ...
    push: true, // Default is true
    pushstate: function(history) {
        history.dir // Browser navigation direction (1)
        history.path // New URL path
        history.prev // Old URL path
    }
});

Popstate

Triggers when a history entry is changed.

Wee.history.init({
    ...
    pop: true,
    popstate: function(history) {
        history.dir // Browser navigation direction (-1 or 1)
        history.path // New URL path
        history.prev // Old URL path
    }
});

End

Triggers at the very end of process.

Wee.history.init({
    ...
    end: function(history) {
        history.dir // Browser navigation direction (-1 or 1)
        history.path // New URL path
        history.prev // Old URL path
    }
});

Init

Set the initial state and popstate event, and bind global actions

VariableTypeDefaultDescriptionRequired

options

object

-

Object properties below

Options Object

VariableTypeDefaultDescriptionRequired

bind

object, boolean

-

Bind object format

extensions

array

-

Whitelist of path extensions to support

partials

selection

'title, main'

Elements to replace from response

processErrors

boolean

false

Process replacements on error responses

push

boolean

true

Push the path to the browser URL

request

object

-

Pass-through object to Wee.data

run

boolean

true

Evaluate routing rules

begin

object

-

Before request is made

replace

object

-

Manipulations to returned html can be made here before replacement

Default

Wee.history.init();

Advanced

Wee.history.init({
    bind: {
        click: 'a:not([data-static])'
    },
    extensions: [
        'html',
        'php',
    ],
    partials: 'title, .js-sidebar, ref:inner',
    processErrors: true,
    request: {
        root: '/pjax',
        success: function() {
            ga('send', 'pageview');
        }
    }
});

Lifecycle

The following events are available in this order at different stages throughout the History lifecycle.

options.begin(config); // return false to abort process
options.replace(html); // before replacement is made
options.request.send(); // before actual request is made
options.request.success(data); // logic to execute on if request is successful
options.request.error(xhr); // logic for handling errors returned during request
options.request.complete(xhr); // logic to remove any css modifer classes
options.pushstate({
    dir: [-1, 1],
    path: 'string',
    prev: 'string'
});
options.popstate({
    dir: [-1, 1],
    path: 'string',
    prev: 'string'
});
options.complete({
    dir: [-1, 1],
    path: 'string',
    prev: 'string'
});

Bind

Bind element events and form submit events to PJAX

VariableTypeDefaultDescriptionRequired

events

object

-

{event: selector} object to bind

a

object, selection

-

Context or same options available to go method

context

selection

document

Context selection

Basic

Wee.history.bind({
    click: 'a',
    submit: '.element'
});

Advanced

Wee.history.bind({
        click: 'a:not([data-static])'
    },
    'ref:element',
    {
        extensions: [
            'html',
            'php',
        ],
        partials: 'title, .js-sidebar, ref:inner',
        request: {
            root: '/pjax',
            success: function() {
                ga('send', 'pageview');
            }
        }
    }
});

Go

Navigate to a new path or within the browser history

VariableTypeDefaultDescriptionRequired

options

object

-

Object properties below

Options Object

VariableTypeDefaultDescriptionRequired

action

string

'replace'

Either 'replace' or 'append' content

extensions

array

-

Whitelist of path extensions to support

partials

selection

'title, main'

Elements to replace from response

path

string

-

Path to local resource

processErrors

boolean

false

Process replacements on error responses

push

boolean

true

Push the path to the browser URL

request

object

-

Pass-through object to Wee.data

run

boolean

true

Evaluate routing rules

scrollTop

number, selection

0

Vertical offset to scroll

title

string

-

Set or override the returned page title

Basic

Wee.history.go({
    path: '/page/path'
});

Advanced

Wee.history.go({
    path: '/page/path',
    partials: '.element',
    request: {
        complete: function() {
            // Complete logic
        }
    }
});

Filters

Included route filters

Once

Evaluate the route only once.

Wee.routes.map({
    '$any:once': 'common'
});

Fire

Moves the route to the top of the evaluation order.

Wee.routes.map({
    '$any:fire': 'common'
});

Unload

Evaluates when navigating away from a route with Wee.history. A common use-case for this filter is to manage in-memory objects and unbind page-specific events when navigating away from a page to prevent memory leaks.

Wee.routes.map({
    '$any:unload': 'common:unload'
});

Pop

Evaluates when a history entry is changed. This will be triggered by doing a browser action such as a click on the back or forward button, or by calling history.back() or history.forward().

Wee.routes.map({
    '$any:pop': 'common:pop'
});

Eval

Move the segment pointer back one level.

Wee.routes.map({
    '$customFilter:eval': {
        '$any': 'common',
        'products': 'products'
    }
});

!

Negates route if prefixed by js !.

Wee.routes.map({
    '!about': 'common'
});

addFilter

Add conditional route filter

VariableTypeDefaultDescriptionRequired

a

object, string

-

Multiple filter object or filter key

b

function

-

Filter function

Single

Wee.routes.addFilter('isInternal', function(seg) {
    return ['admin', 'protected'].indexOf(seg) > -1;
});

Multiple

Wee.routes.addFilter({
    isInternal: function(seg) {
        return ['admin', 'protected'].indexOf(seg) > -1;
    },
    isExternal: function(seg) {
        return ['admin', 'protected'].indexOf(seg) < 0;
    }
});

Map

Retrieve or add route endpoints to route storage

VariableTypeDefaultDescriptionRequired

a

object

-

Mapping object

init

boolean

false

Immediately evaluate routes

Set

Arguments can be nested as deep as necessary. Pass true as the second argument to immediately evaluate the specified routes from the first argument.

Wee.routes.map({
    '$any': 'common',
    'script': {
        'routes': function() {
            // Current page
        }
    }
});

If using the wee:fn`` format to call an init method you can exclude:init` as it is assumed if no function is provided.

Get

Retrieve all the routes currently in storage.

Wee.routes.map();
{
    "$any": "common",
    "script": {
        "routes": function(){}
    }
}

Advanced

Wee.routes.map({
    '$root': function(val) {
        console.log('root ' + val);
    },
    '$any': function() {
        console.log('root any');
    },
    'category': {
        '$root||$/^P[\\d]+$/': function(val) {
            console.log(val + ' root');
        },
        '$any': function() {
            console.log('category any');
        },
        'mens': function() {
            console.log('mens!');
        },
        '$/^(?!P[\\d]+).*$/': {
            '$root': function(cat) {
                console.log(cat + ' listing');
            },
            '$num': function(id) {
                console.log('product ID is ' + id);
            }
        }
    }
});

Wee.ready(function() {
    Wee.routes.run({
        path: 'category/name/123'
    });
});

Run

Process stored route options with optional config

VariableTypeDefaultDescriptionRequired

options

object

-

Object parameters below

Options Object

VariableTypeDefaultDescriptionRequired

path

string

-

Relative path from root domain

routes

object

-

Mapping object

Without arguments, the currently bound path and routes will be evaluated.

Wee.routes.run();

Advanced

If an object is provided, only the passed routes will be evaluated.

Wee.routes.run({
    routes: {
        '$any': 'common:init',
        'script': {
            'routes': function() {
                // Current page
            }
        }
    },
    path: '/script/routes'
});

Segments

Get all segments or single segment at index

VariableTypeDefaultDescriptionRequired

index

integer

-

Zero-based segment index

Get all

Retrieve segment array from the currently bound path.

Wee.routes.segments();
["script", "routes"]

Get single

Get single segment by defining zero-based index.

Wee.routes.segments(1);
"routes"

URI

Get currently bound URI values or set URI data with a specified string or value object

VariableTypeDefaultDescriptionRequired

value

string, object

-

Object parameters below

Value Object

VariableTypeDefaultDescriptionRequired

hash

string

-

Hash value

path

string

-

Relative path

Query

object

-

Query string object

Get

Based on “https://www.weepower.com/script/routes?success=yes#uri” the following object would be returned.

Wee.routes.uri();
{
    hash: "uri",
    path: "/script/routes",
    query: {
        success: "yes"
    }
}

Set String

The set method accepts either an absolute URL, a relative path, or just a #hash.

Wee.routes.uri('another/page');

Set Object

Only the properties you wish to update should be provided. They will be merged into the current values.

Wee.routes.uri({
    hash: 'uri',
    path: '/script/routes',
    query: {
        success: 'yes'
    }
});

Setting the URI only updates the internal reference. It doesn’t navigate the page.

Values

You can easily disable any unneeded breakpoints by setting them to false in wee.json.

  1. Portrait Mobile (320px)
  2. Landscape Mobile (480px)
  3. Portrait Tablet (768px)
  4. Small Desktop (1024px)
  5. Medium Desktop (1280px)
  6. Large Desktop (1440px)

Wee uses the font family of the HTML element to reference the current breakpoint. You can add additional custom values by setting the value to a numeric string in your CSS. This would typically be done in a custom media query.

@media (max-width: 600px) {
    html {
        font-family: '1.5';
    }
}

Helpers

Add helper to run additional processing on tag data

addView

Add views to store for on-demand reference

VariableTypeDefaultDescriptionRequired

name

string

-

View name

value

string

-

View value

Wee.view.addView('copyright', '<small>&copy; {{ year }}</small>');
var template = '{{> copyright }}',
    data = {
        year: 2015
    };

Wee.view.render(template, data)
"<small>&copy; 2015</small>"

You can also add views to the store and then reference them when creating apps or rendering.

Wee.view.addView('viewName', 'My name is {{ firstName }} {{ lastName }}');
Wee.view.render('viewName', {
    firstName: 'Don',
    lastName: 'Draper'
});
Wee.app.make('appName', {
    view: 'viewName',
    model: {
        firstName: 'Don',
        lastName: 'Draper'
    }
});

Render

Parse data into template string

VariableTypeDefaultDescriptionRequired

template

string

-

Template string

data

object

-

Data object

Simple

var template = 'My name is {{ firstName }} {{ lastName }}',
    data = {
        firstName: 'John',
        lastName: 'Smith'
    };

Wee.view.render(template, data);
"My name is John Smith"

Fallback Values

var template = 'My name is {{ firstName }} {{ lastName| |'Doe' }}',
    data = {
        firstName: 'John'
    };

Wee.view.render(template, data);
"My name is John Doe"

Changing Context

var template = '{{ #child }}{{ #child }}{{ name }}\'s dad is {{ ../name }} and his grandad is {{ $root.name }}.{{ /child }}{{ /child }}',
    data = {
        name: 'John',
        child: {
            name: 'Jimmy',
            child: {
                name: 'Charlie'
            }
         }
    };

Wee.view.render(template, data);
"Charlie's dad is Jimmy and his grandad is John."

Helpers

var template = 'My name is {{ firstName }}{{ #lastName|notEmpty }} {{ lastName }}{{ /lastName }}',
    data = {
        firstName: 'John',
        lastName: 'Smith'
    };

Wee.view.render(template, data);
"My name is John Smith"

Loop Variables

Within tag pairs there are a handful of variables made available automatically.

  • {{ $key }} - The key when iterating over an object
  • {{ . }} - The single currently iterated value
  • {{ # }} - Zero-based loop index
  • {{ ## }} - One-based loop index
var template = '{{ #names }}{{ # }} | {{ ## }} | {{ . }} | {{ $key }}<br>{{ /names }}',
    data = {
        names: {
            'John': 45,
            'Jane': 42,
            'Jimmy': 18,
            'Jenny': 15
        }
    };

Wee.view.render(template, data);
0 | 1 | 45 | John<br>
1 | 2 | 42 | Jane<br>
2 | 3 | 18 | Jimmy<br>
3 | 4 | 15 | Jenny<br>

Advanced

The render method does more than simple variable output. It can traverse as deep into the provided object as you need for multi-level output.

var template = '<p>My Name is {{ firstName }}{{ #lastName|notEmpty }} {{ lastName }}{{ /lastName }}</p>' +
    '{{ #children|notEmpty }}' +
        '<p>My Children are:</p>' +
        '<ul>{{ #.|each }}' +
            '<li>{{ name }} - {{ age }}</li>' +
        '{{ /. }}</ul>' +
    '{{ else }}' +
        '<p>I have no children.</p>' +
    '{{ /children }}',
    data = {
        firstName: 'John',
        lastName: 'Smith',
        children: [
            {
                name: 'Judy',
                age: '12'
            },
            {
                name: 'James',
                age: '9'
            }
        ]
    };

Wee.view.render(template, data);
<p>My Name is John Smith</p>
<p>My Children are:</p>
<ul>
    <li>Judy - 12</li>
    <li>James - 9</li>
</ul>

Slice

This polyfill adds support for slicing NodeLists and HTMLCollections which is useful when working with the DOM in IE9 and below.

var elements = Array.prototype.slice.call(nodeList);

Wee requires the slice polyfill for compatibility with IE9 and below.

Placeholder

The Wee placeholder polyfill patches support for the placeholder attribute on inputs and textareas. It sets the value to the placeholder but clears it on focus and form post to mimic native placeholder functionality.

Placeholder

<input type="text" name="title" placeholder="Entry Title">
<textarea name="message" placeholder="Write your message..."></textarea>