在实际开发中,我们遇到一种情况,需要将表格的底部放一个分页的标签,这样使得布局如下
实际表格主体包含两部分内容,数据和分页信息,分页信息最好总是停靠在表格主体的底部,我们以前使用的是表格的Valign实现,但是存在不少的问题,现在我们使用CSS+Expression实现以下功能
1、表格主体的位置可以在水平和垂直的任何位置
2、表格主体的高度自动扩展到页面的底部
3、分页信息停靠在表格主体的底部
现在的缺陷
1、页的margin、padding属性会导致定位不正确
2、需要自处理表格行数,免得将分页信息覆盖
3、页面如果包含在主体以后的东西需要自己计算啦
闲话少说,帖代码
<script>
if(null==window.$)
{
window.$=function()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++)
{
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
}
function controlOffsetLeft(itemName)
{
var item=$(itemName);
var totalOffset = 0;
do
{
try
{
totalOffset += item.offsetLeft;
item = item.offsetParent;
}
catch(ee)
{
}
}
while (item != null);
return totalOffset;
}
function controlOffsetTop(itemName)
{
var item=$(itemName);
var totalOffset = 0;
do
{
try
{
totalOffset += item.offsetTop;
item = item.offsetParent;
}
catch(ee)
{
}
} while (item != null);
return totalOffset;
}
function scrollTop()
{
return window.document.body.scrollTop || window.document.documentElement.scrollTop;
}
function scrollLeft()
{
return window.document.body.scrollLeft || window.document.documentElement.scrollLeft;
}
function windowWidth()
{
var de = document.documentElement;
return window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
}
function windowHeight()
{
var de = document.documentElement;
return window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
}
</script>
<style>
#Content
{
position:relative;
height:expression(windowHeight()-controlOffsetTop(this)-16/*设置Margin的值,默认的情况下Body的Margin为上下为8px*/);
border:solid 1px blue;
clear:right;
}
#PageInfo
{
position:absolute;
border:solid 2px menu;
width:100%;
bottom:0;
left:0;
background-color:ghostwhite;
text-align:right;
}
</style>
AA<br/>
BB<br/>
CC<br/>
CC<br/>
CC<br/>
CC<br/>
CC<br/>
CC<br/>
<div>
<div style="width:100px;float:left;background-color:#FFFFCC;">
传统的东东,这里的高度是自适应的高度,呵呵,如果需要实现底部对齐,有些费劲
</div>
<div id="content">
<table style="width:100%" border="1">
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>
要注意这里表格的行数啊,否则一不小心就会覆盖下面的分页显示的东西,慎重啊慎重
<div id="PageInfo">
分页显示<br/>
后面的东东
</div>
</div>
<em>这行你肯定需要滚屏才看得到!!!这行导致出现滚动条!</em>
</div>
我的BLOG搬家到
自己的站点了
站点链接
RSS
posted @ 2007-11-14 19:21 Jeason 阅读(2362) 评论(5)
编辑
我的BLOG搬家到
自己的站点了
站点链接
RSS
先帖样子

