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:'取消'
}
});
});