Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
246 lines (200 sloc) 8.22 KB
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Mootools MochaUI - Fixed Width with Taskbar</title>
<link rel="stylesheet" type="text/css" href="../Source/Themes/default/css/core.css"/>
<link rel="stylesheet" type="text/css" href="../Source/Themes/default/css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="../Source/Themes/default/css/taskbar.css"/>
<link rel="stylesheet" type="text/css" href="../Source/Themes/default/css/window.css"/>
<style type="text/css">
#desktop {
visibility: visible;
}
.mui-desktopTitlebarWrapper {
border: 0;
}
.mui-desktopTitlebar {
padding: 7px 8px 6px 8px;
height: 23px;
background-image: none;
}
.mui-desktopTitlebar h1.applicationTitle {
display: inline;
margin: 0;
padding: 0 5px 0 0;
font-size: 20px;
line-height: 25px;
font-weight: bold;
color: #fff;
}
#desktopContent {
overflow: auto;
background: #7c9dbf;
border: 0;
}
#page {
margin: 0 auto 0;
width: 800px;
background: #fff;
}
#content {
padding: 20px;
}
#footer {
background: #f0f0f0;
padding: 10px 20px;
}
#desktopTaskbarWrapper {
border-top: 1px solid #222;
border-bottom: 0;
}
#desktopTaskbarWrapper.top {
border-top: 0;
border-bottom: 1px solid #222;
}
#about_contentWrapper {
background-color: #E5E5E5;
}
}
</style>
<!--[if IE]>
<script type="text/javascript" src="scripts/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/mootools-1.3.2-core-nocompat-yc.js"></script>
<script type="text/javascript" src="scripts/mootools-1.3.2-more-yc.js"></script>
<!--MOCHAUI-->
<script type="text/javascript" src="../Source/Core/core.js"></script>
<script type="text/javascript" src="../Source/Core/create.js"></script>
<script type="text/javascript" src="../Source/Core/require.js"></script>
<script type="text/javascript" src="../Source/Core/canvas.js"></script>
<script type="text/javascript" src="../Source/Core/content.js"></script>
<!--MOCHAUI-->
<script type="text/javascript">
var Demo = {};
Demo.aboutWindow = function(){
MUI.create({
control:"MUI.Modal",
id: 'about',
title: 'MochaUI',
type: 'modal2',
width: 350,
height: 195,
contentBgColor: '#e5e5e5 url(images/logo2.gif) left 3px no-repeat',
padding: { top: 43, right: 12, bottom: 10, left: 12 },
scrollbars: false,
content: {
loadMethod: 'xhr',
url: 'pages/about.html'
}
});
};
window.addEvent('domready', function(){
MUI.files.extend({
'{theme}css/window.css':'loaded',
'{theme}css/desktop.css':'loaded'
});
MUI.load(["MUI.Desktop","MUI.Window"], function(){
MUI.create({
'control':'MUI.Desktop',
'id':'desktop',
'fromHTML':true,
'onDrawEnd':function(){
$('aboutLink').addEvent('click', function(e){
e.stop();
Demo.aboutWindow();
});
}
});
});
});
</script>
</head>
<body>
<div id="desktop">
<div id="desktopHeader" class="mui-desktopHeader">
<div class="mui-desktopTitlebarWrapper">
<div class="mui-desktopTitlebar">
<h1 class="applicationTitle">My Site</h1>
<div class="topNav">
<ul class="menu-right">
<li>Welcome <a href="#" onclick="MUI.notification('Do Something');return false;">Demo User</a>.
</li>
<li><a href="#" onclick="MUI.notification('Do Something');return false;">Sign Out</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="desktopTaskbarWrapper">
</div>
<div id="desktopContent">
<div id="page">
<!-- PAGE CONTENT BEGINS HERE -->
<div id="content">
<h3>My Page Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p><a id="aboutLink" href="pages/about.html">Modal Test</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
</div>
<!-- content end -->
<div id="footer">
Footer text
</div>
<!-- PAGE CONTENT ENDS HERE -->
</div>
<!-- page end -->
</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.