google可谓是ajax的特效用的淋漓尽致，google suggest， google map，igoogle 可拖动窗口等等...今天要做一个网站的类似效果，与编程人生的站长沟通了一下，仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。

废话就不多说了，直接把源代码贴出来，让大家学习！

html

1 <html>

2 <head>

3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

4

5 <link rel="stylesheet" type="text/css" media="screen" href="css/my.css" mce_href="css/my.css" />

6 <mce:script type="text/javascript" src="js/jquery.min.js" mce_src="js/jquery.min.js"></mce:script>

7 <mce:script type="text/javascript" src="js/jquery-ui.min.js" mce_src="js/jquery-ui.min.js"></mce:script>

8 <mce:script type="text/javascript" src="js/jquery.easywidgets.js" mce_src="js/jquery.easywidgets.js"></mce:script>

9 <mce:script src="js/example.js" mce_src="js/example.js" type="text/javascript"></mce:script>

10 </head>

11

12 <body>

13 <!--left-->

14 <div id="left" class="widget-place column1">

15 <div id="ldiv1" class="widget movable">

16 <div id="header" class="widget-header"><strong>drar me</strong> </div>

17 <div id="content" class="widget-content">左边-----用鼠标拖动</div>

18 </div>

19

20 <div id="ldiv2" class="widget movable">

21 <div id="header" class="widget-header"><strong>drar me</strong> </div>

22 <div id="content" class="widget-content">左边-----用鼠标拖动</div>

23 </div>

24 <div id="ldiv3" class="widget movable">

25 <div id="header" class="widget-header"><strong>drar me</strong> </div>

26 <div id="content" class="widget-content">左边-----用鼠标拖动</div>

27 </div>

28 </div>

29

30 <!--middle-->

31 <div id="middle" class="widget-place column2">

32 <div id="mdiv1" class="widget movable collapsable removable editable">

33 <div id="header" class="widget-header"><strong>drar me</strong> </div>

34 <div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div>

35 <div id="content" class="widget-content">中间------用鼠标拖动</div>

36 </div>

37 <div id="mdiv2" class="widget movable removable editable">

38 <div id="header" class="widget-header"><strong>drar me</strong> </div>

39 <div id="content" class="widget-content">中间------用鼠标拖动</div>

40 </div>

41 <div id="mdiv3" class="widget movable removable editable">

42 <div id="header" class="widget-header"><strong>drar me</strong> </div>

43 <div id="content" class="widget-content">中间------用鼠标拖动</div>

44 </div>

45 </div>

46

47 <!--right-->

48 <div id="right" class="widget-place column3">

49 <div id="rdiv1" class="widget movable">

50 <div id="header" class="widget-header"><strong>drar me</strong> </div>

51 <div id="content" class="widget-content">右边------用鼠标拖动</div>

52 </div>

53 <div id="rdiv2" class="widget movable">

54 <div id="header" class="widget-header"><strong>drar me</strong> </div>

55 <div id="content" class="widget-content">右边------用鼠标拖动</div>

56 </div>

57 <div id="rdiv3" class="widget movable">

58 <div id="header" class="widget-header"><strong>drar me</strong> </div>

59 <div id="content" class="widget-content">右边------用鼠标拖动</div>

60 </div>

61 </div>

62 </body>

63 </html>

CSS

1 body{

2 margin:;

3 padding:;

4 background-color: silver;

5 font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;

6 color: #666;

7 font-size:20px;

8 line-height:150%;

9 }

10 #left{

11 width: 380px;

12 height: 100%;

13 padding: 10px;

14 position: absolute;

15 top: 10px;

16 left: 10px;

17 border: solid red 2px;

18 }

19 #left .widget {

20 width: 340px;

21 height: 150px;

22 padding; 10px;

23 margin: 20px;

24 border: solid red 2px;

25 background-color: white;

26 }

27 #left .widget .widget-header {

28 width: 340px;

29 height: 30px;

30 padding:;

31 margin:;

32 color: red;

33 position: static;

34 background-color: gray;

35 }

36 #middle{

37 width: 400px;

