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:;
3 padding:;
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:;
31 margin:;
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:;
59 margin:;
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:;
85 margin:;
86 color: red;
87 position: static;
88 background-color: gray;
89 }
javascript代码
$(document).ready(function(){
$.fn.EasyWidgets({
i18n : {
editText : '编辑',
closeText : '关闭',
extendText : '展开',
collapseText : '折叠',
cancelEditText : '取消'
}
});
});
Jquery仿IGoogle实现可拖动窗口的更多相关文章
- Jquery仿IGoogle实现可拖动窗口（源码）
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo. 这个的demo ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- jQuery仿阿里云购买选择购买时间长度
效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- iframe中的jquery ui modal dialog 覆盖父窗口
在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
随机推荐
- OpenERP Web Client设置闲置有效时间
在Web Client端使用OpenERP时,默认的cookie有效时间是浏览器的当前作业窗口,这样就是说只要你不关闭浏览器,不管闲置多长时间,当前的连线都是有效的.这样就会有安全问题,如果你忘了登出 ...
- Java运行时异常和非运行时异常
1.Java异常机制 Java把异常当做对象来处理,并定义一个基类java.lang.Throwable作为所有异常的超类.Java中的异常分为两大类:错误Error和异常Exception,Java ...
- 怎样获取oracle dbid
1.查询v$database获得 因为DBID在控制文件和数据文件里都存在记录,所以假设可以mount数据库就行查询v$database视图获得. SQL> alter database mo ...
- centos时间调整的操作(转)
在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况. 如果没有安装,而你使用的是 CentOS系统 那使用命令 yum ins ...
- Linux命令-文件处理命令:more
分页查看文件命令,区别于翻页查看文件命令less more /etc/services 查看etc目录中的services文件 注意:空格或f是翻页,回车Enter是换行,q或Q是退出.
- 用ASP.NET/C#连接Access和SQL Server数据库
连接Access 首先看一个例子代码片断:程序代码: ------------------------------------------------------------------------- ...
- Android Studio Share Project On Github
在Android Studio上将项目导入Github上: 1. 创建一个Project.点击VCS -> Enable Version Control Integration... 2.选择G ...
- POJ 2677 旅行商问题 双调dp或者费用流
Tour Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3408 Accepted: 1513 Description ...
- python 读取文件时报错： UnicodeDecodeError: 'gbk' codec can't decode byte 0xa4 in position 127: illegal multibyte sequence
UnicodeDecodeError: 'gbk' codec can't decode byte 0xa4 in position 127: illegal multibyte sequence p ...
- 关闭windows打印服务
1.关闭打印服务:开始-运行-services.msc或打开控制面板-管理工具-服务,打开服务列表,找到Print Spooler(打印服务),关闭(右击,点“关闭”).2.删除打印缓存:进入c:\\ ...