silverstripe-framework/thirdparty/greybox/test.html

99 lines
3.4 KiB
HTML
Raw Normal View History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>GreyBox Redux</title>
<script type="text/javascript" src="jquery-1.0.2.js"></script>
<script type="text/javascript" src="greybox.js"></script>
<link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
<!-- This CSS supports only IE 5.5 +. The conditional below
just for the sake of brevity.
-->
<!--[if lt IE 7]>
<link href="ie-hacks.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
var myCallback = function() {
alert('Callback on close');
}
$("a.greybox").click(function(){
var t = $(this).title() || $(this).text() || $(this).href();
$.GB_show($(this).href(), {
height: 400,
width: 400,
animation: false,
overlay_clickable: true,
caption: t
});
return false;
});
$("a.greybox_no").click(function(){
var t = $(this).title() || $(this).text() || $(this).href();
$.GB_show($(this).href(), {
height: 400,
width: 400,
animation: false,
overlay_clickable: false,
caption: t
});
return false;
});
$("a.greybox_ani").click(function(){
var t = $(this).title() || $(this).text() || $(this).href();
$.GB_show($(this).href(), {
height: 400,
width: 400,
animation: true,
overlay_clickable: true,
caption: t
});
return false;
});
$("a.greybox_no_cb").click(function(){
var t = $(this).title() || $(this).text() || $(this).href();
$.GB_show($(this).href(), {
height: 400,
width: 400,
animation: false,
overlay_clickable: false,
callback: myCallback,
caption: t
});
return false;
});
$("a.greybox_no_cb_of").click(function(){
var t = $(this).title() || $(this).text() || $(this).href();
$.GB_show($(this).href(), {
height: 400,
width: 400,
animation: false,
overlay_clickable: false,
overflow: "hidden",
callback: myCallback,
caption: t
});
return false;
});
});
</script>
</head>
<body>
<h1>Greybox Redux (Reworked)</h1>
<p>Reworked original greybox redux at
<a href="http://jquery.com/demo/grey/">http://jquery.com/demo/grey/</a></p>
<h2 id="headline">See it in action:</h2>
<ul>
<li><a href="http://google.com/" title="Google" class="greybox_no">Launch Google</a> (Overlay not clickable)</li>
<li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a> (Overlay clickable)</li>
<li><a href="http://msn.com/" class="greybox_ani">Microsoft would like a visit.</a> (overlay clickable, animated)</li>
<li><a href="http://jquery.com/" class="greybox_no_cb">jQuery Rocks!</a> (Overlay not-clickable, callback alert)</li>
<li><a href="http://jquery.com/" class="greybox_no_cb_of">jQuery Rocks!</a> (Overlay not-clickable, callback alert, firefox only: greybox overflow set to hidden)</li>
</ul>
</body>
</html>