Jquery仿IGoogle實現(xiàn)可拖動窗口示例代碼
google可謂是ajax的特效用的淋漓盡致,google suggest, google map,igoogle 可拖動窗口等等...今天要做一個網(wǎng)站的類似效果,仿照iGoogle做了一個簡單的小demo。
這個的demo是根據(jù)一個Jquery的框架直接做出來的:easywidgets。這個框架是可以免費下載的http://plugins.jquery.com/project/easywidgets。
廢話就不多說了,直接把源代碼貼出來,讓大家學(xué)習!
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 : '關(guān)閉', extendText : '展開', collapseText : '折疊', cancelEditText : '取消' } }); });
相關(guān)文章
jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法
這篇文章主要介紹了jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法,結(jié)合實例形式分析了each方法遍歷json數(shù)組的實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-04-04基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07JQuery中判斷一個元素下面是否有內(nèi)容或者有某個標簽的判斷代碼
網(wǎng)站開發(fā)時,我們時常需要把沒有內(nèi)容的標簽隱藏或者去掉。在用JQ有兩種好的解決辦法2012-02-02jQuery插件MovingBoxes實現(xiàn)左右滑動中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動放大圖片插件示例,實現(xiàn)左右滑動和放大效果,有興趣的可以了解一下。2017-02-02