首頁 > 開發者 > JavaScript
Jquery仿IGoogle實現可拖動視窗範例程式碼，jqueryigoogle
google可謂是ajax的特效用的淋漓盡致，google suggest， google map，igoogle 可拖動視窗等等...今天要做一個網站的類似效果，仿照iGoogle做了一個簡單的小demo。
這個的demo是根據一個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">這裡就是放編輯的內容,為了顯眼，我加了背景</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 : '取消' }});});
這個是jqDnR
(function ($) {
$.fn.jqDrag = function (h) {
return i(this, h, "d");
};
$.fn.jqResize = function (h) {
return i(this, h, "r");
};
$.jqDnR = {dnr:{}, e:0, drag:function (v) {
if (M.k == "d") {
E.css({left:M.X + v.pageX - M.pX, top:M.Y + v.pageY - M.pY});
} else {
E.css({width:Math.max(v.pageX - M.pX + M.W, 0), height:Math.max(v.pageY - M.pY + M.H, 0)});
}
return false;
}, stop:function () {
E.css("opacity", M.o);
$(document).unbind("mousemove", J.drag).unbind("mouseup", J.stop);
}};
var J = $.jqDnR, M = J.dnr, E = J.e, i = function (e, h, k) {
return e.each(function () {
h = (h) ? $(h, e) : e;
h.bind("mousedown", {e:e, k:k}, function (v) {
var d = v.data, p = {};
E = d.e;
// attempt utilization of dimensions plugin to fix IE issues
if (E.css("position") != "relative") {
p = E.position();
if (!($.browser.msie && ($.browser.version == "6.0")) && (E.css("position") == "fixed")) {
p.top -= $(window).scrollTop();
p.left -= $(window).scrollLeft();
}
}
M = {X:p.left || f("left") || 0, Y:p.top || f("top") || 0, W:f("width") || E[0].scrollWidth || 0, H:f("height") || E[0].scrollHeight || 0, pX:v.pageX, pY:v.pageY, k:d.k, o:E.css("opacity")};
E.css({opacity:0.8});
$(document).mousemove($.jqDnR.drag).mouse......餘下全文>>
js問題教，過來幫一下忙喲
把相應div的style.display設定成"none"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
