edv/VERAG_Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first git

Browse Source
This commit is contained in:
Andreas Luxbauer
2021-07-06 10:03:36 +02:00
commit 7937ab972e
417 changed files with 18573 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
js/topup/1. Single links/1. TopUp classes.html Normal file
View File

@@ -0,0 +1,48 @@
<html>
<head>
<title>Single links - Using TopUp classes</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 classes</h2>
<p>
You can implement TopUp just by adding a TopUp class to a HTML element.
There are multiple TopUp classes of which you can choose from.
</p>
<p>
For TopUp with default settings, just use 'top_up'.
You can also compose the TopUp class which specifies certain TopUp settings.
</p>
<p>
When composing you can specify:
</p>
<ol>
<li>the layout ('db' for dashboard, 'ql' for quicklook, 'fl' for flatlook)</li>
<li>the type (see <a href="http://gettopup.com/documentation">documentation</a>)</li>
<li>the dimensions (width'x'height)</li>
</ol>
<p>
The composed TopUp class has to begin with 'tu_' followed by the settings joined with underscores.<br>
As an example, use 'tu_ql_iframe' for a TopUp with the 'quicklook' layout and the 'iframe' type.
</p>
</div>
<h2>Demo</h2>
<div id="demo">
<a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
<a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
<a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>
</div>
</div>
</div>
</body>
</html>

48
js/topup/1. Single links/2. TopUp preset.html Normal file
View File

@@ -0,0 +1,48 @@
<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>

35
js/topup/1. Single links/3. Toptions.html Normal file
View File

@@ -0,0 +1,35 @@
<html>
<head>
<title>Single links - Using Toptions</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>Toptions</h2>
<p>
Other than TopUp classes or presets, you can also use plain old options to customize your TopUp element (so called toptions).
</p>
<p>
Just add the <code>toptions</code> attribute to your TopUp element.<br>
A toption is specified as "[name] = [value]", use the comma (",") as a seperator between toptions.
</p>
</div>
<h2>Demo</h2>
<div id="demo">
<a href="photos/1.jpg" toptions="effect = clip"><img src="thumbnails/1.jpg"/></a>
<a href="photos/2.jpg" toptions="shaded = 1"><img src="thumbnails/2.jpg"/></a>
<input type="button" value="Open Google" href="http://www.google.nl" toptions="type = iframe, effect = fade, width = 800, height = 600, overlayClose = 1"/>
</div>
</div>
</div>
</body>
</html>

2
js/topup/1. Single links/README Normal file
View File

@@ -0,0 +1,2 @@
This is the simplest type of all TopUp implementations.
A single HTML element (in most cases a link) refers to a certain location which will be presented by the TopUp module when clicked on that element.

BIN
js/topup/1. Single links/photos/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
js/topup/1. Single links/photos/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
js/topup/1. Single links/thumbnails/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
js/topup/1. Single links/thumbnails/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB