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 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 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与SQL注入攻击[三]
2007/04/17 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php缓冲输出实例分析
2015/01/05 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
jQuery 白痴级入门教程
2009/11/11 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
js控制网页前进和后退的方法
2015/06/08 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
深入理解Node module模块
2018/03/26 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
四年大学自我鉴定
2014/02/17 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2014年教师节活动总结
2014/08/29 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
数据库连接池
2021/04/06 MySQL
浅析Django接口版本控制
2021/06/26 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android