Jquery仿IGoogle实现可拖动窗口示例代码
google可谓是ajax的特效用的淋漓尽致,googlesuggest,googlemap,igoogle可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了,直接把源代码贴出来,让大家学习!
html
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <linkrel="stylesheet"type="text/css"media="screen"href="css/my.css"rel="externalnofollow"rel="externalnofollow"mce_href="css/my.css"rel="externalnofollow"rel="externalnofollow"/> <scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery-ui.min.js"></script>
<scripttype="text/javascript"src="js/jquery.easywidgets.js"></script>
<scriptsrc="js/example.js"type="text/javascript"></script>
</head> <body> <!--left--> <divid="left"class="widget-placecolumn1"> <divid="ldiv1"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">左边-----用鼠标拖动</div> </div> <divid="ldiv2"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">左边-----用鼠标拖动</div> </div> <divid="ldiv3"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">左边-----用鼠标拖动</div> </div> </div> <!--middle--> <divid="middle"class="widget-placecolumn2"> <divid="mdiv1"class="widgetmovablecollapsableremovableeditable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divclass="widget-editbox"style="background:#CC6699"mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div> <divid="content"class="widget-content">中间------用鼠标拖动</div> </div> <divid="mdiv2"class="widgetmovableremovableeditable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">中间------用鼠标拖动</div> </div> <divid="mdiv3"class="widgetmovableremovableeditable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">中间------用鼠标拖动</div> </div> </div> <!--right--> <divid="right"class="widget-placecolumn3"> <divid="rdiv1"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">右边------用鼠标拖动</div> </div> <divid="rdiv2"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">右边------用鼠标拖动</div> </div> <divid="rdiv3"class="widgetmovable"> <divid="header"class="widget-header"><strong>drarme</strong></div> <divid="content"class="widget-content">右边------用鼠标拖动</div> </div> </div> </body> </html>
CSS
body{ margin:0; padding:0; background-color:silver; font-family:'LucidaGrande','LucidaSansUnicode','宋体','新宋体',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:solidred2px; } #left.widget{ width:340px; height:150px; padding;10px; margin:20px; border:solidred2px; 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:030px0; border:solidred2px; } #middle.widget{ width:360px; height:150px; padding;10px; margin:20px; border:solidred2px; 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:solidred2px; } #right.widget{ width:340px; height:150px; padding;10px; margin:20px; border:solidred2px; 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:'取消' } }); });