`

页面模板化

FirefoxHTML 
阅读更多
这个是下载合肥论坛自定义空间的模板，仅供学习使用，欢迎大家讨论和指教！
  • module.rar (130 KB)
  • 描述: 这个下载合肥论坛自定义空间的模板，仅供学习使用，
  • 下载次数: 20
分享到：
| db2基础
评论
1 楼 beyondsanli 2008-04-30  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">

td{
text-align:center;
word-break:break-all;
overflow:hidden
}

th{
-moz-user-select: none;
height:10px;
}

.resizeDivClass{
PADDING-RIGHT: 0px;
MARGIN-RIGHT: 0px;
background:red;
float:right;
cursor:e-resize;
HEIGHT: 100%;
width:5px;
}
</style>

<script language="javascript" type="text/javascript">

var dragobj=null; //obj1 is used to store the selected span

function isIE(){
if(window.navigator.userAgent.indexOf('MSIE')>=1)
return true;
}

function isFirefox(){
if(window.navigator.userAgent.indexOf('Firefox')>=1)
return true;
}

//handle onmousedown event
function MouseDownToResize(event,obj){
obj.focus();
document.body.style.cursor = "e-resize";
obj.parentTdW=obj.parentNode.offsetWidth;
var sibling = obj.parentNode.nextSibling;
obj.siblingW = sibling.offsetWidth;
obj.totalWidth = obj.siblingW + obj.parentTdW;
if(obj.parentElement)
obj.mouseDownX=event.clientX;
else
obj.mouseDownX=event.pageX;
dragobj=obj;

}

//handle onmousemove events
function MouseMoveToResize(event)
{
var e = event||window.event;
if(dragobj==null)
return false;

if(!dragobj.mouseDownX)
return false;

newWidth=dragobj.parentTdW+e.clientX-dragobj.mouseDownX;
var sibling = dragobj.parentNode.nextSibling;
//if width of column does not exceed minimum width 80, set column width
if(newWidth>80 && (dragobj.totalWidth-newWidth)>80)
{
dragobj.parentNode.style.width = dragobj.parentTdW+e.clientX-dragobj.mouseDownX;
sibling.style.width = dragobj.siblingW-e.clientX+dragobj.mouseDownX;
}

//alert(newWidth);

}
function setWidth(){
document.getElementById("width1").value = document.getElementById("td1").style.width;
document.getElementById("width2").value = document.getElementById("td2").style.width;
document.getElementById("width3").value = document.getElementById("td3").style.width;
}

function MouseUpToResize(event)
{
if(dragobj==null)
return false;

dragobj.mouseDownX=0;
document.body.style.cursor = "";
dragobj=null;

}

//page initialization
function pageInit(){
document.onmousemove = MouseMoveToResize;
document.onmouseup = MouseUpToResize;
document.body.ondrag = function () {return false;};
document.body.onselectstart = function () { return false; };
}
</script>
</head>

<body onload="pageInit();">

<div style="width:1100" >
<table style="table-layout:fixed">
<thead>
<tr>
<th valign="top" width="<%= @width1 %>" id="td1">
<span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);"
onmouseup="MouseUpToResize(event);"></span>

</th>
<th valign="top" width="<%= @width2 %>" id="td2">
<span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);"
onmouseup="MouseUpToResize(event,this);" onmouseout="setWidth()"></span>

</th>
<th valign="top" id="td3" width="<%= @width3 %>">
<span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);"
onmouseup="MouseUpToResize(event,this);" onmouseout="setWidth()"></span>
</th>
<th valign="top" id="td4" width="<%= @width3 %>">
<span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);"
onmouseup="MouseUpToResize(event,this);" onmouseout="setWidth()"></span>
</th>
</tr>
</thead>
<tbody id="body">
<tr>
<td>Jane</td>
<td>5555</td>
<td>right here</td>
<td>right here</td>
</tr>
</tbody>
</table>
<input type="text" id="width1"><input type="text" id="width2"><input type="text" id="width3">
<input type="text" id="width4">
<body>
</html>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics