Jquery仿IGoogle实现可拖动窗口示例代码
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 : '取消'
}
});
});
相关推荐
-
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
-
jQuery窗口拖动功能的实现代码
具体代码如下所示: $("#showTitle").mousedown(function (e) { vbool = true; vHeight = e.pageY; vWidth = e.pageX; cHeight = vHeight - $("#show").offset().top; cWdith = vWidth - $("#show").offset().left; //alert("divshow" + $(&q
-
Jquery仿IGoogle实现可拖动窗口示例代码
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo. 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets.这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets. 废话就不多说了,直接把源代码贴出来,让大家学习! html <html> <head
-
jquery自定义插件——window的实现【示例代码】
本例子实现弹窗的效果: 1.jquery.show.js /* * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, content; close=$(" "); title=$
-
jQuery仿移动端支付宝键盘的实现代码
最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种.由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现.话不多说,先上图看看效果. 尼玛,这不就是支付宝app那个支付键盘吗? 没错,咱们UI就是参照支付宝做的这个键盘.你可能会问,为什么不直接调用支付宝提供的支付接口呢.额,因为项目需要,这里就不多解释了. 我们先看一下实现后的效果图 HTML部分 <!-- 支付键盘 --> <divclass="pay-contai
-
jQuery使用jsonp实现百度搜索的示例代码
项目实现:还原百度搜索功能: 项目原理:利用json回调页面传参; 什么是jsonp:就是利用<script>标签的src地址,让目标页面回调本地页面,并且带入参数,也解决了跨域问题: 代码如下: html(css代码不提供) <div class="box"> <input type="text" /> <div class="ssk"></div> <button>×&l
-
Android未读消息拖动气泡示例代码详解(附源码)
前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr
-
Flutter仿钉钉考勤日历的示例代码
本文主要介绍了Flutter仿钉钉考勤日历的示例代码,分享给大家,具体如下: 效果 原型 开发 1. 使用 // 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), onDateChanged: onDateChanged, // 0:无状态,1:正常考勤 2:异常考情,迟到,早退, // 若不满一个月,日历会自动用0补满一个月 check
-
jQuery实现的简单对话框拖动功能示例
本文实例讲述了jQuery实现的简单对话框拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery 拖动&
-
利用jQuery+localStorage实现一个简易的计时器示例代码
前言 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 原型 需求 1.关闭浏览器时时间继续运行 2.刷
-
jquery取消选择select下拉框示例代码
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()"> <option value="">全部</option>
-
Jquery在指定DIV加载HTML示例代码
首先引入Jquery 复制代码 代码如下: <script src="js/jquery.js"></script> 在页面加入JS 复制代码 代码如下: <script> $(function(){ $("div#top_sidebar").load("top_sidebar.html"); }) </script> #top_sidebar 为指定DIV的ID