For example, I want to implement a customized titlebar and shadow for
all html page, by hiding the system titlebar and shadow and resizer.
And do not affect exist page.
the following code is a way to do that, but need affect exist html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
html{
height: calc(100% - 41px);
width: calc(100%-10px);
margin: 36px 5px 5px 5px;
}
body{
height: 100%;
width: 100%;
margin:0px;
}
#content {
position: fixed;
top: 36px;
bottom: 5px;
left: 5px;
right: 5px;
border: none;
overflow: auto;
}
canvas{
height: 900px;
width: 576;
border: 1px solid black;
}
iframe.CustomTitlebar{
margin: -36px -5px -5px -5px;
position: fixed;
border: none;
height: 100%;
width: 100%;
z-index: -2147483648;
}
</style>
</head>
<body onload="draw();">
<iframe class='CustomTitlebar'
src="resource://app-bootstrap/titlebar.html"></iframe>
<div id="content">
<canvas id="tutorial" width="150" height="150"></canvas>
</div>
</body>
</html>
--
此致
礼
罗勇刚
Yours
sincerely,
Yonggang Luo
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
