<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mb.extruder</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
margin:10px;
}
.wrapper{
position:relative;
font-family:Arial, Helvetica, sans-serif;
padding-top:90px;
padding-left:50px;
width:80%;
margin:auto
}
.wrapper .text{
font-family:Arial, Helvetica, sans-serif;
padding-top:50px;
}
.wrapper h1{
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
}
.longText{
margin-top:20px;
width:600px;
font:18px/24px Arial, Helvetica, sans-serif;
color:gray;
}
span.btn{
padding:10px;
display:inline-block;
cursor:pointer;
font:12px/14px Arial, Helvetica, sans-serif;
color:#aaa;
background-color:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:#999 2px 0px 3px;
-webkit-box-shadow:#999 2px 0px 3px;
}
span.btn:hover{
background-color:#000;
}
/*
custom style for extruder
*/
.extruder.left.a .flap{
font-size:18px;
color:white;
top:0;
padding:10px 0 10px 10px;
background:#772B14;
width:30px;
position:absolute;
right:0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-box-shadow:#666 2px 0px 3px;
-webkit-box-shadow:#666 2px 0px 3px;
}
.extruder.left.a .content{
border-right:3px solid #772B14;
}
</style>
<link href="css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mbContainer.css" title="style" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript" src="inc/jquery.hoverIntent.min.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="inc/mbExtruder.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/mbContainer.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script>
<script type="text/javascript">
$(function(){
$(".containerPlus").buildContainers({
containment:"document",
elementsPath:"elements/",
onClose:function(o){},
onIconize:function(o){},
effectDuration:200
});
});
</script>
</head>
<body >
<div class="wrapper">
<div id="extruderLeft" class="{title:'Our network ', url:'parts/extruderLeft.html'}">
</div>
<div id="demoContainer" class="containerPlus draggable resizable {buttons:'c',closed:'false',skin:'default', width:'500',title:'Dock' }" style="top:300px; left:30%">
<b>this container is always on top!</b>
<p>by setting the metatag: alwaysOnTop:true, this container stay over the others.</p>
<b>You can choose where the iconized containers are stored!</b>
<p>this is an example, but you can define whatever DOM element you want as your dock; and each iconizable container can have its one or none (in that case it's iconized at left:0 of its parent)!</p>
<b>preminimize a container</b>
</p>
</div>
</div>
</body>
</html>
mb.containerPlus doesn't work..............Please Help
asked
Oct 03 '10 at 04:36
knight1989
28●3
if i put .containerPlus function higher than .extruder function that hold page will doesn't work.......i think containerPlus have a problem.....