Jquery仿IGoogle实现可拖动窗口示例代码
程序员文章站
2023-10-17 13:28:12
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照igoogl...
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照igoogle做了一个简单的小demo。
这个的demo是根据一个jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的https://plugins.jquery.com/project/easywidgets。
废话就不多说了,直接把源代码贴出来,让大家学习!
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--> <p id="left" class="widget-place column1"> <p id="lp1" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">左边-----用鼠标拖动</p> </p> <p id="lp2" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">左边-----用鼠标拖动</p> </p> <p id="lp3" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">左边-----用鼠标拖动</p> </p> </p> <!--middle--> <p id="middle" class="widget-place column2"> <p id="mp1" class="widget movable collapsable removable editable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p class="widget-editbox" style="background:#cc6699" mce_style="background:#cc6699">这里就是放编辑的内容,为了显眼,我加了背景</p> <p id="content" class="widget-content">中间------用鼠标拖动</p> </p> <p id="mp2" class="widget movable removable editable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">中间------用鼠标拖动</p> </p> <p id="mp3" class="widget movable removable editable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">中间------用鼠标拖动</p> </p> </p> <!--right--> <p id="right" class="widget-place column3"> <p id="rp1" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">右边------用鼠标拖动</p> </p> <p id="rp2" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">右边------用鼠标拖动</p> </p> <p id="rp3" class="widget movable"> <p id="header" class="widget-header"><strong>drar me</strong> </p> <p id="content" class="widget-content">右边------用鼠标拖动</p> </p> </p> </body> </html>
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代码
$(document).ready(function(){ $.fn.easywidgets({ i18n : { edittext : '编辑', closetext : '关闭', extendtext : '展开', collapsetext : '折叠', canceledittext : '取消' } }); });