Introduction to Jquery-tools-overlay Use

Introduction to Jquery-tools-overlay Use _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags numeric value

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy Code code as follows:

<! DOCTYPE html>
<title>jquery Tools Standalone Demo</title>

<script src= "Http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" ></script>

<link rel= "stylesheet" type= "Text/css"
Href= "./overlay-basic.css"/>
<style>
/* Some styling for triggers * *
#triggers {
Text-align:center;
}
#triggers img {
Cursor:pointer;
margin:0 5px;
Background-color: #fff;
border:1px solid #ccc;
padding:2px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* Styling for elements inside overlay * *
. details {
Position:absolute;
top:15px;
right:15px;
font-size:11px;
Color: #fff;
width:150px;
}
. Details H3 {
Color: #aba;
font-size:15px;
}
</style>
<body>
<div id= "Triggers" >

</div>

<div class= "Simple_overlay" id= "Mies1" >

<div class= "Details" >
<p>
The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
is the German Pavilion for the 1929 International Exposition in
Barcelona, Spain. It was a important building in the history of
Modern architecture.
</p>
<p>
Several critics, historians and modernists have declared it "the
Most beautiful building of the century "
</p>
</div>
</div>
<div class= "Simple_overlay" id= "Mies2" >

<div class= "Details" >
<p>
Another Unique feature of this building is the <em>exotic
Materials Mies chose to use</em>.
</p>
<p>
Plates of high-grade stone materials like veneers of Tinos Verde
Antico Marble and Golden Onyx as as, tinted glass of grey,
Green, white, in addition to translucent glass, perform
Exclusively as spatial dividers.
</p>
</div>
</div>
<script>
$ (document). Ready (function () {
$ ("Img[rel]"). Overlay ({
Closeonclick:false,
Mask: ' darkred '
});
});
</script>
</body>

Css

Copy Code code as follows:

/* The overlayed element * *
. simple_overlay {
/* Must be initially hidden * *
Display:none;
/* Place overlay in top of the other elements * *
z-index:10000;
* Styling * *
Background-color: #333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers * *
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow:0 0 90px #000;
}
/* Close button positioned on upper right corner * *
. Simple_overlay. Close {
Background-image:url (./close.png);
Position:absolute;
right:-15px;
top:-15px;
Cursor:pointer;
height:35px;
width:35px;
}

Name of the CSS that is closed: XXX. Close
Of
The following are all the available property options:

Property	Default Value	Description
Close		The end element overlay within a jquery selector. These can be any element, such as a link, a button, or an image. If this is not a provided, intimate element is automatically generated. Read more about this in the definition of closing action .
Closeonclick	`true`	By default, overlap Occurs when the mouse closes or clicks out of the area. fits the modal dialog box .
Closeonesc	`true`	By default, the ESC key is turned off when the network is overwritten
effect	`' default '`	effect when you want to use open package, close. This can dramatically change the behavior of the overlay. By default this tool uses a effect called ' default ' which is a simple show/hide effect. The available effect You can also
fixed	`true`	Since the 1.2.0 then is positioned over the overlay of the related document so that scrolling on the screen and stacking with the document moves together.
mask		Previously known as the exposure Mask tool mask configuration See an example of overlay with mask
Left	"Center"	Specify how far the edge of the screen from the left side of the overlay should be placed. By default, the horizontal wrap set value is "center", but you can also provide a value specifying the distance in pixels.
Load	False	since 1.2.0 . is initialized immediately after the load has been enabled and overwritten.
Oneinstance	`true`	By default, you can only have one overlay on the page. Set this property to假允许您有多个叠加实例。
Speed	' Normal '	Fade in the ' normal ' effect of the speed animation. The valid values are ' slow ', ' normal ' and ' fast ', or you can provide a numeric value (in milliseconds). By setting this property to 0, scrolling occurs immediately without any animations.
Target		specified in the element of the timeline (if not thisrel 属性的触发元素)。
Top	' 10% '	Specifies how the overlay should be placed away from the top edge of the screen. An acceptable value is an integer specifying a distance in pixels, a string (such as "15%") specifying a percentage value or a "center" in which the overlay is vertically centered. Percent work has been maintained at different screen resolutions.

Event
Make sure you have read about the event jquery tool. All event listeners receive this event object as the first argument and no other arguments are superimposed.

events
Onbeforeload	Overlay before displaying. The overlay has been positioned where the animation will begin.
OnLoad	When the overlay has been completely displayed
Onbeforeclose	Before closing the overlay
OnClose	When the overlay is off

Scripting API
First make sure you have understood yourself with the jquery tool script. The following are all the available API methods:

Method	return value type	Description
Close ()	Overlay	Closes the overlay.
Getclosers ()	`jQuery`	Returns the end element (s) as a jquery object.
Getconf ()	`对象`	will be configured to overlay.
Getoverlay ()	`jQuery`	Returns the element as a schedule of jquery objects.
Gettrigger ()	`jQuery`	The return element is triggered as a jquery object.
Isopened ()	Boolean	Return真正的如果打开包裹。
Load ()	Overlay	Open the overlay.

We'll update the time tomorrow. The one to draw a sentence for this.

Tab: Portal
tab (slide): Portal
ToolTip: Transmission Door
Overlay: Transmission Door
Dateinput: Transmission Door
In Ctrip doing framework2.0, research is framework4.0, at that time is how to think of t.t. It's all TMD technology and heap code.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More