Jquery仿IGoogle實現(xiàn)可拖動窗口示例代碼
更新時間：2014年08月22日 14:49:52 投稿：whsnow
這個拖動窗口是根據(jù)一個Jquery的框架直接做出來的:easywidgets，廢話就不多說了，直接把源代碼貼出來，讓大家學習
google可謂是ajax的特效用的淋漓盡致，google suggest， google map，igoogle 可拖動窗口等等...今天要做一個網(wǎng)站的類似效果，仿照iGoogle做了一個簡單的小demo。
這個的demo是根據(jù)一個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">這里就是放編輯的內(nèi)容,為了顯眼，我加了背景</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結合HTML5制作的愛心樹表白動畫的特效代碼，各位宅在家里的程序猿們，再辛苦的工作，也不要忘記你們的女朋友哦。2015-02-02
jquery動畫3.創(chuàng)建一個帶遮罩效果的圖片走廊
今天我們要完成的是一個帶有遮罩效果（補間動畫）的圖片走廊jquery插件：jquery.tranzify.js2012-08-08
jquery插件jquery.beforeafter.js實現(xiàn)左右拖拽分隔條對比圖片的方法
這篇文章主要介紹了jquery插件jquery.beforeafter.js實現(xiàn)左右拖拽分隔條對比圖片的方法,可實現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下2015-08-08
基于jquery封裝的一個js分頁代碼，需要的朋友可以參考下。2011-11-11
這篇文章主要介紹了jQuery居中元素scrollleft計算方法,結合實例形式分析了jQuery獲取及計算頁面滾動元素的相關操作技巧,需要的朋友可以參考下2017-01-01
jQuery使用bind動態(tài)綁定事件無效的處理方法
今天小編就為大家分享一篇關于jQuery使用bind動態(tài)綁定事件無效的處理方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
下面小編就為大家?guī)硪黄褂肑Query實現(xiàn)圖片輪播效果的實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)硪黄獪\析jquery與checkbox的checked屬性的問題。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
jquery 獲取自定義屬性(attr和prop)的實現(xiàn)代碼
jquery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()，attr()有4個表達式2012-06-06
這篇文章主要介紹了js+jquery實現(xiàn)圖片裁剪功能的方法以及全部的示例代碼，思路非常好，這里推薦給有需要的小伙伴。2015-01-01