Jquery仿IGoogle实现可拖动窗口示例代码


Posted in Javascript onAugust 22, 2014

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://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-->
<div id="left" class="widget-place column1">
<div id="ldiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div> 
</div>

<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
<div id="ldiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
</div>

<!--middle-->
<div id="middle" class="widget-place column2"> 
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv2" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv3" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
</div>

<!--right-->
<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable"> 
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
</div>
</body>
</html>

CSS

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 : '取消' 
}
});
});
Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
javascript无刷新评论实现方法
May 13 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JavaScript验证电子邮箱的函数
Aug 22 #Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 #Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 #Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 #Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
You might like
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
jQuery的css()方法用法实例
2014/12/24 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
就业自荐信
2013/12/04 职场文书
粗加工管理制度
2014/02/04 职场文书
女生节标语
2014/06/26 职场文书
音乐学专业求职信
2014/07/22 职场文书
争先创优公开承诺书
2014/08/30 职场文书
销售员试用期自我评价
2014/09/15 职场文书
送达通知书
2015/04/25 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
初中体育教学随笔
2015/08/15 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
标准发言稿结尾
2019/07/18 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
深入理解go缓存库freecache的使用
2022/02/15 Golang