jquery tools series expose learning_jquery

For example, when learning overlay, first give the html target code of the operation:

Copy the code The code is as follows:

expose test!

open div
close div

This function is implemented through the jqueryObject.expose() method. The specific implementation method is as follows:
$("jquery selector").expose({config object}) //This method is customized through the configuration object. display of expose.
The following code describes the configuration parameters:
closeOnClickThis attribute is used to set whether to close the

Attributes	Default value	Detailed description
color	'#456'	Set the background color of the non-expose (highlight) area when the expose (highlight) effect is displayed. If the background color is not set here, the expose function will provide a default color. In addition, attributes can also be set through the CSS style of maskId.
opacity	0.8	The non-expose(highlight) in the settings page is in the The background transparency when the expose (highlight) effect is displayed. The value range of transparency here is [0,1]. The larger the value, the lower the transparency.
loadSpeed	'slow'	Set the display speed of the non-expose (highlighted) area in the page when the expose (highlighted) effect is triggered. The value here can be set to: 'slow', 'normal', 'fast' and millisecond value. For example: If the value set here is 2000, then the non-exposed (highlighted) area effect will be displayed within 2 seconds. If the value here is set to 0, then the non-expose (highlighted) area will have no animation effect and will be displayed immediately.
closeSpeed	'fast'	The non-expose(highlight) in the settings page is in the The expose (highlight) closing speed when the effect is turned off. The value here can be set to: 'slow', 'normal', 'fast' and millisecond value. For specific examples, see the relevant examples in this article.
maskId	'exposeMask'	Non-expose (highlighted) area corresponding to the page div elementid, which is a normal div element, when expose( highlights ) After being triggered, it will automatically adjust to completely cover the entire page. The display effect of non-expose(highlighted) area can be set by setting the div style to change. If there is no setting here, the plugin will provide a id by default as exposeMask. > to implement non-expose areas.
TRUE		expose( highlight when the non-expose area is clicked Display ) effect.The default value of this attribute is true, and after the non-expose area is clicked, exposeThe effect is turned off.
closeOnEsc	TRUE	This attribute is used to set whether to close the expose( highlight after the Esc key is pressed Display ) effect. The default value of this attribute is true, and after the Esc key is pressed, exposeThe effect is turned off.
zIndex	9998	Set the z-index (CSS) attribute of the non-exposed (highlighted) area in the page settings page. Under normal circumstances, the default zIndex attribute value is very large, so there is no need to set it here. However, one thing to note is that the z-index attribute value of the non-exposed (highlighted) must be larger than any element on the page. z-index attribute.
api	FALSE	For the explanation of this attribute, please refer to the explanation of attributes with the same functions such as tabs, scollable in this series.
onBeforeLoad		expose(Highlight) Function called before the effect is triggered. If the function returns false, then expose(highlight effect) will blocked from implementation.
onLoad		expose (highlight) After the effect is achieved, , this function is triggered.
onBeforeClose		expose (highlight) function is called before the effect is turned off. If the function returns false, then expose(highlight effect) will Blocked from closing.
onClose		expose（突出显示）效果关闭后,该函数被触发。

In addition, expose also provides a series of methods for obtaining expose objects. The descriptions of these methods are as follows:

Method	Return value	Detailed description
load()	API	triggerexpose(highlight)effect, This method can only be called successfully after expose(highlight) is initialized.
close()	API	Close the expose(Highlight) effect.
isLoaded()	boolean	Determine whether the current expose(highlighted) has been triggered.
getMask()	jQuery	returns expose(highlight)jqueryObject. Non-expose(highlight) can be changed through the related methods of jquery The display effect of the area.
getExposed()	jQuery	returns expose(highlight)'s jquery Object.
getConf()	Object	Returns the configuration object of expose(highlighted).
onBeforeLoad(fn)	API	Same as the onBeforeLoad attribute in the configuration file.
onLoad(fn)	API	Same as the onLoad attribute in the configuration file.
onBeforeClose(fn)	API	同配置文件中onBeforeClose属性。
onClose(fn)	API	同配置文件中onClose属性。

The specific usage of expose configuration object property setting and method calling is as follows:

Copy code The code is as follows:

var testApi=$("#test").expose({
color:'#44f',
opacity:0.5,
loadSpeed:2000,
closeS speed:3000,
closeOnClick:false,
closeOnEsc:false,
api: true,
lazy:true,
onBeforeLoad:function(){
alert("before load!");
},
onLoad:function(){
alert("onLoad!");
onBeforeClose:function(){
alert("mask-background:" this.getMask ().css("color") ",exposeId:" this.getExposed().attr("id")
                                                                                    ("Before close!");
         },
                                                                                   });

                                                                                                                                                                                       function(){
testApi.load();
});
$("#btn_close").click(function(){
testApi.close();
}) ;

alert("test is load:" testApi.isLoaded());

$("#ball").expose({
//Style through maskId here backgroundcolor to set the color attribute Exposed().animate ({width: 298});
},
onbeForeClose: Function () {
this.Getexpose (). Animate ({width: 130}); }).click(function(){
          $(this).expose().load();
      });


Finally, the complete sample code and this function are given Get some demo pictures:




Copy code


The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    expose test!

    

open div
close div