mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
97 lines
6.0 KiB
HTML
97 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Language" content="en" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>jQuery UI: SplitPane</title>
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
|
|
|
<!-- jQuery UI -->
|
|
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
|
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
|
|
|
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
<style type="text/css">
|
|
@import "css/demo.css";
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<span class="ui-toolbar-item-hide-icon"></span> <span>jQuery UI Resizable SplitPanel</span>
|
|
</div>
|
|
<table id="container" cellpadding="0" cellspacing="0" border="0">
|
|
|
|
<tr>
|
|
|
|
<td class="ui-split-side-box">
|
|
<div class="ui-split-side">
|
|
<ul id="component-links">
|
|
<li><a href="#ui.accordion" title="Goto Accordion's Component Page">Accordion</a></li>
|
|
<li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li>
|
|
<li><a href="#ui.draggable" title="Goto Draggable's Component Page">Draggable</a></li>
|
|
<li><a href="#ui.droppable" title="Goto Droppable's Component Page">Droppable</a></li>
|
|
<li><a href="#ui.resizable" title="Goto Resizable's Component Page">Resizable</a></li>
|
|
<li><a href="#ui.selectable" title="Goto Selectable's Component Page">Selectable</a></li>
|
|
<li><a href="#ui.sortable" title="Goto Sortable's Component Page">Sortable</a></li>
|
|
<li><a href="#ui.tabs" title="Goto Tabs Component Page">Tabs</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
|
|
|
|
<td class="ui-split-main-box">
|
|
<div class="ui-split-main1">
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pellentesque tempus velit vitae odio. Maecenas enim arcu, volutpat ac, viverra id, bibendum eu, felis. Vestibulum imperdiet arcu. Ut nisi. Cras vel lectus consectetuer mauris luctus ultrices. Duis fringilla pellentesque sapien.
|
|
<br><br>
|
|
Cras tristique justo vel metus. Pellentesque dolor libero, ullamcorper ac, vehicula eget, porttitor at, dui. Ut a nibh. Nunc sit amet turpis. Aenean diam dui, consequat vel, scelerisque id, accumsan a, lectus. Duis ultrices, enim vitae pharetra tincidunt, elit nunc sollicitudin felis, dapibus pellentesque urna velit ut quam. Donec scelerisque vehicula dolor. Suspendisse lectus dui, posuere sit amet, sagittis nec, vulputate in, libero. Morbi tempus sagittis est. Phasellus in nisi. Sed a ligula. Vivamus condimentum quam non nibh. Fusce pellentesque, neque ac scelerisque luctus, leo elit bibendum elit, in rutrum leo erat tristique felis. Etiam consequat fringilla eros. Nullam neque. Aenean mollis, odio at consectetuer sollicitudin, tortor lorem facilisis nunc, sit amet condimentum lectus libero convallis dolor. Vivamus quis risus.
|
|
|
|
</div>
|
|
</td>
|
|
|
|
<td class="ui-split-main-box">
|
|
<div class="ui-split-main2">
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pellentesque tempus velit vitae odio. Maecenas enim arcu, volutpat ac, viverra id, bibendum eu, felis. Vestibulum imperdiet arcu. Ut nisi. Cras vel lectus consectetuer mauris luctus ultrices. Duis fringilla pellentesque sapien.
|
|
<br><br>
|
|
Cras tristique justo vel metus. Pellentesque dolor libero, ullamcorper ac, vehicula eget, porttitor at, dui. Ut a nibh. Nunc sit amet turpis. Aenean diam dui, consequat vel, scelerisque id, accumsan a, lectus. Duis ultrices, enim vitae pharetra tincidunt, elit nunc sollicitudin felis, dapibus pellentesque urna velit ut quam. Donec scelerisque vehicula dolor. Suspendisse lectus dui, posuere sit amet, sagittis nec, vulputate in, libero. Morbi tempus sagittis est. Phasellus in nisi. Sed a ligula. Vivamus condimentum quam non nibh. Fusce pellentesque, neque ac scelerisque luctus, leo elit bibendum elit, in rutrum leo erat tristique felis. Etiam consequat fringilla eros. Nullam neque. Aenean mollis, odio at consectetuer sollicitudin, tortor lorem facilisis nunc, sit amet condimentum lectus libero convallis dolor. Vivamus quis risus.
|
|
</div>
|
|
</td>
|
|
|
|
<td class="ui-split-main-box">
|
|
<div class="ui-split-main3">
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum commodo mollis tortor. Ut dapibus turpis consequat quam. Nulla lacinia. Donec nunc. Donec sollicitudin. Vivamus orci. Pellentesque tempus velit vitae odio. Maecenas enim arcu, volutpat ac, viverra id, bibendum eu, felis. Vestibulum imperdiet arcu. Ut nisi. Cras vel lectus consectetuer mauris luctus ultrices. Duis fringilla pellentesque sapien.
|
|
<br><br>
|
|
Cras tristique justo vel metus. Pellentesque dolor libero, ullamcorper ac, vehicula eget, porttitor at, dui. Ut a nibh. Nunc sit amet turpis. Aenean diam dui, consequat vel, scelerisque id, accumsan a, lectus. Duis ultrices, enim vitae pharetra tincidunt, elit nunc sollicitudin felis, dapibus pellentesque urna velit ut quam. Donec scelerisque vehicula dolor. Suspendisse lectus dui, posuere sit amet, sagittis nec, vulputate in, libero. Morbi tempus sagittis est. Phasellus in nisi. Sed a ligula. Vivamus condimentum quam non nibh. Fusce pellentesque, neque ac scelerisque luctus, leo elit bibendum elit, in rutrum leo erat tristique felis. Etiam consequat fringilla eros. Nullam neque. Aenean mollis, odio at consectetuer sollicitudin, tortor lorem facilisis nunc, sit amet condimentum lectus libero convallis dolor. Vivamus quis risus.
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
$('div.ui-split-main1, div.ui-split-main2').resizable({
|
|
handles: 'e',
|
|
minWidth: 200,
|
|
maxWidth: 800
|
|
});
|
|
|
|
$('div.ui-split-side').resizable({
|
|
handles: 'e',
|
|
proxy: 'proxy',
|
|
minWidth: 200,
|
|
maxWidth: 300
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|