Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (72 sloc) 2.81 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fusebox</title>
<link href="css/fusebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.7.2.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="src/jquery.fusebox.js" type="text/javascript"></script>
<script src="src/jquery.fusebox.fn.js" type="text/javascript"></script>
<script src="src/jquery.fusebox.container.js" type="text/javascript"></script>
<script src="src/jquery.fusebox.bindings.js" type="text/javascript"></script>
<!-- <script src="jquery/jquery.fusebox.js" type="text/javascript"></script> -->
<script>
$(document).ready(function() {
$("a[rel=fusebox]").fusebox();
$("a.loaded-remotely").fusebox("h1:eq(0)");
$("a[rel=fusebox-remote]").fusebox("h1:eq(0)", {cache: true});
$(".bound-event").click(function() {
$(this).css({color: "red"});
});
$(".bound-header").live("click", function() {
$(this).css({color: "red"});
});
$(".fusebox-close").live("click", function() {
$.fusebox.close();
});
});
</script>
<style type="text/css">
body { background: #fdd; }
.col-12 { width: 650px; }
</style>
</head>
<body>
<h1 class="bound-header">Fusebox</h1>
<a href="test.html" rel="fusebox">This should not open a fusebox</a>
<a href="test.html" rel="fusebox" class="item-list clean">This is my content</a>
<a href="test.html" rel="fusebox" class="item-list">This is the same content</a>
<a href="test.html" rel="fusebox-remote" class="loaded-remotely">This loads remote content</a>
<a href="test.html" rel="fusebox-remote" class="loaded-remotely-2">This loads remote content without refreshing</a>
<a href="test.html" rel="fusebox" class="item-list-2 clean">This is secondary content</a>
<div class="fusebox-loaded-remotely"></div>
<div class="fusebox-loaded-remotely-2"></div>
<div class="fusebox-item-list">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<h1 class="bound-event">This should be bound correctly</h1>
<p class="fusebox-close">Close</p>
</div>
<div class="fusebox-item-list-2 col-12">
<div style="float: left">
<h2>This is float: left;</h2>
<ul>
<li>another</li>
<li>another</li>
<li>another</li>
<li>another</li>
</ul>
<h1 class="bound-event">This should still be bound correctly</h1>
<div style="float: right;">
<h3>This is float: right;</h3>
</div>
</div>
<p class="fusebox-close">Close</p>
</div>
</body>
</html>