最近在玩這個東西, 不過我真正開始玩 jQuery 還不滿一個月
很多功能也不知道是不是已經有了, 例如在關閉 dialog 之後
如果關閉前有移動過位置, 再開啟時 dialog 的位置卻會回到最初設定的
不會自動在最後移動的位置, 雖然可以在 dragStop 事件做這個處理
但是如果每次開個 dialog 都還要另外處理也是很麻煩的啊
估狗爬了好久, 找不到比較好的解決方式
於是就直接拿 jQuery source code 開刀..
==
一開始是挖 ui dialog (jQuery UI Dialog 1.7.2)
弄了好久都會有一些小問題
不過看到 dialog 是直接用 draggable 做移動的功能
於是我知道我找錯方向了, 趕快改挖 draggable
果然解決了保存移動後最新位置的方法了~
為了避免將來 jQuery-ui 更新問題
所以不直接改 jQyery-ui 的原始碼
程式碼:
<script>
;(function($) {
// dragStop store new position
//*
var _mouseStop = $.ui.draggable.prototype._mouseStop;
$.ui.draggable.prototype._mouseStop = function(){
var self = this;
options = this.options;
_mouseStop.apply(this, arguments);
this.position = this.element.offset();
if (this.element.hasClass(‘ui-dialog’)) {
this.element.children().filter(‘.ui-dialog-content’)
.dialog(‘option’, ‘position’, [this.position.left, this.position.top]);
}
};
// */
})(jQuery);
</script>
這是只改寫 draggable mouseStop 事件的部分
先判斷是不是用在 ui-dialog, 不是的話就不用處理
找出 dialog 真正的物件, 然後將目前最新的位置存入 position 屬性
下面是測試的網頁..
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>jQuery Tutorial 36</title>
<link rel=”stylesheet” href=”/themes/sunny/jquery-ui.css” type=”text/css”/>
<script type=”text/javascript” src=”/js/jquery.min.js”> </script>
<script type=”text/javascript” src=”/js/jquery-ui.min.js”> </script>
<script>
;(function($) {
// dragStop store new position
//*
var _mouseStop = $.ui.draggable.prototype._mouseStop;
$.ui.draggable.prototype._mouseStop = function(){
var self = this;
options = this.options;
_mouseStop.apply(this, arguments);
this.position = this.element.offset();
if (this.element.hasClass(‘ui-dialog’)) {
this.element.children().filter(‘.ui-dialog-content’)
.dialog(‘option’, ‘position’, [this.position.left, this.position.top]);
}
};
// */
})(jQuery);
$(document).ready(function () {
$(“#showDialog”).click(function() {
if (!$(“.myDialog”).dialog(“isOpen”)) {
$(“.myDialog”).dialog(“open”);
}
});
$(“.myDialog”).dialog({
position: [80, 80]
});
});
</script>
</head>
<body>
<div title=”天窗標題”>開天窗測試</div>
<button id=”showDialog”>Show Dialog</button>
</body>
</html>
在 firefox, chrome, opera, ie6,7,8 測試過都OK
修改了一下, 加了一個是否自動保存移動後位置的屬性『autoPosition』
程式碼:
<script>
;(function($) {
// dragStop store new position
var _mouseStop = $.ui.draggable.prototype._mouseStop;
$.ui.draggable.prototype._mouseStop = function(){
var self = this;
options = this.options;
_mouseStop.apply(this, arguments);
var el = this.element;
this.position = el.offset();
if (el.hasClass(‘ui-dialog’) && el.children().filter(‘.ui-dialog-content’).dialog(‘option’, ‘autoPosition’)) {
el.children().filter(‘.ui-dialog-content’)
.dialog(‘option’, ‘position’, [this.position.left, this.position.top]);
}
};
$.ui.dialog.defaults.autoPosition = false;
})(jQuery);
$(document).ready(function () {
$(“#showDialog”).click(function() {
if (!$(“.myDialog”).dialog(“isOpen”)) {
$(“.myDialog”).dialog(“open”);
}
});
$(“.myDialog”).dialog({
position: [80, 80],
autoPosition: true
});
});
</script>
近期评论