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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
php微信开发之图片回复功能
2018/06/14 PHP
JScript的条件编译
2007/05/29 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
python中cPickle用法例子分享
2014/01/03 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python 同时运行多个程序的实例
2019/01/07 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
基于python实现模拟数据结构模型
2020/06/12 Python
迟到检讨书500字
2014/02/05 职场文书
迎新晚会策划方案
2014/06/13 职场文书
活动总结范文
2014/08/30 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
预备党员群众意见
2015/06/01 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP