google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了，直接把源代码贴出来，让大家学习！
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<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><br><script type="text/javascript" src="js/jquery-ui.min.js"></script><br><script type="text/javascript" src="js/jquery.easywidgets.js"></script> <br><script src="js/example.js" type="text/javascript"></script><br></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">左边-----用鼠标拖动</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">左边-----用鼠标拖动</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">左边-----用鼠标拖动</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">这里就是放编辑的内容,为了显眼，我加了背景</div><div id="content" class="widget-content">中间------用鼠标拖动</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">中间------用鼠标拖动</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">中间------用鼠标拖动</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">右边------用鼠标拖动</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">右边------用鼠标拖动</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">右边------用鼠标拖动</div></div></div></body></html> |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
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代码
|
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready(function(){ $.fn.EasyWidgets({i18n : { editText : '编辑', closeText : '关闭', extendText : '展开', collapseText : '折叠', cancelEditText : '取消'}});}); |
