nicht angemeldet
Hallo!
Ich habe auf meiner Seite 2 "Spalten" in welchen sich ein paar "Boxen" befinden.
Diese Boxen kann ich mit Hilfe der o.g. Plugins von einer in die andere Spalte, von oben nach unten und von unten nach oben schieben.
Außerdem kann ich sie togglen - sprich: wenn ich auf den toggle Link in meinem Boxhead klicke verschwindet der Content der Box oder erscheint wieder.
Das funktioniert auch soweit.
Nun will ich die Position/den Zustand jedoch in einem Cookie speichern, damit ich, wenn ich wieder auf die Seite komme bzw nach einem reload der Seite, die Boxen in genau der selben Position/dem selben Zustand vorfinde.
Wie stelle ich das nun am besten an?
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sortable Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<style>
body{
font-size:12px;
font-family:helvetica,verdana,arial,sans-serif;
}
h3{
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
font-size:12px;
font-weight:bold;
}
#box-left{
width:300px;
float:left;
}
#box-right{
width:300px;
float:left;
}
.box-border{
border:1px solid #333;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}
.container-header{
background:#efefef;
cursor:move;
}
.container-header span{
cursor:pointer;
float:right;
margin-top:-20px;
margin-right:5px;
text-decoration:underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".sortable-column").sortable({
connectWith: '.sortable-column'
});
});
function toggleContent(container_id){
$('#' + container_id + ' .container-content').toggle();
}
</script>
</head>
<body>
<div id="box-left" class="sortable-column">
<div id="container1" class="box-border">
<div class="container-header">
<h3>Box Nummer 1</h3>
<span onclick="toggleContent('container1')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container2" class="box-border">
<div class="container-header">
<h3>Box Nummer 2</h3>
<span onclick="toggleContent('container2')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container3" class="box-border">
<div class="container-header">
<h3>Box Nummer 3</h3>
<span onclick="toggleContent('container3')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container4" class="box-border">
<div class="container-header">
<h3>Box Nummer 4</h3>
<span onclick="toggleContent('container4')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
<div id="box-right" class="sortable-column">
<div id="container5" class="box-border">
<div class="container-header">
<h3>Box Nummer 5</h3>
<span onclick="toggleContent('container5')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container6" class="box-border">
<div class="container-header">
<h3>Box Nummer 6</h3>
<span onclick="toggleContent('container6')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container7" class="box-border">
<div class="container-header">
<h3>Box Nummer 7</h3>
<span onclick="toggleContent('container7')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container8" class="box-border">
<div class="container-header">
<h3>Box Nummer 8</h3>
<span onclick="toggleContent('container8')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container9" class="box-border">
<div class="container-header">
<h3>Box Nummer 9</h3>
<span onclick="toggleContent('container9')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
</body>
</html>
Und hier in live: Live demo
Danke schon jetzt!