// Returns width of viewable area in the browser
function ViewPortWidth()
{
var width = 0;
if ((document.documentElement) &&
(document.documentElement.clientWidth))
{
width = document.documentElement.clientWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
width = document.body.clientWidth;
}
else if (window.innerWidth)
{
width = window.innerWidth;
}
return width;
}
// Returns height of viewable area in the browser
function ViewPortHeight()
{
var height = 0;
if (window.innerHeight)
{
height = window.innerHeight;
}
else if ((document.documentElement) &&
(document.documentElement.clientHeight))
{
height = document.documentElement.clientHeight;
}
return height;
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" />
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<span
title="Show/Hide Header"
></span>
<div
>This is the header area.
<br /><i>Please customize this area as you set
fit; i.e. add a logo, menu options, links,
etc.</i><br /><br /></div>
</td>
</tr>
<tr>
<td colspan="2"
valign="top">
<div>
<ul
runat="server" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
这些代码标记非常的繁琐，我用了很多内部的注释来解释他们。请注意出现在标头区的左上角的箭头按钮，其实就是来自我选择的JQuery的主题中的图像文件，使用ui-icon 和ui-icon-circle-triangle-n causes 设置collapseArrow span ，造成JQuery 显示一个名字为ui-icon-circle-triangle-n的ico的图像。在文档头部的脚本区中，我创建一个函数，当我们单击它的时候，改变向上箭头图标为向下箭头图标，此外，同样的单击事件处理程序将显示或隐藏标头部域的div（menuDiv）。
Home Site 页面的隐藏代码如下：
代码
复制代码 代码如下: