jQuery plugin: CSS3-like borders (border-image)

Afgelopen maart 2010 heb ik een jQuery border plugin geschreven die het mogelijk maakt om afbeeldingen als borders te maken om html-elementen. Iets wat de nieuwe CSS3 border-image kan in de nieuwere browsers. Deze nieuwe versie kan iets beter omgaan met safari en werkt ook met wat nieuwe berekeningen waardoor een offset gebruikt kan worden.

Requirements

• De laatste versie van jQuery.
• Afbeeldingen en script voor de plugin. Download hier (.rar).

Stap 1: Afbeeldingen

Plaats de afbeeldingen in de map /img/. In het voorbeeld heb ik ook een achtergrond.jpg gebruikt. Deze kan je verwijderen door de volgende code te gebruiken.

$(document).ready(function() {
	$('.borders').borders({background_image:''});
});

Je kan ook een eigen achtergrond gebruiken door de optie `background_image` naar de juiste afbeelding te verwijzen.

Stap 2: Aanroep van de plugin

De standaard aanroep van de plugin $(element).borders(); zal om de gehele element en achtergrond nieuwe afbeeldingen plaatsen die in de /img/ map te vinden zijn. Mocht je andere afbeeldingen gaan gebruiken zou je de j.borders.js moeten aanpassen of bij de aanroep de nieuwe gegevens van de afbeeldingen mee geven (zoals de breedte/hoogte van de afbeeldingen). Dit doe je als volgt.

$(document).ready(function() {
	$('.borders').borders({
		left_image: '/img/shadow_left.png',
		right_image: '/img/shadow_right.png',
		top_image: '/img/shadow_top.png',
		bottom_image: '/img/shadow_bottom.png',
		topleft_image: '/img/shadow_topleft.png',
		topright_image: '/img/shadow_topright.png',
		bottomleft_image: '/img/shadow_bottomleft.png',
		bottomright_image: '/img/shadow_bottomright.png',
		border_w: 10,
		corner_s: 20
	});
});

In dit voorbeeld zijn de afbeeldingen 10 pixels breed/hoog en zijn de afmetingen van de hoeken 20x20 pixels.

Als laatste voorbeeld is het mogelijk om de borders verder naar buiten of naar binnen te plaatsen. Hiermee maak je het mogelijk om een padding te geven aan het originele element. Dit doe je door de volgende optie mee te geven.

$(document).ready(function() {
	$('.borders').borders({
		offset: 10
	});
});

Demo

Bekijk hier een voorbeeld hoe de plugin er in de werking uitziet.