使用层或者其他技术所实现的JS菜单不能解决的问题就是这些菜单不能跨帧,也就是说在Frame之间的时候无可奈何,所幸的是IE5+提供了createPopup这个函数,可以提供窗口的创建,使用createPopup需要注意以下几个问题:
1、函数没有任何参数
2、CreatePopup函数返回的值是新窗口的句柄,这个窗口和普通的窗口一样,所有该有的东西都有。
3、新窗口的parent属性可以对父级窗口(调用createPopup函数的窗口进行访问)
4、一个窗口只能创建一个popup窗口,新调用createPopup将会吧以前的窗口关闭。
5、新窗口的内容初始的时候是空的,没有任何内容,使用document.write和document.body.innerHTML设置值
6、窗口显示的时候调用popwindow.show函数,调用契约为 show(left,top, width, height, document.body);最后一个参数指明位置属性相对的对象
7、窗口隐藏直接调用hide函数。
8、在父级窗口中点击鼠标将会自动将popwindow隐藏。
9、销毁父亲窗口不一定销毁其创建的popwindow,前提是保存窗口句柄的对象是否被销毁。
10、使用alt-tab转换窗口的时候,有时这些新窗口会悬浮在桌面顶层,不会随IE窗口转到后台而隐藏(IE6、IE7都是)
11、新窗口的对象不能使用父窗口的CSS风格,需要手工复写
12、新窗口中的链接(Anchors)需要注意点击之后链接显示的窗口是当前的窗口,一般无效。
13、新窗口中的JavaScript出现错误的时候并不会在当前的IE状态栏中提示!
14、新窗口的CSS风格不支持expression,晕!
15、显示窗口的时候(调用show函数)必须指定窗口的位置和大小,尤其是大小,新窗口可不能自动进行缩放!
实现跨帧菜单首先确定显示方式,每一级的菜单都是显示在一个Popwindow中,如前所述,在一个窗口中只能有一个popwindow,如图显示二级菜单就无法显示了,如何解决这个问题呢?
刚才我们提到,popwindow对象本身就是一个完整的窗口对象,要解决这个问题的最直接的办法就是,下级菜单的生成有父亲菜单所在的窗口(不管是主窗口还是popwindow)调用createPopup生成,这样,各级菜单都可以拥有自己的popwindow,而且可以自动的在同级菜单中进行切换,具体的脚本如下
var ele=control==null?event.srcElement:$(control);
/*...*/
var popw=ele.document.parentWindow.window.createPopup();
/*...*/
层次结构可以构造菜单的基本样式,刚才提到,popwindow不支持CSS风格,也就是说需要手工将CSS风格写到popwindow中,写CSS风格可以使用document.write方式或者直接构造styleSheet对象然后插入rule的方式(注意,直接使用document.body.innerHTML写的style标签好像没有生效),我采用前者,主要原因是,我在主窗口中配置菜单的显示风格,而后将这些显示css风格的文本信息直接保存下来,然后对每个新窗口进行写操作,这样就可以保持每级菜单的CSS风格完全一致。
读取主窗口CSS的代码如下
FrameMenuConfig.CssText="";
for(var n=0;FrameMenuConfig.CssPrefix!=null && FrameMenuConfig.CssPrefix.length>0 && n<document.styleSheets.length;n++)
{
var sts=document.styleSheets[n];
for(var x=0;x<sts.rules.length;x++)
{
var rr=sts.rules[x];
if(rr.selectorText.indexOf(FrameMenuConfig.CssPrefix)>=0)
{
FrameMenuConfig.CssText+=rr.selectorText+"{"+rr.style.cssText+"}";
}
}
}
这里使用的是匹配FrameMenuConfig.CssPrefix的CSS风格才写入到新的窗口中。
然后涉及到菜单的数据结构的定义,这个定义比较简单,就不扯了,用膝盖也能想出来。我这边处理的时候为了防止函数被重复定义,使用了简单的类静态函数的方式进行定义。
到现在为止,我们可以画出一层一层的菜单,在每层的菜单项上挂接onmouseover处理函数就可以自动弹出下级菜单,一切看起来已经完成了。
呵呵,好像还有点东西,菜单的链接有问题,如何解决在新窗口中的Anchor链接指向的页面在我们指定的框架中显示?首先还是要强调,每个popupwindow都是一个window对象,使用parent可以取得上级的对象,我的处理方法是在主窗口中定义了一个goto(url,target)的函数,这个函数负责在主窗口中将URL正确的进行跳转,带出来的问题是,怎么让popwindw正确的调用这个函数,第一层菜单使用parent.goto,第二层菜单使用parent.parent.goto,第三层使用.....
最后一个就是解决alt-tab的问题,这个问题说起来也简单,当alt-tab处理的时候隐藏IE窗口会触发document.onfocusout事件,在这个事件中对所有的popwindow 进行关闭即可,实际测试的时候,却发现如果不对IE窗口的内容进行点击操作(鼠标划过不算),不会使得document取得焦点,也就无法触发onfocusout事件,简单的做法是生成菜单之后调用一下document.focus()函数,这个函数可能会将焦点移动,所以不是很好,但是找不到解决的办法了
没啥藏着掖着的,源代码下载test.rar (7.97 kb)
以下是测试代码,包含鼠标悬停、自动创建和右键菜单,详细请参考压缩包中的东西
<style type="text/css">
#fm_MainContainer
{
width:100%;
height:20px;
border:solid menu 1px;
background-color:ghostwhite;
padding:3px;
font-size:10pt;
color:menu;
}
#fm_MainContainer a
{
padding-left:15px;
padding-right:15px;
border-left:solid 2px #104E8B;
border-right:solid 1px #104E8B;
text-decoration=none;
color:blue;
font-size:10pt;
font-weight:bold;
background-color:;
}
#fm_MainContainer a:hover
{
text-decoration=underline;
color:red;
background-color:yellow;
}
#fm_Container
{
background-color:#E8E8E8;
height:19px;
cursor:hand;
width:150;
padding-right:3px;
border-bottom:solid 1px menu;
border-left:solid 5px #B0C4DE;
}
#fm_Container a
{
padding-left:15px;
padding-right:15px;
font-size:10pt;
text-decoration=none;
color:blue;
font-weight:normal;
}
#fm_Container a:hover
{
text-decoration=underline;
color:red;
background: url(goto.png) no-repeat;
}
</style>
<script type="text/javascript" src="../framemenu.js"></script>
<script type="text/javascript">
//系统生成的菜单如果包含有下级菜单在菜单项的左边显示的图片
FrameMenuConfig.FolderImage="leftbtn.png";
//系统菜单生成的结构为<div ><a>...</a></div>,此处设置div的显示风格,a的显示风格请附带在div中设置
FrameMenuConfig.CssPrefix="#fm_Container";
//insert函数直接插入一格记录,格式为 父亲代码、节点代码、节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.
FrameMenu.insert(null,"a","滚动规划");
//add2函数插入一个菜单,返回这个菜单的父亲节点的实例,格式为 节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.节点的ID自动生成
FrameMenu.insert(null,"b","立项管理").add2("立项1").add2("立项2");
//add函数插入一个菜单,返回这个新的菜单的实例,格式为 节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.节点的ID自动生成
FrameMenu.insert(null,"c","工程实施").add("工程实施1").add("工程实施1_1");
FrameMenu.insert(null,"d","验收管理").add2("测试用例").add2("测试用例");
FrameMenu.insert(null,null,"系统菜单").add2("用户管理").add2("测试用例").add2("测试用例").add("角色权限").add2("角色授权").add2("用户授权").add2("资源授权");
FrameMenu.insert(null,null,"帮助系统").add2("关于本系统").add2("退出系统");
FrameMenu.insert("a","a1","本地文件","localfile.htm","body");
FrameMenu.insert("a","a12","新浪网(弹出窗口)","http://wwww.sina.com","_blank");
FrameMenu.insert("a","a13","多级菜单");
FrameMenu.insert("a13","a13_1","新浪网(本窗口)","http://www.sina.com","_self");
FrameMenu.insert("a13","a13_2","新浪网(本窗口)","http://www.sina.com");
FrameMenu.insert("a13","a13_3","新浪网(Body)","http://www.sina.com","body");
</script>
<body topmargin="0" leftmargin="0" oncontextmenu="FrameMenuConfig.showMenu();return false;">
这个是TopFrame,Name=TopFrame
<div id="fm_MainContainer">系统菜单是安排在这里滴,嘻嘻</div>
<br/><button onmouseover="FrameMenuConfig.showMenu()">鼠标悬停方式显示完整菜单</button>
<script defer>
FrameMenuConfig.createFrameMenu("fm_MainContainer",false);
</script>
</body>
posted @ 2007-11-14 09:41 Jeason 阅读(3572) 评论(6)
编辑
我的BLOG搬家到
自己的站点了
站点链接
RSS
在处理前面的文章中的级联菜单的时候,我发现了一个有意思的现象,使用CreateELement/InnerHTML/document.write的表现各自不一,自己测试了一下,呵呵,算得总结一下
1、CreateELement
createElement生成一个动态对象,这个对象创建之后是个无主对象,没有加到创建它的document中,需要使用appendChild或者insertBefore插入到document的DOM模型中才能生效。
createElement函数依附于Document对象,在使用Frame、IFrame或者popupWindow的时候一定需要注意,一个Document创建的对象是不能直接复制到另外的一个document中,所以创建对象的时候一定要站好队,不要加入了一个对象死活找不到,哈哈。
createElement可以使用两种用法,第一种最常用,直接输入一个标签的名称进行创建(大小写不敏感),例如document.createElement("A"),这种方式下创建的对象是一个空壳子,需要自己去填写属性。另外一种方法就是使用一段脚本创建,例如document.createElement("<a href='www.sina.com'>"),这种方式下,属性被带入到了对象中,需要注意的是,无论使用何种方式创建,document的createElement函数只创建单层对象,不会创建嵌套对象,例如脚本document.createElement("<div><a/></Div>")只会创建外层的DIV对象,不会创建A,同理,在DOM模型中文本作为一个特殊的节点存在,实例脚本document.createElement("<div>SSSS</div>")不会创建文本节点"SSS",也就是说节点创建完成之后还是一个光秃秃的DIV。
2、write
这个函数就有点意思了,先看看IE的官方说明:
You should not use the write or writeln methods on the current document after the document has finished loading unless you first call the open method, which clears the current document's window and erases all variables.
这个函数在初始化的时候(文档没有最终生成的时候)会将文本信息如实写入到当前HTML的位置;但是初始化完成之后调用这个函数的时候则会清除掉当前的所有文档信息,看看实例
<b>OutterText</b><br/>
<script>
document.write("document.write:before init");
</script>
<b>InnerText</b><br/>
这个时候三段文本都可以正常显示,没有什么问题,但是我们试试在defer中调用
<b>OutterText</b><br/>
<script>
document.write("document.write:before init");
</script>
<b>InnerText</b><br/>
<script defer>
document.write("document.write:After init");
</script>
此时则只显示After Init这段文本,如文档所述,使用open函数可以避免将HTML的内容完全替代,结果我尝试了很多次,都是不行反倒频繁刷新当前页面,此处就不测试了。
我关心的是document在写入CSS和javascript的时候的表现
先测试的是写Javascript,看看能否实时生效,使用下面的脚本报错,原因是javascript的解析机制存在问题
<b>OutterText</b><br/>
<script>
document.write("<script>alert('aaa')</script>");
</script>
<b>InnerText</b><br/>
只好重新改改道路了
<b>OutterText</b><br/>
<script>
document.write("<script>alert('aaa')</script>");
</script>
<b>InnerText</b><br/>
很遗憾,直接显示的是
<script>alert('aaa')</script>
也就是说,在document中write脚本是作为文本直接处理,那么CSS又如何?
<script>
document.write("<style>a{color:red;font-weight:bold;}</style>");
</script>
<a href='javascript:void(0)'>This is a Anchor!</a>
奇妙的事情发生了,这个时候CSS风格居然奏效了
我还想测试一下在popwindow中的行为是否和在普通的document中一致
<script>
function testFun()
{
var win=window.createPopup();
win.document.write("<script>function fx(){alert();}</script>");
win.document.write("<a href='' onclick='fx();return false'>this is a anchor</a>");
win.show(0,0,100,100);
}
</script>
<button onclick="testFun()">点偶试试</button>
果无二致!不能生成<script>到新的窗口中,同样CSS可以成功写入。
3、innerHTML
这个属性的作用不用明说了,还是测试能够写入javascript和CSS
<script>
function testFun()
{
var x=document.getElementById("DIX");
x.innerHTML="<style>a{color:red;font-weight:bold;}</style>"+
"<a href='' onclick='fx();return false'>this is a anchor</a>";
}
</script>
<div id="DIX">
</div>
<button onclick="testFun()">点偶试试</button>
有些遗憾,CSS没有生效,同样,javascript页没有生效
测试表明,CSS的写入必须使用write方式,或者直接构造DOM对象方式,而javascript动态加入只能使用eval或者动态构造DOM对象方式,都不是一件轻松的活啊
4、document.createElement("script")
C盘下的atest.js的内容很简单
alert("偶被成功的加载鸟");
function fx()
{
alert("处理点击事件");
}
测试脚本如下
<script>
function testFun()
{
var win=window.createPopup();
var x=win.document.createElement("script");
x.src="c:\\atest.js";
win.document.body.appendChild(x);
win.document.write("<button onclick='fx()'>this is a anchor</button>");
win.show(0,0,100,100);
}
</script>
<div id="DIX">
</div>
<button onclick="testFun()">点偶试试</button>
<button onclick='fx()'>this is a anchor</button>
上面一段代码运行之后点击"点偶试试",会加载atest到新的窗口中并弹出“偶被成功的加载鸟”消息,然后点击弹出窗口中的按钮则弹出“处理点击事件”,而实际上,“偶被成功的加载鸟”消息能够正常显示,而事件处理的消息没有显示,无论在主页面中点击还是弹出窗口中点击都无效,有些郁闷呢!
posted @ 2007-11-14 09:39 Jeason 阅读(2195) 评论(2)
编辑
我的BLOG搬家到
自己的站点了,呵呵,这里可能还是不定期的更新相关软件开发的东东。最近在开发一套JAVA的报表系统,可能更新的概率小了,呵呵
站点链接
RSS
posted @ 2007-11-14 09:37 Jeason 阅读(85) 评论(0)
编辑