快捷導(dǎo)航

Jquery仿IGoogle實(shí)現(xiàn)可拖動(dòng)窗口示例代碼

更新時(shí)間：2014年08月22日 14:49:52 投稿：whsnow

這個(gè)拖動(dòng)窗口是根據(jù)一個(gè)Jquery的框架直接做出來(lái)的:easywidgets，廢話就不多說(shuō)了，直接把源代碼貼出來(lái)，讓大家學(xué)習(xí)

google可謂是ajax的特效用的淋漓盡致，google suggest， google map，igoogle 可拖動(dòng)窗口等等...今天要做一個(gè)網(wǎng)站的類似效果，仿照iGoogle做了一個(gè)簡(jiǎn)單的小demo。

這個(gè)的demo是根據(jù)一個(gè)Jquery的框架直接做出來(lái)的:easywidgets。這個(gè)框架是可以免費(fèi)下載的http://plugins.jquery.com/project/easywidgets。

廢話就不多說(shuō)了，直接把源代碼貼出來(lái)，讓大家學(xué)習(xí)！
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">左邊-----用鼠標(biāo)拖動(dòng)</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">左邊-----用鼠標(biāo)拖動(dòng)</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">左邊-----用鼠標(biāo)拖動(dòng)</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">這里就是放編輯的內(nèi)容,為了顯眼，我加了背景</div>
<div id="content" class="widget-content">中間------用鼠標(biāo)拖動(dòng)</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">中間------用鼠標(biāo)拖動(dòng)</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">中間------用鼠標(biāo)拖動(dòng)</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">右邊------用鼠標(biāo)拖動(dòng)</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">右邊------用鼠標(biāo)拖動(dòng)</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">右邊------用鼠標(biāo)拖動(dòng)</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 : '關(guān)閉', 
extendText : '展開', 
collapseText : '折疊', 
cancelEditText : '取消' 
}
});
});

您可能感興趣的文章: