提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery仿IGoogle实现可拖动窗口示例代码

jQuery代码 实现 示例 窗口 拖动
2023-06-13 09:15:44 时间

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

相关文章