`

页面模板化

阅读更多
这个是下载合肥论坛自定义空间的模板,仅供学习使用,欢迎大家讨论和指教!
  • module.rar (130 KB)
  • 描述: 这个下载合肥论坛自定义空间的模板,仅供学习使用,
  • 下载次数: 20
分享到:
评论
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>

相关推荐

    响应式的单页面网站模板

    响应式单页面网站模板的优势在于: 1. **跨设备兼容性**:由于模板的设计考虑了不同设备的显示需求,无论是桌面电脑、平板还是手机,用户都能获得良好的浏览体验。这在移动互联网日益普及的今天显得尤为重要。 2. ...

    aspx页面网站模板

    通过理解以上要点,你可以更好地利用"aspx页面网站模板"来创建出专业且个性化的网站。记住,尽管模板可以提供快速的起点,但最终的网站应当符合你的独特需求和品牌形象。在定制过程中,不断学习和优化,才能真正发挥...

    2016专题页面网站模板下载是一款Happy new year新年快乐专题页模板下载。.rar

    标题中的“2016专题页面网站模板下载”指的是一个专为2016年设计的网页模板,这种模板通常包含一系列与特定主题——在这个案例中是“Happy new year”或“新年快乐”——相关的页面元素和设计。这类模板是为了方便...

    html5黑色404页面模板

    HTML5黑色404页面模板是为网页设计者...总的来说,HTML5黑色404页面模板是一个实用的工具,它结合了现代网页设计的趋势和功能,帮助开发者快速创建出既美观又实用的404错误页面,从而提升网站的整体质量和用户满意度。

    紫色简洁时尚网站模板是一款简洁清爽的适合专题页面网站模板下载。.zip源码资源下载

    紫色简洁时尚网站模板是一款简洁清爽的适合专题页面网站模板下载。.zip源码资源下载紫色简洁时尚网站模板是一款简洁清爽的适合专题页面网站模板下载。.zip源码资源下载 1.学生做毕业设计用 2.程序员学习研究用 3.小...

    (自适应手机端)网址发布页面网站模板.zip

    (自适应手机端)网址发布页面网站模板.zip

    PHP网站模板,网站源码,带PHP后台:涂漆色彩专题页面模板是一款CSS模板,适合做专题页面网站模板.zip

    总的来说,涂漆色彩专题页面模板提供了一套完整的解决方案,涵盖了前端设计和后端功能,适用于那些希望快速构建个性化专题网站的开发者。通过合理运用这款模板,可以创建出既美观又实用的PHP网站,提升用户的在线...

    火锅店网站模板页面html模板

    【标题】:“火锅店网站模板页面html模板” ...总之,这个“火锅店网站模板页面html模板”是为快速构建符合餐饮业特点的网站而准备的工具,通过合理利用和个性化调整,可以打造出吸引顾客、提升品牌形象的线上平台。

    前台页面模板.zip

    如果你在同一个资源库中找到了后台页面模板,它们可以一起使用,构建出前后台一体化的网站平台。 【标签】"网站配套页面"进一步确认了这个模板是一个整体解决方案的一部分,适用于那些寻求完整网站构建方案的用户。...

    Javascript 页面模板化很多人没有使用过的方法

    ###Javascript页面模板化概念 页面模板化是一种Web开发中的技术,它允许开发者通过在HTML中嵌入模板标签来控制页面结构,并在JavaScript中使用这些模板来动态生成HTML内容。模板化的主要目的是将数据处理与页面布局...

    java-前端页面模板

    Java 前端页面模板是为开发者提供的一种基础架构,旨在简化前端开发流程,尤其适合初学者或希望快速搭建项目原型的团队。该模板没有采用复杂的前端框架,如React、Vue或Angular,而是以更轻量级的方式构建,使得理解...

    页面模板页面模板

    在描述中反复提及“页面模板”,这强调了其在构建网站时的重复利用性和标准化的重要性。页面模板允许开发者将固定元素,如页眉、页脚、导航栏等,编写成一个模板文件,然后在多个页面中引用,减少了重复编码的工作量...

    vue20多页面应用模板

    vue2.0 多页面应用模板

    公司简约静态页面模板

    在公司简约静态页面模板中,HTML文件通常包含头部信息、导航栏、主体内容、页脚等部分,通过合理地使用标签来组织内容,确保页面结构的语义化,利于搜索引擎优化(SEO)。 CSS则负责网页的视觉呈现,包括颜色、字体...

    404页面模板

    404页面模板设计的目的是为了提供一种友好的用户体验,帮助用户理解他们所寻找的页面无法找到,并提供可能的解决方案或者导航回到网站的其他部分。朋友分享的这个压缩包包含了62个不同的404页面模板,这为我们提供了...

    网站前端页面模板(15套包括pc端、移动端)

    网站前端页面模板是构建网页的重要组成部分,它们提供了一种便捷的方式,使开发者能够快速搭建具有专业外观和功能的网站。本资源包含15套不同类型的前端页面模板,涵盖了PC端和移动端,旨在供学习和参考。 首先,让...

    页面模板

    在IT行业中,页面模板是一种非常重要的设计和开发工具,它为网页设计师和前端开发者提供了快速构建网站布局的基础框架。页面模板通常包含HTML、CSS、JavaScript等元素,有时也会包括图片和其他资源,使得开发者能够...

Global site tag (gtag.js) - Google Analytics