jQuery TOOLS / Expose - Make your HTML elements stand out

Keywords：expose html,expose html jquery,javascript expose,stand out html javascript,javascript expose plugin

Description：Make your HTML elements stand out

Demo

Start entering text on the input fields below and you'll see the masking effect:

Password

The story

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. The exposing effect was first introduced in the overlay tool. Usually the effect is an integral part of the program and cannot be used separately. This tool takes the idea of exposing a little further. It is a separate tool that can be used as a general purpose masking utility. You can use it for overlays, forms, images, videos or Flash objects. You can use CSS to tweak the look of the mask.

Usage

Here are some most common ways of using the mask:

// place a white mask over the page
$(document).mask();

// place a custom colored mask over the page
$(document).mask("#789");

// place a non-closable mask
$(document).mask{ closeOnEsc: false, closeOnClick: false });

// place a mask but let selected elements show through (expose)
$("div.to_be_exposed").expose();

// close the mask
$.mask.close();

There are two different calls: mask and expose. The mask method is only available for the document object and you cannot use any other selector. The expose() method can take any jQuery selector and all elements returned by the selector are placed on top of the mask.

The mask is loaded immediately after the expose or mask call. You can supply a different configuration on each call and the latest call is remembered. A subsequent expose call for example will use the previously used configuration if no arguments are given.

You can also use an existing element as a mask. By default the tool uses an element whose id is exposeMask and if it does not exist already exist then it will be created automatically.

Demos

We believe that the best way to learn is through demos. The following demos are fully documented and a standalone page is provided to get mask working on your site. It's really important to study the first demo "Minimal setup for mask" because it teaches you the basics of using the library.

• Minimal setup for expose
• Styling the mask with a background image
• Exposing a form
• Exposing videos with a custom mask

Expose and Flowplayer demos

These demos show how to use a video player together with the mask tool:

• Exposing video upon mouseover
• Exposing videos
• Custom fullscreen action with overlay and mask
• Email and embed features with overlay and mask

Mask Graphics

You can use our graphics as the basis for your design. You can freely change the design as you see fit. Click the image on the right to download a zip file. Before using the graphics, you should consult the User's Guideon how graphics can be used when designing the look and feel of the tools.

Here are a few examples of what is included in the zip file:

 

Configuration

Here is a full list of available configuration options:

Here is an example of an onBeforeLoad callback function given in configuration. Inside any callback function the this variable is a pointer to the mask scripting API.

$("#mydiv").expose({

	// before masking begins ...
	onBeforeLoad: function(event) {

		// grow the exposed elements smoothly by 100 pixels
		this.getExposed().animate({width: '+=100'});
	}
});

Note: unlike other jQuery Tools you can supply callbacks only from the configuration and you can assign only one callback for the same event.

Scripting API

Unlike other jQuery Tools in this library the mask is a singleton. Only one mask instance can exist at any given time. This singleton can be accessed directly with $.mask or via the this variable inside callback functions.

Method listing

原文地址：http://flowplayer.org/tools/toolbox/expose.html