您的位置：首页 > Web前端 > JavaScript

也发个JavaScript 拖拽布局的代码. 带编辑功能..

2008-04-23 12:09 316 查看
前段时间有个客户说要做个像bbc一样可以拖拽布局和编辑功能的网站。公司就让我做了个Demo,基本实现了这些功能。 新闻中心窗口可以编辑,不过数据是静态的，还没加Ajax。 目前只在IE6 和FF2.0下测试过，其他浏览器还不知道。

事件格式化函数.书上的代码。

// JavaScript Document

//事件格式化函数，摘自JavaScript高级程序一书 p258

var EventUtil = new Object;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Drag Drop Demo</title>

<script type="text/javascript" src="js/eventutil.js"></script>

</style>

</script>

</script>

</head>

<body>

<div class="page">

<div class="header">Header</div>

<div class="content" id="content">

<div class="left">

<div class="focus" id="debug"></div>

<div class="container1" id="con1">

<div class="box" id="win11">

<div class="fwwin">

<div class="title">

<div class="text">window 11 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"></div>

</div>

<div class="box" id="win12">

<div class="fwwin">

<div class="title">

<div class="text">window 12 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"></div>

</div>

</div>

<div class="container2" id="con2">

<div class="box" id="win21">

<div class="fwwin">

<div class="title">

<div class="text">window 21 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"></div>

</div>

<div class="box" id="winNews">

<div class="fwwin">

<div class="title">

<div class="text">新闻中心 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor" id="editNews">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td colspan="2" height="6"></td></tr>

<tr><td> 

<input type="checkbox" name="chkNews" id="chkNews1" value="1" title="公司新闻" /><label for="chkNews1">公司新闻</label>

</td><td>

<input type="checkbox" name="chkNews" id="chkNews2" value="2" title="行业新闻" /><label for="chkNews2">行业新闻</label>

 </td></tr>

<tr><td colspan="2" style="border-bottom:1px dashed #CCC; height:6px;font-size:6px;"> </td></tr>

<tr><td colspan="2" height="10"></td></tr>

<tr><td colspan="2" align="right" valign="middle">

<a href="javascript:doAction('save', 'editNews');void(0);">[保存]</a>

<a href="javascript:doAction('cancel', 'editNews');void(0);">[取消]</a>

 

</td></tr>

<tr><td colspan="2" style="border-bottom:1px dashed #CCC; height:6px;font-size:6px;"> </td></tr>

</table>

</div>

<div class="body">推荐新闻</div>

</div>

<div class="message" id="addNews">

</div>

<div class="space"></div>

</div>

<div class="box" id="win23">

<div class="fwwin">

<div class="title">

<div class="text">window 23 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

选项<br />1.<br />2.

选项<br />1.<br />2.

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"></div>

</div>

</div>

</div>

<div class="container3" id="con3">

<div class="box" id="win31">

<div class="fwwin">

<div class="title">

<div class="text">window 31 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"> </div>

</div>

<div class="box" id="win32">

<div class="fwwin">

<div class="title">

<div class="text">window 32 </div>

<div class="button">[编辑]</div>

</div>

<div class="editor">

选项<br />1.<br />2.

</div>

<div class="body">b</div>

</div>

<div class="message">

</div>

<div class="space"> </div>

</div>

</div>

</div>

<div class="footer">Footer</div>

<div id="dragHelper"> </div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航