Write a plugin in 4 steps

---

This step-by-step tutorial shows you how to write own plugin.
Download the Example Plugin to see a working example with comments

1. Register your property

In the first line, write the main "property-name" (e.g. "add-class") and your function name for the property (e.g. addClass). Use the second line to register a special function that should fire before all events (e.g. to prepare the HTML element). If you don’t need this, just delete this line.

­

MoreCSS.properties["your-property"] = "yourPropertyFunction";
MoreCSS.applyOnLoad["yourPropertyFunction"] = "yourPropertyFunctionForOnLoad";

2. Write a function for your property

Start writing your own function in MoreCSS (also the preparing function) with these lines:

­

MoreCSS.functionName = function(element, properties, propertyValue, pseudoClass, caller, mode, numberOfElements) {
	element // The selected HTML element
	properties // Array with all properties for current element
	propertyValue // Value of called property
	pseudoClass // Given pseudo-class for the element
	caller // If a Target Selector is defined, this is the caller HTML element
	mode // If you run your function also on load, this has the value "prepare"
	numberOfElements // Number of similar elements found in document
};

3. Using the Library Functions

MoreCSS provides some very useful functions. See Library Functions for a full list. Call these functions in this way:

­

MoreCSS.getPropertyValue("add-class", "defaultClassName");

4. Using the Core Properties

In the same way you call a Library Function, you can also call a function of a Core Property in your own function. Be sure that Core Properties regular uses the “propertyValue” attribute for the first property and not the “properties” array.

­

var properties = new Array("property-one: value", "property-two: value");
MoreCSS.addClass(element, properties, "newClassName");