forked from cjsaylor/Scrolltab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
70 lines (69 loc) · 2.77 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrolltab Demo</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4");
</script>
<script type="text/javascript" src="js/jquery.scrolltab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Have all scroll tabs expand on mouseover and detract on mouseleave
$('.scrolltab')
.click(function() {$(this).slideUp(); })
.scrolltab({
hoverin: function() {
$(this).stop().animate({width: '200px'}, 500);
},
hoverout: function() {
$(this).stop().animate({width: '50px'}, 500);
}
});
// Change three of the pins to a specific classname (instead of the default)
$('.test2').scrolltab({classname: 'scrolltab-item1', title: 'Green'});
$('.test3').scrolltab({classname: 'scrolltab-item2'});
$('.test4').scrolltab({classname: 'scrolltab-item3'});
// Options
$('#box-add').click(function() {
$('.container').append('<div class="scrolltab test5"/>');
$('.test5')
.click(function() {$(this).slideUp();})
.scrolltab({classname: 'scrolltab-item2', title: 'newbox'});
return false;
});
$('#box-showall').click(function() {
$('.scrolltab').slideDown();
return false;
});
});
</script>
<style>
body {background-color: #ccc}
#options {position: fixed; left: 5px; top: 0; background-color: white; border: 1px solid black; padding: 20px; }
.test1 {height: 200px; background-color: blue; }
.test2 {height: 2000px; background-color: green; }
.test3 {height: 900px; background-color: purple; }
.test4 {height: 300px; background-color: yellow; }
.test5 {height: 400px; background-color: purple; border-top: 3px solid white;}
.container {width: 960px; margin: 0 auto}
</style>
<link rel="stylesheet" href="css/scrolltab.css" type="text/css"/>
</head>
<body>
<div class="container">
<div id="header">
<h1>Scrolltab Demo</h1>
</div>
<div id="options">
<a href="#" id="box-add">Add Box</a><br/>
<a href="#" id="box-showall">Show All</a><br/>
<p>Click on a box to hide it.</p>
</div>
<div class="scrolltab test1"></div>
<div class="scrolltab test2"></div>
<div class="scrolltab test3"></div>
<div class="scrolltab test4"></div>
</div>
</body>
</html>