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
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
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
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
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
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
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
89 }
js
$(document).ready(function(){
$.fn.EasyWidgets({
i18n : {
editText : '编辑',
closeText : '关闭',
extendText : '展开',
collapseText : '折叠',
cancelEditText : '取消'
}
});
});
毕竟是一个测试的例子，我的目标就是会用就可以了，因为自己的css不太好，所以效果挺恶心的！不过功能实现了，但是再拖动的时候，div会有晃动，不知道咋解决！！最后贴一张效果图：拖动前：
拖动后：
Jquery仿IGoogle实现可拖动窗口（源码）的更多相关文章
- Jquery仿IGoogle实现可拖动窗口
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,与编程人生的站长沟通了一下,仿照iG ...
- Bootstrap 模态窗口源码分析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...
- 高仿it之家新闻客户端源码
仿it之家新闻客户端界面,数据为本地假数据.仅实现了新闻模块的功能. 源码下载:http://code.662p.com/list/11_1.html 详细说明:http://android.662p ...
- 高仿ios版美团框架项目源码
高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人.新人. <ignore_js_op> 源码你可以到ios教程网那里下载吧,这里我就不上传了,http://ios.662p ...
- jQuery原型方法first,last,eq,slice源码分析
这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是 ...
- jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...
- 高仿一元云购IOS应用源码项目
高仿一元云购IOS应用(高仿自一元云购安卓客户端) 本App因官方没有IOS客户端故开发,利用业务时间历时2个星期,终于开发完成,又因苹果的各大审核规则对此App的影响,又历时1个多月才终于成功上架, ...
- jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
- 高仿百度传课应用客户端源码iOS版
高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3 ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎 star 哦 ...
随机推荐
- bootstraptable toolbar
- asp.net core mvc视频A：笔记4-1.数据验证
开发建议:永远不要相信客户端提交过来的数据!!! 前端数据验证定位:提高用户体验,仅此而已! 后端数据验证定位:保证系统安全与数据完整!!! 实例:用户登录验证 定义一个用户登录类 在用户登录类基础上 ...
- pycurl 学习笔记--getinfo 函数
通过 pycurl.Curl 对象的 getinfo 函数,可以获取到响应的如下信息: (参考: http://curl.haxx.se/libcurl/c/curl_easy_getinfo.htm ...
- 消息队列内核结构和msgget、msgctl 函数
一.消息队列 1.消息队列提供了一个从一个进程向另外一个进程发送一块数据的方法 2.每个数据块都被认为是有一个类型,接收者进程接收的数据块可以有不同的类型值 3.消息队列与管道不同的是,消息队列是基于 ...
- Linux内核jiffies简介
在LINUX的时钟中断中涉及至二个全局变量一个是xtime,它是timeval数据结构变量,另一个则是jiffies,首先看timeval结构struct timeval{time_t tv_sec; ...
- 在ubuntu中配置深度学习python图片分类实验环境
1 安装numpy,scipy, matplotlib, sudo apt-get install python-numpy sudo apt-get install python-scipy sud ...
- JS正则表达式获取分组内容实例
JS正则表达式获取分组内容. 支持多次匹配的方式: var testStr = "now test001 test002"; var re = /test(\d+)/ig; var ...
- linux系统下添加新硬盘的方法详解
对于linux新手来说,在linux上添加新硬盘,是很有挑战性的一项工作. 在Linux服务器上把硬盘接好,启动linux,以root登陆. fdisk -l ## 这里是查看目前系统上有几块硬盘 D ...
- mysql 的S 锁和X锁的区别
共享锁和排它锁 MySQL的锁系统:shared lock和exclusive lock(共享锁和排他锁,也叫读锁和写锁,即read lock和write lock) 读锁是共享的,或者说是相互不阻塞 ...
- CCDictionary(转)
#ifndef __CCDICTIONARY_H__ #define __CCDICTIONARY_H__ //需要哈希表的支持 #include "support/data_support ...