Working with multiple exposes

Expose demo 5 / 5 : Working with multiple exposes

This page contains two exposed elements whose exposing can be controlled with JavaScript buttons. Both exposed elements have different settings for the mask. Note that both exposes can be loaded simultaneously, a very unique feature of this tool.

HTML for the exposed elements

Exposed elements are simple DIVs that are styled with CSS:

<div class="exposed" id="e1">
	Exposed element #1
</div>

<div class="exposed" id="e2">
	Exposed element #2
</div>

JavaScript coding

Here we initialize the expose tool for the previous DIV elements. Both exposes are configured so that the expose API is made availabe by setting the api property to true. The lazy property is enabled so that the exposing effect won't be loaded upon page load. Both exposes are configured with a customized background color:

// initialize first expose and make it's API available
var api1 = $("#e1").expose({api:true, lazy:true, color: '#78c'});

// second expose
var api2 = $("#e2").expose({api:true, lazy:true, color: '#7a1'});

Buttons

Here are the action buttons. The container element has its z-index set larger than 9999 so that it is always placed on top of the mask. The buttons simply use the load and close API methods.

<div style="position:relative;z-index:10000;text-align:center">
	<button type="button" onClick="api1.load()">Load 1</button>
	<button type="button" onClick="api1.close()">Close 1</button>
	<button type="button" onClick="api2.load()">Load 2</button>
	<button type="button" onClick="api2.close()">Close 2</button>
</div>