It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

<ul id="menu">
	<li class="active"><a href="#contentHome">Home</a></li>
	<li><a href="#contentGuestbook">Guestbook</a></li>
	<li><a href="#contentLinks">Links</a></li>
</ul>
<div id="contentHome">Content for Home</div>
<div id="contentGuestbook">My guestbook</div>
<div id="contentLinks">Links</div>

When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.

$('ul').tabify();

How to use Elastic

The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.

	$('#myTextarea').elastic();

Known issues

EM The elastic plugin does work with font sizes, line-heights and such set in em, but it does work better with px. Elastic needs to convert your em value to a pixel value. 1.2em might be 16.56478px which is not exactly the same as 1.2em. After a couple of hundreds of rows the height of the text area is going to be too small or too big.

How to use Limit

To use the full power of Limit you need two html elements; one textarea or input field and an element to show amount of characters left.

You have <span id="charsLeft"></span> chars left.
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
    $('#myTextarea').limit('140','#charsLeft');
</script>

If you don’t want to show the amount of characters left you can do like this.

<textarea id="myTextarea"></textarea>
<script type="text/javascript">
    $('#myTextarea').limit('140');
</script>

How to use Highlight

You can throw both a string or an array on Highlight. Have a look at the example below. The first row is going to highlight the word acknowledgment, the second row is going to highlight both ‘matching’ and ‘class name’. The code shown in the example below has been executed in this page.

	$('.body').highlight("acknowledgment");
	$('.body').highlight(["matching","class name"]);

What actually happens is that the matching phrases are wrapped inside a span element with the class name highlight. Therefor you will also need to add some css code to get a visual result.

.highlight { background: #ff0; }

Acknowledgment

Johann Burkard The core is based on ideas presented in Johann Burkard’s Jquery plugin with the same name.

How to use Accordion

It is very easy to use Accordion. All you need to do is to create an ul-list, fill it with a couple of li-elements and div-elements for the content; In the example below if you click on New York the div element containing Information about New York will show.

<ul>
    <li>
        <a href="#america">America</a>
        <ul>
            <li>
                <a href="#america-newyork">New York</a>
                <div>Information about New York</div>
            </li>
            <li>
                <a href="#america-sanfransisco">San Fransisco</a>
                <div>Information about San Fransisco</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#antarctica">Antarctica</a>
        <div>Information about Antarctica</div>
    </li>
</ul>

When you have created the necessary html code you need to include the javascript file with the plugin and call the accordion method. See the demo for a more detailed example.

$('ul').accordion();

Linking to a level inside the accordion

Notice the href-attributes on each a-element. If you in the html code example above create a link to #america-newyork and click it the accordion will open up ‘New York’ and all it’s parents.

Open a panel on load

Set the li classname to “current” and it will be open when the page loads.

Valid8 features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

1) Regular expressions
For determining whether a value matches a regular expresion. For example determining if a user name consists of only letters and numbers.
2) Javascript functions
Send one or multiple values to a custom function. For example checking if the ‘password’ and the ‘confirm password’ input field matches each other.
3) Ajax requests
Post one or multiple values to a external file. For example to see if a user name already exists in the database.

Examples and demos

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. I think the best way for me to describe how Valid8s individual parts is by showing you a set of examples.

How to make an input field required
This example will show you how to make an input field required and show the default validation message ‘Required’ if the field is left empty.
How to make an input field required and show a custom error message
This example will show you how to make an input field required and show a custom validation message if the field is left empty.
How to validate with a single regular expression
This example will show you how to validate using a regular expression that dictates that the input field(s) only can contain letters and numbers.
How to validate with multiple regular expressions
This example will show you how to validate using two regular expressions. One that dictates that the input field is required and one that the input field only can contain letters and numbers. Valid8 will show a different validation message depending on which regular expression it violates first.
How to validate with a javascript function
This is example will show you how to compare the Password field with the Confirm Password field and make Confirm Passoword invalid if it doesn’t match the Password field.
How to validate using an ajax request
This example will show you how to make see if an email address already is in your database.

Example – How to make an input field required

Calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty.

    $('#inputUsername').valid8();

Example – How to make an input field required and show a custom error message

Calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

    $('#inputUsername').valid8('Username is required');

Example – How to validate with a single regular expression