38 height: 100%;

39 position: absolute;

40 top:10px;

41 left: 435px;

42 padding: 10px;

43 margin: 0 30px 0;

44

45 border: solid red 2px;

46 }

47 #middle .widget {

48 width: 360px;

49 height: 150px;

50 padding; 10px;

51 margin: 20px;

52 border: solid red 2px;

53 background-color: white;

54 }

55 #middle .widget .widget-header {

56 width: 360px;

57 height: 30px;

58 padding:;

59 margin:;

60 color: red;

61 position: static;

62 background-color: gray;

63 }

64 #right{

65 width: 380px;

66 height: 100%;

67 padding: 10px;

68 position: absolute;

69 top: 10px;

70 right: 10px;

71 border: solid red 2px;

72 }

73 #right .widget {

74 width: 340px;

75 height: 150px;

76 padding; 10px;

77 margin: 20px;

78 border: solid red 2px;

79 background-color: white;

80 }

81 #right .widget .widget-header {

82 width: 340px;

83 height: 30px;

84 padding:;

85 margin:;

86 color: red;

87 position: static;

88 background-color: gray;

89 }

javascript代码

$(document).ready(function(){

$.fn.EasyWidgets({

i18n : {

editText : '编辑',

closeText : '关闭',

extendText : '展开',

collapseText : '折叠',

cancelEditText : '取消'

}

});

});

Jquery仿IGoogle实现可拖动窗口的更多相关文章

  1. Jquery仿IGoogle实现可拖动窗口（源码）

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

  2. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  4. jquery仿搜狐投票动画代码

    体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...

  5. jQuery仿阿里云购买选择购买时间长度

    效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...

  6. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  7. iframe中的jquery ui modal dialog 覆盖父窗口

    在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

随机推荐

  1. Python网络爬虫 - 3. 异常处理

    handle_excpetion.py from urllib.request import urlopen from urllib.error import HTTPError from bs4 i ...

  2. IOS效率提升工具

    在应用开发过程中,有太多繁杂的事务需要开发者认真去解决.如何才能对开发流程进行改善或自动化,从而提高效率?这成为许多开发者共同探讨的命题.有的开发者会别出心裁地想出熟记他们最喜欢使用的文本编辑器的快捷 ...

  3. Java基础语法(第1章变量)

    今日内容介绍 1.变量 2. 运算符   变量 1.1.变量概述 前面我们已经学习了常量,接下来我们要学习变量.在Java中变量的应用比常量的应用要多很多.所以变量也是尤为重要的知识点! 什么是变量? ...

  4. input 禁止 复制 粘贴 剪切 操作

    1.代码 <Input onCopy={(e)=>{ // 禁止拷贝 e.preventDefault(); }} onPaste={(e)=>{ // 禁止粘贴 e.prevent ...

  5. React.createRef()

    概述: 引用(Refs)提供了一个获得DOM节点或者创建在render方法中的React元素的方法: 在典型的React数据流中,props是唯一的父组件与它们的子元素的通信方式.更改子元素,你需要使 ...

  6. jquery prop('checked', true)解决attr('checked', true)不能选中radio问题

    正如标题所言,使用:prop('checked', true)就可以了

  7. 【phpstorm】破解安装

    1.使用前修改C:\windows\system32\Driver\hosts文件,将“0.0.0.0 account.jetbrains.com”添加到hosts文件中. 2. 浏览器打开 http ...

  8. mysql优化 慢查询（一）

    1.显示慢查询的一些参数的命令:show variables like '%slow%';结果如图

  9. mosquitto---config.mk

    mosquitto安装时在解压压缩包后生成的文件夹中我们可以找到mosquitto主要配置文件config.mk 这个文件的主要内容: # 是否支持tcpd/libwrap功能. #WITH_WRAP ...

  10. EMQ ---客户端clientid为空，emq会随机帮忙生成

    mqtt v3.1.1协议有规定clientid可以为空,所以当客户端clientid为空,emq会随机帮忙生成. 如果clientid为空,随机生成clientid.例如'emqttd_105789 ...