google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了，直接把源代码贴出来，让大家学习！
html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="css/my.css" rel="external nofollow" rel="external nofollow" mce_href="css/my.css" rel="external nofollow" rel="external nofollow" /> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easywidgets.js"></script>
<script src="js/example.js" type="text/javascript"></script>
</head> <body> <> <div id="left"> <div id="ldiv1"> <div id="header"><strong>drar me</strong> </div> <div id="content">左边-----用鼠标拖动</div> </div> <div id="ldiv2"> <div id="header"><strong>drar me</strong> </div> <div id="content">左边-----用鼠标拖动</div> </div> <div id="ldiv3"> <div id="header"><strong>drar me</strong> </div> <div id="content">左边-----用鼠标拖动</div> </div> </div> <> <div id="middle"> <div id="mdiv1"> <div id="header"><strong>drar me</strong> </div> <div mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div> <div id="content">中间------用鼠标拖动</div> </div> <div id="mdiv2"> <div id="header"><strong>drar me</strong> </div> <div id="content">中间------用鼠标拖动</div> </div> <div id="mdiv3"> <div id="header"><strong>drar me</strong> </div> <div id="content">中间------用鼠标拖动</div> </div> </div> <> <div id="right"> <div id="rdiv1"> <div id="header"><strong>drar me</strong> </div> <div id="content">右边------用鼠标拖动</div> </div> <div id="rdiv2"> <div id="header"><strong>drar me</strong> </div> <div id="content">右边------用鼠标拖动</div> </div> <div id="rdiv3"> <div id="header"><strong>drar me</strong> </div> <div id="content">右边------用鼠标拖动</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 : '取消' } }); });
【Jquery仿IGoogle实现可拖动窗口示例代码】相关文章：
★ Javascript实现的SHA-256加密算法完整实例