Google is the most effective Ajax effects, Google suggest, Google Map,igoogle can drag the window and so on ... Today, I modeled igoogle as a simple little demo.
This demo is made directly out of a jquery framework: Easywidgets. This framework is free to download the http://plugins.jquery.com/project/easywidgets.
Nonsense is not much to say, directly put the source code out, let everyone learn!
Html
1 2 3 <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
4
5 <link rel= "stylesheet" type= "text/css" media= "screen" href= "Css/my.css" mce_href= "Css/my.css"/>
6 <mce:script type= "Text/javascript" src= "Js/jquery.min.js" mce_src= "Js/jquery.min.js" ></mce:script>
7 <mce:script type= "Text/javascript" src= "Js/jquery-ui.min.js" mce_src= "Js/jquery-ui.min.js" ></mce:script >
8 <mce:script type= "Text/javascript" src= "Js/jquery.easywidgets.js" mce_src= "Js/jquery.easywidgets.js" ></ Mce:script>
9 <mce:script src= "Js/example.js" mce_src= "Js/example.js" type= "Text/javascript" ></mce:script>
Ten 11
<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" > Left-----drag with the mouse </div>
</div>
19
<div id= "Ldiv2" class= "widget movable" >
<div id= "header" class= "Widget-header" ><strong>drar me</strong> </div>
<div id= "Content" class= "widget-content" > 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" > Left-----drag with the mouse </div>
</div>
</div>
29
<!--middle-->
<div id= "Middle" class= "Widget-place Column2" >
<div id= "Mdiv1" class= "widgets 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" > Here is the content of the editor, in order to be conspicuous, I added a background </div>
<div id= "Content" class= "widget-content" > middle------Drag with the mouse </div>
</div>
PNS <div id= "Mdiv2" class= "widgets movable removable editable" >
<div id= "header" class= "Widget-header" ><strong>drar me</strong> </div>
<div id= "Content" class= "widget-content" > middle------Drag with the mouse </div>
</div>
<div id= "Mdiv3" class= "widgets movable removable editable" >
<div id= "header" class= "Widget-header" ><strong>drar me</strong> </div>
<div id= "Content" class= "widget-content" > middle------Drag with the mouse </div>
</div>
</div>
46
<!--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>
Wuyi <div id= "content" class= "widget-content" > 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" > 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" > right------drag with the mouse </div>
</div>
</div>
</body>
Css
1 body{
2 margin:0;
3 padding:0;
4
5 font-family: ' Lucida Grande ', ' Lucida Sans Unicode ', ' Arial ', ' New song Body ', Arial,verdana,sans-serif;
6 color: #666;
7 font-size:20px;
8 line-height:150%;
9}
Ten #left {
One by one width:380px;
height:100%;
padding:10px;
Position:absolute;
top:10px;
left:10px;
Border:solid Red 2px;
18}
#left. Widget {
width:340px;
height:150px;
padding; 10px;
margin:20px;
Border:solid Red 2px;
25
26}
#left. Widget. Widget-header {
width:340px;
height:30px;
padding:0;
margin:0;
color:red;
position:static;
34
35}
#middle {
Panax Notoginseng width:400px;
height:100%;
Position:absolute;
top:10px;
left:435px;
padding:10px;
margin:0 30px 0;
44
Border:solid Red 2px;
46}
#middle. Widget {
width:360px;
height:150px;
padding; 10px;
Wuyi margin:20px;
Border:solid Red 2px;
53
54}
#middle. Widget. Widget-header {
width:360px;
height:30px;
padding:0;
margin:0;
color:red;
position:static;
62
63}
#right {
width:380px;
height:100%;
padding:10px;
Position:absolute;
top:10px;
right:10px;
Border:solid Red 2px;
72}
#right. Widget {
width:340px;
height:150px;
padding; 10px;
margin:20px;
Border:solid Red 2px;
79
80}
Bayi #right. Widget. Widget-header {
width:340px;
height:30px;
padding:0;
margin:0;
color:red;
position:static;
88
89}
Js
$ (document). Ready (function () {
$.fn. Easywidgets ({
i18n: {
EditText: ' Edit ',
Closetext: ' Off ',
Extendtext: ' Unfold ',
Collapsetext: ' Folding ',
Canceledittext: ' Cancel '
}
});
});
After all, is a test example, my goal is to use it, because their CSS is not very good, so the effect is very disgusting! But the function is realized, but when dragging again, Div will have shaking, do not know how to solve!! Last Post: Before dragging:
After dragging:
jquery Imitation igoogle implement draggable window (source code)
