google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的。
废话就不多说了，直接把源代码贴出来，让大家学习！
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" media="screen" href="https://www.jb51.net/css/my.css" mce_href="https://www.jb51.net/css/my.css" />
<script type="text/javascript" src="https://www.jb51.net/js/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.easywidgets.js"></script>
<script src="https://www.jb51.net/js/example.js" type="text/javascript"></script>
</head>
<body>
<!--left-->
<div>
<div>
<div><strong>drar me</strong> </div>
<div>左边-----用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>左边-----用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>左边-----用鼠标拖动</div>
</div>
</div>
<!--middle-->
<div>
<div>
<div><strong>drar me</strong> </div>
<div mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div>
<div>中间------用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>中间------用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>中间------用鼠标拖动</div>
</div>
</div>
<!--right-->
<div>
<div>
<div><strong>drar me</strong> </div>
<div>右边------用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>右边------用鼠标拖动</div>
</div>
<div>
<div><strong>drar me</strong> </div>
<div>右边------用鼠标拖动</div>
</div>
</div>
</body>
</html>
CSS
body{ margin: 0; padding: 0; background-color: silver; font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; color: #666; font-size:20px; line-height:150%; } #left{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; left: 10px; border: solid red 2px; } #left .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #left .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #middle{ width: 400px; height: 100%; position: absolute; top:10px; left: 435px; padding: 10px; margin: 0 30px 0; border: solid red 2px; } #middle .widget { width: 360px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #middle .widget .widget-header { width: 360px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #right{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; right: 10px; border: solid red 2px; } #right .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #right .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; }
javascript代码
$(document).ready(function(){ $.fn.EasyWidgets({ i18n : { editText : '编辑', closeText : '关闭', extendText : '展开', collapseText : '折叠', cancelEditText : '取消' } }); });
您可能感兴趣的文章: