首页 > 代码库 > Jquery仿IGoogle实现可拖动窗口

Jquery仿IGoogle实现可拖动窗口

2024-07-17 17:23:30   227人阅读

google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，与编程人生的站长沟通了一下，仿照iGoogle做了一个简单的小demo。

      这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。

      废话就不多说了，直接把源代码贴出来，让大家学习！

html1 <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 : ‘取消‘ }});});

 


联系
我们