欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-17 13:28:12
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照igoogl...

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照igoogle做了一个简单的小demo。

这个的demo是根据一个jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的https://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>
<!--left-->
<p id="left" class="widget-place column1">
<p id="lp1" class="widget movable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">左边-----用鼠标拖动</p> 
</p>

<p id="lp2" class="widget movable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">左边-----用鼠标拖动</p>
</p>
<p id="lp3" class="widget movable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">左边-----用鼠标拖动</p>
</p>
</p>

<!--middle-->
<p id="middle" class="widget-place column2"> 
<p id="mp1" class="widget movable collapsable removable editable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p class="widget-editbox" style="background:#cc6699" mce_style="background:#cc6699">这里就是放编辑的内容,为了显眼,我加了背景</p>
<p id="content" class="widget-content">中间------用鼠标拖动</p>
</p>
<p id="mp2" class="widget movable removable editable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">中间------用鼠标拖动</p>
</p>
<p id="mp3" class="widget movable removable editable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">中间------用鼠标拖动</p>
</p>
</p>

<!--right-->
<p id="right" class="widget-place column3">
<p id="rp1" class="widget movable"> 
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">右边------用鼠标拖动</p>
</p>
<p id="rp2" class="widget movable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">右边------用鼠标拖动</p>
</p>
<p id="rp3" class="widget movable">
<p id="header" class="widget-header"><strong>drar me</strong> </p>
<p id="content" class="widget-content">右边------用鼠标拖动</p>
</p>
</p>
</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 : '取消' 
}
});
});