The example below is using a regular expression that dictates that the input field(s) only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown.

    $('#inputUsername').valid8({
        'regularExpressions': [
            { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });

Example – How to validate with multiple regular expressions

The example below is using two regular expressions that dictates that the input field(s) not can be empty and only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown. If the field is left completely empty it will show the validation message ‘Field is required’.

    $('#inputUsername').valid8({
        'regularExpressions': [
	    { expression: /^.+$/, errormessage: 'Username is required'},
        { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });

Example – How to validate with a javascript function

In this example validates the input field ‘#inputPasswordVerification’ and see if it matches the input field ‘#inputPassword’. If it doesn’t match the validation message ‘Passwords does not match’ will be shown.

function doesPasswordFieldsMatch(values){
    if(values.password == values.verification)
        return {valid:true}
    else
        return {valid:false, message:'Passwords does not match'}
}

$('#inputPassword').valid8('Password is required');
$('#inputConfirmPassword').valid8({
    'jsFunctions': [
        { function: doesPasswordFieldsMatch, values: function(){
                return { password: $('#inputPassword').val(), verification: $('#inputConfirmPassword').val() }
            }
        }
    ]
});

Example – How to validate with an ajax request

This example will post the value of the input field ‘#inputEmail’ to isEmailUnique.php.

	$('#inputEmail').valid8({
	    'regularExpressions': [
	        { expression: /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/, errormessage: 'Email is not valid'},
            ],
	    'ajaxRequests': [
	        { url: 'lib/isEmailUnique.php' }
	    ]
	});

$email = $_POST['value'];

if(!isEmailUnique($email)){
	$json["valid"] = false;
	$json["message"] = 'Email is already in use';
}
else {
	$json["valid"] = true;
}

function isEmailUnique($email){
	// Database look-up should go here here...
	// But for the sake of this demo a random return will do
	return rand(0, 1);
}

print json_encode($json);

There are two ways of using Defaultvalue. The first one is the, according to w3c, pure one. The second one is in some cases the right way to go.

The first way

In the pure one you set the default value, the value you want to show when the input element is empty, in the javascript. For every default value you need to call the defaultValue function.

$('#inputUsername').defaultValue({'value':'Username'});
$('#inputPassword').defaultValue({'value':'Password'});

The second way

The second way of using Defaultvalue is in some cases the easiest approach, but it is not according to w3c’s recommendations. It does not validate since it makes use of the rel attribute. First off the rel attribute should be used to state a relation, secondly the input element doesn’t even have a rel attribute. But, it works… even in Internet Explorer 6.

You state the default value directly in the html using the inputs rel attribute. In the javascript you only need to call the defaultValue function once.

<input type="text" id="inputUsername" rel="Username" />
<input type="password" id="inputPassword" rel="Password" />

$('input').defaultValue();

Empty input fields has the class name ‘empty’

When the default value is shown the class name ‘empty’ is added to the field. Take a look at the demo and see how the default values differs from the user created values.

Password fields manipulate the DOM

Since you can’t change the type of an input field in Internet Explorer, Defaultvalue creates a clone of your password field but with the type text instead.

How to use Airport

Airtport is very easy to use. Create an element, give it an ID and throw airport on it. The values, moscow, berlin and stockholm, are the words it will flick through.

<div id="stuff"></div>
<script type="text/javascript">
    $('#stuff').airport(['moscow','berlin','stockholm']);
</script>

How to use Lazy

$.lazy({
	src: 'jquery.elastic.js',
	name: 'elastic'
});

// And then you use you plugins as you always do
$('textarea').elastic();

How to work with dependencies

$.lazy({
	src: 'ui.draggable.js',
	name: 'draggable',
	dependencies: {
		js: ['ui.core.js'],
		css: ['ui.draggable.css']
	}
});

// And then you use you plugins as you always do
$("#draggable").draggable();

This will load ui.draggable.css and ui.core.js before it loads ui.draggable.js and applies it on the element draggable.

Enable or disable caching

$.lazy({
	src: 'ui.draggable.js',
	name: 'draggable',
	dependencies: {
		js: ['ui.core.js'],
		css: ['ui.draggable.css']
	},
	cache: true
});

Caching is disabled by default, but you can enable it by setting the variable cache to true.