Home > Web Front-end > JS Tutorial > body text

jquery tools series expose learning_jquery

WBOY
Release: 2016-05-16 18:47:03
Original
999 people have browsed it

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

Copy the code The code is as follows:


expose test!










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!



    






Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!