48 lines
1.7 KiB
HTML
48 lines
1.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Single links - Using a TopUp preset</title>
|
|
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
|
|
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="page_background"></div>
|
|
<div id="page_wrapper">
|
|
<div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
|
|
<h2>TopUp</h2>
|
|
<h1>The #1 Javascript Pop Up made by Paul Engel</h1>
|
|
</div>
|
|
<div id="page_content">
|
|
<div id="description">
|
|
<h2>TopUp preset</h2>
|
|
<p>
|
|
Specifying a TopUp preset is just like specifying style attributes to a CSS selector in your stylesheet.
|
|
The great advantage of using presets is that it provides you to keep your HTML <strong>entirely(!)</strong> clean.
|
|
</p>
|
|
<p>
|
|
Just call <code>TopUp.addPresets()</code> with a hash as parameter.<br>
|
|
The key of each entry has to be a CSS selector and the value has to be a hash of toptions.
|
|
</p>
|
|
</div>
|
|
<h2>Demo</h2>
|
|
<div id="demo">
|
|
<div id="examples">
|
|
<a href="photos/1.jpg"><img src="thumbnails/1.jpg"/></a>
|
|
<a href="photos/2.jpg"><img src="thumbnails/2.jpg"/></a>
|
|
<input type="button" value="Open Google" href="http://www.google.nl" class="tu_iframe_800x600"/>
|
|
</div>
|
|
<script type="text/javascript">
|
|
TopUp.addPresets({
|
|
"#examples a": {
|
|
effect: "clip"
|
|
},
|
|
"#examples input": {
|
|
shaded: 1, effect: "fade", overlayClose: 1
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |