Jquery仿IGoogle实现可拖动窗口示例代码

前端之家收集整理的这篇文章主要介绍了Jquery仿IGoogle实现可拖动窗口示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

drar me

<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header">

drar me


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

drar me

<div id="middle" class="widget-place column2">
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header">

drar me


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

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

drar me
drar me

<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable">
<div id="header" class="widget-header">

drar me


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

drar me
drar me

CSS

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代码

关闭',extendText : '展开',collapseText : '折叠',cancelEditText : '取消' } }); });
原文链接:https://www.f2er.com/jquery/58003.html
可拖动窗口

猜你在找的jQuery相关文章