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:

Username
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:

property	default	description
closeOnClick	true	Specifies whether the masking disappears when the mask is clicked. By default, this is set to true.
closeOnEsc	true	Specifies whether masking disappears when the ESC key is pressed from the keyboard. By default, this is set to true.
closeSpeed	'fast'	How quickly the mask disappears. Possible values are 'slow', 'normal' and 'fast or you can supply the number of milliseconds. For example, a value of 2000 will cause the mask to disappear in 2 seconds. By setting this to zero there is no animation and the mask disappears immediately.
color	'#fff'	The background color of the mask. This will dramatically affect how it appears. If you supply a value of null here, you can control the background color with CSS. See themaskId property below for more information.
loadSpeed	'slow'	How quickly the mask will appear. Possible values are 'slow', 'normal' and 'fast or you can supply the number of milliseconds. For example, a value of 2000 will cause the mask to appear in 2 seconds. By setting this to zero there is no animation and the mask appears immediately.
maskId	'exposeMask'	The mask is a normal div element placed on top of your page and whose size is automatically adjusted to cover the user's screen completely. You can style it normally with CSS just like any other element on the page. By default, the mask's id is set to mask, but you can change that with tis configuration option. Since version 1.2.0 you can use an existing element as the mask if it's id matches the one given in this configuration option.
opacity	0.8	The transparency setting of the mask. A decimal value from 0 to 1. A bigger value means less transparency while a value of 0 is fully transparent (invisible).
startOpacity	0	since 1.2.0. The initial transparency level of the mask before it starts fading in to the desired opacity as specified by the opacity option. A decimal value from 0 to 1. A bigger value means less transparency while a value of 0 is fully transparent (invisible). For example, you can start with full opacity and gradually fade to a semi-transparent mask.
zIndex	9998	This is the z-index CSS property for the mask. The zIndex specifies the placement of the element along the z-axis of the document. The default zIndex value is very high, so it is unlikely that you will need to alter it; however, this value must be greater than the z-index of any other element on the page so that the overlay will always be visible when called.
onBeforeLoad		This callback function is triggered before the masking effect. Returning false or callingevent.preventDefault() in the callback prevents masking from occurring.
onLoad		This callback function is triggered after masking takes place.
onBeforeClose		This callback function is triggered before mask is closed. Returning false or callingevent.preventDefault() in the callback prevents it from closing.
onClose		This callback function is triggered when mask is closed.

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

method	return value	description/example
close()	API	Closes the mask.
fit()	API	Forces the mask to fill the whole document. This is usually not needed since the tool itself does this. You'll need this on occasions when the mask is loaded and your document has grown in size in the meantime.
isLoaded(fully)	boolean	Returns true if mask is loaded. Since 1.2.4 you can supply a boolean argument that makes sure that the function returns true only if the mask is fully visible in it's final position and opacity.
getMask()	jQuery	Returns the mask as a jQuery object. You can use jQuery methods such as css oranimate to modify it.
getExposed()	jQuery	Returns exposed elements (if any) as a jQuery object.
getConf()	Object	Returns the masking configuration.

 

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