Bug Tracker

Ticket #1319: jquery_test.html

File jquery_test.html, 3.5 KB (added by davidserduke, 14 years ago)

test case (slightly modified so can download)

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
2<html>
3<head>
4<meta http-equiv="Content-Language" content="en" />
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<title>jQuery Vertical splitter</title>
7<script type="text/javascript" src="jquery.js"></script>
8<script type="text/javascript" src="http://methvin.com/jquery/splitter/splitter.js"></script>
9
10<!-- General page styles (not critical to the demos) -->
11<link rel="stylesheet" type="text/css" href="http://methvin.com/jquery/splitter/main.css" />
12
13<style type="text/css" media="all">
14
15body {
16        padding: 10px;
17}
18
19/*
20 * Splitter container. Set this to the desired width and height
21 * of the combined left and right panes. In this example, the
22 * height is fixed and the width is the full width of the body,
23 * less the margin on the splitter itself.
24 */
25#MySplitter {
26        height: 400px;
27        margin: 1em 3em;
28        border: 4px solid #aca;
29        /* No padding allowed */
30}
31/*
32 * Left-side element of the splitter. Use pixel units for the
33 * min-width and max-width; the splitter plugin parses them to
34 * determine the splitter movement limits. Set the width to
35 * the desired initial width of the element; the plugin changes
36 * the width of this element dynamically.
37 */
38#LeftPane {
39        background: #e9e;
40        padding: 4px;
41        overflow: auto;
42        width: 150px;           /* optional, initial splitbar position */
43        min-width: 50px;        /* optional */
44        /* No margin or border allowed */
45}
46/*
47 * Right-side element of the splitter.
48 */
49#RightPane {
50        background: #88fff8;
51        padding: 4px;
52        min-width: 100px;
53        overflow: auto;
54        /* No margin or border allowed */
55}
56/*
57 * Splitter bar style; the .active class is added when the
58 * mouse is over the splitter or the splitter is focused
59 * via the keyboard taborder or an accessKey.
60 */
61#MySplitter .vsplitbar {
62        width: 6px;
63        background: #aca url(vgrabber.gif) no-repeat center;
64}
65#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover {
66        background: #e88 url(vgrabber.gif) no-repeat center;
67}
68</style>
69<script type="text/javascript">
70//window.onload = (function() {
71$().ready(function() {
72        $("#MySplitter").splitter({
73                type: 'v',
74                initA: true,    // use width of A (#LeftPane) from styles
75                accessKey: '|'
76        });
77        // Firefox doesn't fire resize on page elements
78        $(window).bind("resize", function(){
79                $("#MySplitter").trigger("resize"); 
80        }).trigger("resize");
81});
82</script>
83</head>
84<body>
85
86<h1>jQuery Vertical Splitter</h1>
87<p>
88<a href="default.html">See the splitter documentation</a>
89</p>
90<div id="MySplitter">
91
92        <div id="LeftPane">
93                <p>This is the left side of the vertical splitter. Typically you might use this side for a navigational display of some data that is related to the right side.</p>
94                <p>Using CSS styles you can control the look of the splitter, such as its color, width, and appearance when selected. Or, you can specify most options when you call the plugin to create the splitter.</p>
95        </div>
96       
97        <div id="RightPane">
98                <p>This is the right side of the vertical splitter. Usually this side will be wider than the left side, but that's up to you. The left pane of this demo was set to be 150 pixels wide in the stylesheet, which is why it's smaller than the right side. If you don't specify a width for either panes when the splitter is created, the two panes will be equal width.</p>
99                <p>To move the splitbar using the keyboard, press Alt-Shift-I (Mac users, Cmd-Shift-I), then press the arrow keys. To unfocus the splitbar, press Tab.</p>
100        </div>
101
102</div>
103
104</body>
105</html>