Jquery implements draggable window sample code in imitation of IGoogle
- 2020-03-30 03:47:00
- OfStack
Google can be said to be the most effective use of ajax effects, Google suggest, Google map, igoogle draggable window and so on... Today I'm going to do a similar effect for a website, and I'm going to do a simple little demo like iGoogle.
The demo of this is based on a Jquery framework :easywidgets. The framework is available as a free download at http://plugins.jquery.com/project/easywidgets.
Nonsense not to say, directly put the source code posted, let you learn!
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-->
<div id="left" class="widget-place column1">
<div id="ldiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the left ----- Drag with the mouse </div>
</div>
<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the left ----- Drag with the mouse </div>
</div>
<div id="ldiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the left ----- Drag with the mouse </div>
</div>
</div>
<!--middle-->
<div id="middle" class="widget-place column2">
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699"> So that's what we're going to edit , I added the background to show off </div>
<div id="content" class="widget-content"> In the middle ------ Drag with the mouse </div>
</div>
<div id="mdiv2" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> In the middle ------ Drag with the mouse </div>
</div>
<div id="mdiv3" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> In the middle ------ Drag with the mouse </div>
</div>
</div>
<!--right-->
<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the right ------ Drag with the mouse </div>
</div>
<div id="rdiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the right ------ Drag with the mouse </div>
</div>
<div id="rdiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content"> On the right ------ Drag with the mouse </div>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode',' Song typeface ',' The new song typeface ',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 code
$(document).ready(function(){
$.fn.EasyWidgets({
i18n : {
editText : ' The editor ',
closeText : ' Shut down ',
extendText : ' an ',
collapseText : ' folding ',
cancelEditText : ' cancel '
}
});
});