custom UI element solution using .sortable or .position
Hi Guys,
I want to code a 3x segment full screen UI for ipad through HTML. The premise is a main toolbar, a sub toolbar and content panel. Of course the main toolbar actions will change the subs content, and the subs actions whill change the content panel.
I have played around with .sortable for a solution and achieved something fairly rough and clunky. Would I be better to do this using .position collision? I'm sure there's a much nicer solution than what I have built and I'm looking for any pointers for a better outcome.
I've inc. the code below;
- <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortableMain { margin: -8px; padding: 0; width: 1024px; height: 768px; }
#sortableSub { margin: 0; padding: 0; width: 1024px; height: 668px; }
#mainToolbar { float: left; width: 1024px; height: 100px; background-color:#CC0033; }
#subToolbar { float: left; width: 200px; height: 668px; background-color: #093; }
#content { float: left; width: 824px; height: 668px; background-color: #36C; }
</style>
<script>
$(function() {
$( "#sortableMain" ).sortable({ axis: "y", placeholder: "ui-state-highlight"});
$( "#sortableMain" ).disableSelection();
$( "#sortableSub" ).sortable({ axis: "x", placeholder: "ui-state-highlight" });
$( "#sortableSub" ).disableSelection();
});
</script>
</head>
<body>
<div id="sortableMain">
<div id="mainToolbar">1</div>
<div id="sortableSub">
<div id="subToolbar">2</div>
<div id="content">3</div>
</div>
</div>
</body>
</html>