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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript闭包详解
Feb 02 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
MSN消息提示类
2006/09/05 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解如何运行vue项目
2019/04/15 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
活动邀请函范文
2014/01/19 职场文书
节能环保口号
2014/06/12 职场文书
村道德模范事迹材料
2014/08/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
会计工作岗位职责
2015/02/03 职场文书
兴趣班停课通知
2015/04/24 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
python playwright之元素定位示例详解
2022/07/23 Python