Jquery仿IGoogle实现可拖动窗口
google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，与编程人生的站长沟通了一下，仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了，直接把源代码贴出来，让大家学习！
html 1 <html> 2 <head> 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> 10 </head> 11 12 <body> 13 <!--left--> 14 <div id="left" class="widget-place column1"> 15 <div id="ldiv1" class="widget movable"> 16 <div id="header" class="widget-header"><strong>drar me</strong> </div> 17 <div id="content" class="widget-content">左边-----用鼠标拖动</div> 18 </div> 19 20 <div id="ldiv2" class="widget movable"> 21 <div id="header" class="widget-header"><strong>drar me</strong> </div> 22 <div id="content" class="widget-content">左边-----用鼠标拖动</div> 23 </div> 24 <div id="ldiv3" class="widget movable"> 25 <div id="header" class="widget-header"><strong>drar me</strong> </div> 26 <div id="content" class="widget-content">左边-----用鼠标拖动</div> 27 </div> 28 </div> 29 30 <!--middle--> 31 <div id="middle" class="widget-place column2"> 32 <div id="mdiv1" class="widget movable collapsable removable editable"> 33 <div id="header" class="widget-header"><strong>drar me</strong> </div> 34 <div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div> 35 <div id="content" class="widget-content">中间------用鼠标拖动</div> 36 </div> 37 <div id="mdiv2" class="widget movable removable editable"> 38 <div id="header" class="widget-header"><strong>drar me</strong> </div> 39 <div id="content" class="widget-content">中间------用鼠标拖动</div> 40 </div> 41 <div id="mdiv3" class="widget movable removable editable"> 42 <div id="header" class="widget-header"><strong>drar me</strong> </div> 43 <div id="content" class="widget-content">中间------用鼠标拖动</div> 44 </div> 45 </div> 46 47 <!--right--> 48 <div id="right" class="widget-place column3"> 49 <div id="rdiv1" class="widget movable"> 50 <div id="header" class="widget-header"><strong>drar me</strong> </div> 51 <div id="content" class="widget-content">右边------用鼠标拖动</div> 52 </div> 53 <div id="rdiv2" class="widget movable"> 54 <div id="header" class="widget-header"><strong>drar me</strong> </div> 55 <div id="content" class="widget-content">右边------用鼠标拖动</div> 56 </div> 57 <div id="rdiv3" class="widget movable"> 58 <div id="header" class="widget-header"><strong>drar me</strong> </div> 59 <div id="content" class="widget-content">右边------用鼠标拖动</div> 60 </div> 61 </div> 62 </body> 63 </html>
CSS
1 body{ 2 margin: 0; 3 padding: 0; 4 background-color: silver; 5 font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; 6 color: #666; 7 font-size:20px; 8 line-height:150%; 9 } 10 #left{ 11 width: 380px; 12 height: 100%; 13 padding: 10px; 14 position: absolute; 15 top: 10px; 16 left: 10px; 17 border: solid red 2px; 18 } 19 #left .widget { 20 width: 340px; 21 height: 150px; 22 padding; 10px; 23 margin: 20px; 24 border: solid red 2px; 25 background-color: white; 26 } 27 #left .widget .widget-header { 28 width: 340px; 29 height: 30px; 30 padding: 0; 31 margin: 0; 32 color: red; 33 position: static; 34 background-color: gray; 35 } 36 #middle{ 37 width: 400px; 38 height: 100%; 39 position: absolute; 40 top:10px; 41 left: 435px; 42 padding: 10px; 43 margin: 0 30px 0; 44 45 border: solid red 2px; 46 } 47 #middle .widget { 48 width: 360px; 49 height: 150px; 50 padding; 10px; 51 margin: 20px; 52 border: solid red 2px; 53 background-color: white; 54 } 55 #middle .widget .widget-header { 56 width: 360px; 57 height: 30px; 58 padding: 0; 59 margin: 0; 60 color: red; 61 position: static; 62 background-color: gray; 63 } 64 #right{ 65 width: 380px; 66 height: 100%; 67 padding: 10px; 68 position: absolute; 69 top: 10px; 70 right: 10px; 71 border: solid red 2px; 72 } 73 #right .widget { 74 width: 340px; 75 height: 150px; 76 padding; 10px; 77 margin: 20px; 78 border: solid red 2px; 79 background-color: white; 80 } 81 #right .widget .widget-header { 82 width: 340px; 83 height: 30px; 84 padding: 0; 85 margin: 0; 86 color: red; 87 position: static; 88 background-color: gray; 89 }
javascript代码
$(document).ready(function(){ $.fn.EasyWidgets({ i18n : { editText : '编辑', closeText : '关闭', extendText : '展开', collapseText : '折叠', cancelEditText : '取消' } }); });
