Issue 2443. Pagination UI guide update.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11520 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-09-26 05:08:31 +00:00
parent 136e3cb772
commit f5a31284f1
4 changed files with 601 additions and 22 deletions

View file

@ -9,17 +9,28 @@ jQuery(function($){
// TARGET toggle
$('.x [data-toggle]').click(function(){
$($(this).attr('data-toggle')).toggle();
var $this = $(this);
var $target = $($this.attr('data-toggle'));
$target.toggle();
if($target.is(':visible') && !$target.find('a,input,button,textarea,select').length){
$target.attr('tabindex','0').focus();
} else if($target.is(':visible') && $target.find('a,input,button,textarea,select').length) {
$target.find('a,input,button,textarea,select').eq(0).focus();
} else {
$this.focus();
}
return false;
});
// TARGET show
$('.x [data-show]').click(function(){
$($(this).attr('data-show')).show();
$($(this).attr('data-show')).show().attr('tabindex','0').focus();
return false;
});
// TARGET hide
$('.x [data-hide]').click(function(){
$($(this).attr('data-hide')).hide();
var $this = $(this);
$($this.attr('data-hide')).hide();
$this.focus();
return false;
});

View file

@ -1,17 +1,560 @@
jQuery(function(a){function d(){g.width("99.99%");setTimeout(function(){g.removeAttr("style")},0)}function c(){h.each(function(){var c=a(this),b=c.parent("label"),d=b.siblings('input[type="text"]:first'),g=b.siblings("select:first"),e=c.closest(".multilingual").siblings(".multilingual_item:first");c.is(":checked")?(d.hide(),g.show(),b.addClass("checked"),e.show()):(d.show(),g.hide(),b.removeClass("checked"),e.hide())})}window.top.scrollTo(0,0);a(".x .skipNav>a").click(function(){a(a(this).attr("href")).attr("tabindex",
"0").css("outline","0").focus()});a(".x [data-toggle]").click(function(){a(a(this).attr("data-toggle")).toggle();return!1});a(".x [data-show]").click(function(){a(a(this).attr("data-show")).show();return!1});a(".x [data-hide]").click(function(){a(a(this).attr("data-hide")).hide();return!1});a('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();a(".x .x_nav-tabs").find('>li>a[href^="#"]').click(function(){var b=a(this);b.parent("li").addClass("x_active").siblings().removeClass("x_active");b.closest(".x_nav-tabs").next(".x_tab-content").find(b.attr("href")).addClass("x_active").show().siblings().removeClass("x_active").hide();
return!1});var b=a(".x>.body"),g=b.find(">.content"),f=b.find(">.gnb"),e=f.find(">ul>li");a(window).resize(function(){setTimeout(function(){980>=a(window).width()||1240<a(window).width()?b.removeClass("wide"):b.addClass("wide")},100)}).resize();e.find("ul").prev("a").bind("click focus",function(){var b=a(this);e.not(b.parent("li")).removeClass("open");a(this).parent("li").toggleClass("open");f.trigger("mouseenter");return!1});f.mouseenter(function(){980<=a(window).width()&&(b.removeClass("wide"),
d())}).mouseleave(function(){980<=a(window).width()&&1240>a(window).width()&&(b.addClass("wide"),d())});f.find('>a[href="#gnbNav"]').click(function(){a(this).parent(".gnb").toggleClass("open");return!1});f.prepend('<button type="button" class="close before" />').append('<button type="button" class="close after" />');f.find(">.close").focus(function(){b.addClass("wide");d()});var h=a('.x .multilingual>label>input[type="checkbox"]');c();h.change(c);a('.x th>input[type="checkbox"]').change(function(){var b=
a(this),c=b.data("name");b.closest("table").find("input:checkbox").filter(function(){var b=a(this);return!b.prop("disabled")&&(b.attr("name")==c||b.data("name")==c)}).prop("checked",b.prop("checked")).end().end().trigger("update.checkbox",[c,this.checked])});a(".x .x_pagination .x_disabled, .x .x_pagination .x_active").click(function(){return!1});a(".x .section>h1").append('<button type="button" class="snToggle x_icon-chevron-up">Toggle this section</button>');a(".x .section>h1>.snToggle").click(function(){var b=
a(this),c=b.closest(".section");c.hasClass("collapse")?(c.removeClass("collapse").children("h1:first").siblings().show(),b.removeClass("x_icon-chevron-down").addClass("x_icon-chevron-up")):(c.addClass("collapse").children("h1:first").siblings().hide(),b.removeClass("x_icon-chevron-up").addClass("x_icon-chevron-down"))})});
jQuery(function(a){a.fn.xeModalWindow=function(){this.not(".xe-modal-window").addClass("xe-modal-window").each(function(){a(a(this).attr("href")).addClass("x").hide()}).click(function(){var d=a(this),c,b;c=a(d.attr("href"));c.parent("body").length||(b=a('<button type="button" class="x_close">&times;</button>'),b.click(function(){c.data("anchor").trigger("close.mw")}),c.find("[data-hide]").click(function(){c.data("anchor").trigger("close.mw")}),a("body").append('<div class="x_modal-backdrop"></div>').append(c),
c.prepend(b));c.data("anchor",d);"showing"==c.data("state")?d.trigger("close.mw"):d.trigger("open.mw");return!1}).bind("open.mw",function(){var d=a(this),c,b;c=a.Event("before-open.mw");d.trigger(c);if(c.isDefaultPrevented())return!1;c=a(d.attr("href"));b=d.data("duration")||"fast";c.data("state","showing");a("html,body").addClass("modalContainer");a(document).bind("keydown.mw",function(a){if(27==a.which)return d.trigger("close.mw"),!1});c.fadeIn(b,function(){d.trigger("after-open.mw")}).find("button.x_close:first").focus();
a(".x_modal-backdrop").show()}).bind("close.mw",function(){var d=a(this),c,b;c=a.Event("before-close.mw");d.trigger(c);if(c.isDefaultPrevented())return!1;c=a(d.attr("href"));b=d.data("duration")||"fast";c.data("state","hiding");a("html,body").removeClass("modalContainer");c.fadeOut(b,function(){d.trigger("after-close.mw")});a(".x_modal-backdrop").hide();d.focus()})};a("a.modalAnchor").xeModalWindow();a("div.x_modal").addClass("x").hide()});
jQuery(function(a){var d=!1;a.fn.xeContentToggler=function(){this.not(".xe-content-toggler").addClass("xe-content-toggler").each(function(){var c=a(this);$layer=a(c.attr("href"));$layer.hide().not(".xe-toggling-content").addClass("xe-toggling-content").mousedown(function(){d=!0}).focusout(function(){setTimeout(function(){!d&&(!$layer.find(":focus").length&&"showing"==$layer.data("state"))&&c.trigger("close.tc");d=!1},1)})}).click(function(){var c=a(this),b;b=a(c.attr("href"));b.data("anchor",c);"showing"==
b.data("state")?c.trigger("close.tc"):c.trigger("open.tc");return!1}).bind("open.tc",function(){function c(){b.trigger("after-open.tc")}var b=a(this),g,f,e;g=a(b.attr("href"));f=b.data("effect");e=b.data("duration")||"fast";g.data("state","showing");b.trigger("before-open.tc");d=!1;a(document).unbind("mousedown.tc keydown.tc").bind("mousedown.tc keydown.tc",function(c){if(c&&("keydown"==c.type&&27!=c.which||"mousedown"==c.type&&(c=a(c.target),c.is("html,.tgAnchor,.tgContent")||g.has(c).length)))return!0;
b.trigger("close.tc");return!1});switch(f){case "slide":g.slideDown(e,c);break;case "slide-h":f=g.css({"overflow-x":"",width:""}).width();g.show().css({"overflow-x":"hidden",width:"0px"}).animate({width:f},e,function(){g.css({"overflow-x":"",width:""});c()});break;case "fade":g.fadeIn(e,c);break;default:g.show(),b.trigger("after-open.tc")}}).bind("close.tc",function(){function c(){b.trigger("after-close.tc")}var b=a(this),d,f,e;a(document).unbind("mousedown.tc keydown.tc");d=a(b.attr("href"));f=b.data("effect");
e=b.data("duration")||"fast";d.data("state","hiding");b.trigger("before-close.tc");switch(f){case "slide":d.slideUp(e,c);break;case "slide-h":d.animate({width:0},e,function(){d.hide();c()});break;case "fade":d.fadeOut(e,c);break;default:d.hide(),b.trigger("after-close.tc")}});return this};a("a.tgAnchor").xeContentToggler()});
jQuery(function(a){function d(a,c){for(var d=0,e=0;a&&a!=c;)d+=a.offsetTop,e+=a.offsetLeft,a=a.offsetParent;return{top:d,left:e}}var c=a('<tr class="placeholder"><td>&nbsp;</td></tr>');a.fn.xeSortableTable=function(){this.not(".xe-sortable-table").addClass("xe-sortable-table").delegate("button.dragBtn","mousedown.st",function(b){var g,f,e,h,m,j,k,i,l,n;if(1==b.which){f=a(this);e=f.closest("tr");h=f.closest("table");n=h.get(0).offsetParent;f=e.height();m=e.width();before_event=a.Event("before-drag.st");
h.trigger(before_event);if(before_event.isDefaultPrevented())return!1;g=b.pageY;j=d(e.get(0),n);$clone=e.attr("target",!0).clone(!0).appendTo(h);l=(b=h.find("thead th")).length;b.filter("[colspan]").attr("colspan",function(a,c){l+=c-1});c.find("td").attr("colspan",l);k=[];h.find("tbody>tr:not([target],.sticky,:hidden)").each(function(){var c=a(this),b;b=d(this,n);k.push({top:b.top,bottom:b.top+c.height(),$item:c})});$clone.addClass("draggable").css({position:"absolute",opacity:0.6,width:m,height:f,
left:j.left,top:j.top,zIndex:100});c.css({position:"absolute",opacity:0.6,width:m,height:"10px",left:j.left,top:j.top,backgroundColor:"#bbb",overflow:"hidden",zIndex:99}).appendTo(h);e.css("opacity",0.6);a(document).unbind("mousedown.st mouseup.st").bind("mousemove.st",function(a){var b,d,e;i=null;a=j.top-(g-a.pageY);b=0;for(d=k.length;b<d;b++)e=k[b],b&&e.top>a||b<d-1&&e.bottom<a||(i={element:e.$item},e.top>a-12?(i.state="before",c.css("top",e.top-5)):(i.state="after",c.css("top",e.bottom-5)));$clone.css({top:a})}).bind("mouseup.st",
function(){var b;a(document).unbind("mousemove.st mouseup.st");e.removeAttr("target").css("opacity","");$clone.remove();c.remove();i&&(b=a(i.element),b[i.state](e),h.trigger("after-drag.st"))})}});return this};a("table.sortable").xeSortableTable()});
/* NHN (developers@xpressengine.com) */
jQuery(function($){
// iSO mobile device toolbar remove
window.top.scrollTo(0,0);
// Skip to content
$('.x .skipNav>a').click(function(){
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
});
// TARGET toggle
$('.x [data-toggle]').click(function(){
var $this = $(this);
var $target = $($this.attr('data-toggle'));
$target.toggle();
if($target.is(':visible') && !$target.find('a,input,button,textarea,select').length){
$target.attr('tabindex','0').focus();
} else if($target.is(':visible') && $target.find('a,input,button,textarea,select').length) {
$target.find('a,input,button,textarea,select').eq(0).focus();
} else {
$this.focus();
}
return false;
});
// TARGET show
$('.x [data-show]').click(function(){
$($(this).attr('data-show')).show().attr('tabindex','0').focus();
return false;
});
// TARGET hide
$('.x [data-hide]').click(function(){
var $this = $(this);
$($this.attr('data-hide')).hide();
$this.focus();
return false;
});
// Tab Navigation
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
var $this = $(this);
$this.parent('li').addClass('x_active').siblings().removeClass('x_active');
$this.closest('.x_nav-tabs').next('.x_tab-content').find($this.attr('href')).addClass('x_active').show().siblings().removeClass('x_active').hide();
return false;
});
// GNB Height 100%
var $xBody = $('.x>.body');
var $xContent = $xBody.find('>.content');
var $xGnb = $xBody.find('>.gnb');
var $xGnb_li = $xGnb.find('>ul>li');
$(window).resize(function(){
setTimeout(function(){
if($(window).width() <= 980 || $(window).width() > 1240){
$xBody.removeClass('wide');
} else {
$xBody.addClass('wide');
}
}, 100);
}).resize();
// GNB Click toggle
$xGnb_li.find('ul').prev('a')
.bind('click focus', function(){
var $this = $(this);
// Submenu toggle
$xGnb_li.not($this.parent('li')).removeClass('open');
$(this).parent('li').toggleClass('open');
$xGnb.trigger('mouseenter'); // GNB Hover
return false;
});
// GNB Hover toggle
function contentBugFix(){ // Chrome browser rendering bug fix
$xContent.width('99.99%');
setTimeout(function(){
$xContent.removeAttr('style');
}, 0);
}
$xGnb
.mouseenter(function(){ // Mouseenter
if($(window).width() >= 980){
$xBody.removeClass('wide');
contentBugFix();
}
})
.mouseleave(function(){ // Mouseleave
if($(window).width() >= 980 && $(window).width() < 1240){
$xBody.addClass('wide');
contentBugFix();
}
});
// GNB Mobile Toggle
$xGnb.find('>a[href="#gnbNav"]').click(function(){
$(this).parent('.gnb').toggleClass('open');
return false;
});
// GNB Close
$xGnb
.prepend('<button type="button" class="close before" />')
.append('<button type="button" class="close after" />');
$xGnb.find('>.close').focus(function(){
$xBody.addClass('wide');
contentBugFix();
});
// Multilingual
var $mlCheck = $('.x .multilingual>label>input[type="checkbox"]');
function multilingual(){
$mlCheck.each(function(event){
var $this = $(this);
var $label = $this.parent('label'); // Checkbox label
var $input = $label.siblings('input[type="text"]:first');
var $select = $label.siblings('select:first');
var $fieldset = $this.closest('.multilingual').siblings('.multilingual_item:first'); // Multilingual list
if($this.is(':checked')){
$input.hide();
$select.show();
$label.addClass('checked');
$fieldset.show();
} else {
$input.show();
$select.hide();
$label.removeClass('checked');
$fieldset.hide();
}
});
}
multilingual();
$mlCheck.change(multilingual);
// Check All
$('.x th>input[type="checkbox"]')
.change(function() {
var $this = $(this), name = $this.data('name');
$this.closest('table')
.find('input:checkbox')
.filter(function(){
var $this = $(this);
return !$this.prop('disabled') && (($this.attr('name') == name) || ($this.data('name') == name));
})
.prop('checked', $this.prop('checked'))
.end()
.end()
.trigger('update.checkbox', [name, this.checked]);
});
// Pagination
$('.x .x_pagination .x_disabled, .x .x_pagination .x_active').click(function(){
return false;
});
// Section Toggle
$('.x .section>h1').append('<button type="button" class="snToggle x_icon-chevron-up">Toggle this section</button>');
$('.x .section>h1>.snToggle').click(function(){
var $this = $(this);
var $section = $this.closest('.section');
if(!$section.hasClass('collapse')){
$section.addClass('collapse').children('h1:first').siblings().hide();
$this.removeClass('x_icon-chevron-up').addClass('x_icon-chevron-down');
} else {
$section.removeClass('collapse').children('h1:first').siblings().show();
$this.removeClass('x_icon-chevron-down').addClass('x_icon-chevron-up');
}
});
});
// Modal Window
jQuery(function($){
var ESC = 27;
$.fn.xeModalWindow = function(){
this
.not('.xe-modal-window')
.addClass('xe-modal-window')
.each(function(){
$( $(this).attr('href') ).addClass('x').hide();
})
.click(function(){
var $this = $(this), $modal, $btnClose, disabled;
// get and initialize modal window
$modal = $( $this.attr('href') );
if(!$modal.parent('body').length) {
$btnClose = $('<button type="button" class="x_close">&times;</button>');
$btnClose.click(function(){ $modal.data('anchor').trigger('close.mw') });
$modal.find('[data-hide]').click(function(){ $modal.data('anchor').trigger('close.mw') });
$('body').append('<div class="x_modal-backdrop"></div>').append($modal); // append background
$modal.prepend($btnClose); // prepend close button
}
// set the related anchor
$modal.data('anchor', $this);
if($modal.data('state') == 'showing') {
$this.trigger('close.mw');
} else {
$this.trigger('open.mw');
}
return false;
})
.bind('open.mw', function(){
var $this = $(this), before_event, $modal, duration;
// before event trigger
before_event = $.Event('before-open.mw');
$this.trigger(before_event);
// is event canceled?
if(before_event.isDefaultPrevented()) return false;
// get modal window
$modal = $( $this.attr('href') );
// get duration
duration = $this.data('duration') || 'fast';
// set state : showing
$modal.data('state', 'showing');
// workaroud for IE6
$('html,body').addClass('modalContainer');
// after event trigger
function after(){ $this.trigger('after-open.mw') };
$(document).bind('keydown.mw', function(event){
if(event.which == ESC) {
$this.trigger('close.mw');
return false;
}
});
$modal
.fadeIn(duration, after)
.find('button.x_close:first').focus();
$('.x_modal-backdrop').show();
})
.bind('close.mw', function(){
var $this = $(this), before_event, $modal, duration;
// before event trigger
before_event = $.Event('before-close.mw');
$this.trigger(before_event);
// is event canceled?
if(before_event.isDefaultPrevented()) return false;
// get modal window
$modal = $( $this.attr('href') );
// get duration
duration = $this.data('duration') || 'fast';
// set state : hiding
$modal.data('state', 'hiding');
// workaroud for IE6
$('html,body').removeClass('modalContainer');
// after event trigger
function after(){ $this.trigger('after-close.mw') };
$modal.fadeOut(duration, after);
$('.x_modal-backdrop').hide();
$this.focus();
});
};
$('a.modalAnchor').xeModalWindow();
$('div.x_modal').addClass('x').hide();
});
// Content Toggler
jQuery(function($){
var dont_close_this_time = false;
var ESC = 27;
$.fn.xeContentToggler = function(){
this
.not('.xe-content-toggler')
.addClass('xe-content-toggler')
.each(function(){
var $anchor = $(this); $layer = $($anchor.attr('href'));
$layer.hide()
.not('.xe-toggling-content')
.addClass('xe-toggling-content')
.mousedown(function(event){ dont_close_this_time = true })
.focusout(function(event){
setTimeout(function(){
if(!dont_close_this_time && !$layer.find(':focus').length && $layer.data('state') == 'showing') $anchor.trigger('close.tc');
dont_close_this_time = false;
}, 1);
});
})
.click(function(){
var $this = $(this), $layer;
// get content container
$layer = $( $this.attr('href') );
// set anchor object
$layer.data('anchor', $this);
if($layer.data('state') == 'showing') {
$this.trigger('close.tc');
} else {
$this.trigger('open.tc');
}
return false;
})
.bind('open.tc', function(){
var $this = $(this), $layer, effect, duration;
// get content container
$layer = $( $this.attr('href') );
// get effeect
effect = $this.data('effect');
// get duration
duration = $this.data('duration') || 'fast';
// set state : showing
$layer.data('state', 'showing');
// before event trigger
$this.trigger('before-open.tc');
dont_close_this_time = false;
// When mouse button is down or when ESC key is pressed close this layer
$(document)
.unbind('mousedown.tc keydown.tc')
.bind('mousedown.tc keydown.tc',
function(event){
if(event) {
if(event.type == 'keydown' && event.which != ESC) return true;
if(event.type == 'mousedown') {
var $t = $(event.target);
if($t.is('html,.tgAnchor,.tgContent') || $layer.has($t).length) return true;
}
}
$this.trigger('close.tc');
return false;
}
);
// triggering after
function trigger_after(){ $this.trigger('after-open.tc') }
switch(effect) {
case 'slide':
$layer.slideDown(duration, trigger_after);
break;
case 'slide-h':
var w = $layer.css({'overflow-x':'',width:''}).width();
$layer
.show()
.css({'overflow-x':'hidden',width:'0px'})
.animate({width:w}, duration, function(){ $layer.css({'overflow-x':'',width:''}); trigger_after(); });
break;
case 'fade':
$layer.fadeIn(duration, trigger_after);
break;
default:
$layer.show();
$this.trigger('after-open.tc');
}
})
.bind('close.tc', function(){
var $this = $(this), $layer, effect, duration;
// unbind document's event handlers
$(document).unbind('mousedown.tc keydown.tc');
// get content container
$layer = $( $this.attr('href') );
// get effeect
effect = $this.data('effect');
// get duration
duration = $this.data('duration') || 'fast';
// set state : hiding
$layer.data('state', 'hiding');
// before event trigger
$this.trigger('before-close.tc');
// triggering after
function trigger_after(){ $this.trigger('after-close.tc') };
// close this layer
switch(effect) {
case 'slide':
$layer.slideUp(duration, trigger_after);
break;
case 'slide-h':
$layer.animate({width:0}, duration, function(){ $layer.hide(); trigger_after(); });
break;
case 'fade':
$layer.fadeOut(duration, trigger_after);
break;
default:
$layer.hide();
$this.trigger('after-close.tc');
}
});
return this;
};
$('a.tgAnchor').xeContentToggler();
});
// Sortable table
jQuery(function($){
var
dragging = false,
$holder = $('<tr class="placeholder"><td>&nbsp;</td></tr>');
$.fn.xeSortableTable = function(){
this
.not('.xe-sortable-table')
.addClass('xe-sortable-table')
.delegate('button.dragBtn', 'mousedown.st', function(event){
var $this, $tr, $table, $th, height, width, offset, position, offsets, i, dropzone, cols, ofspar;
if(event.which != 1) return;
$this = $(this);
$tr = $this.closest('tr');
$table = $this.closest('table');
ofspar = $table.get(0).offsetParent;
height = $tr.height();
width = $tr.width();
// before event trigger
before_event = $.Event('before-drag.st');
$table.trigger(before_event);
// is event canceled?
if(before_event.isDefaultPrevented()) return false;
position = {x:event.pageX, y:event.pageY};
offset = getOffset($tr.get(0), ofspar);
$clone = $tr.attr('target', true).clone(true).appendTo($table);
// get colspan
cols = ($th=$table.find('thead th')).length;
$th.filter('[colspan]').attr('colspan', function(idx,attr){ cols += attr - 1; });
$holder.find('td').attr('colspan', cols);
// get offsets of all list-item elements
offsets = [];
$table.find('tbody>tr:not([target],.sticky,:hidden)').each(function() {
var $this = $(this), o;
o = getOffset(this, ofspar);
offsets.push({top:o.top, bottom:o.top+$this.height(), $item:$this});
});
$clone
.addClass('draggable')
.css({
position: 'absolute',
opacity : .6,
width : width,
height : height,
left : offset.left,
top : offset.top,
zIndex : 100
});
// Set a place holder
$holder
.css({
position:'absolute',
opacity : .6,
width : width,
height : '10px',
left : offset.left,
top : offset.top,
backgroundColor : '#bbb',
overflow: 'hidden',
zIndex : 99
})
.appendTo($table);
$tr.css('opacity', .6);
$(document)
.unbind('mousedown.st mouseup.st')
.bind('mousemove.st', function(event) {
var diff, nTop, item, i, c, o;
dropzone = null;
diff = {x:position.x-event.pageX, y:position.y-event.pageY};
nTop = offset.top - diff.y;
for(i=0,c=offsets.length; i < c; i++) {
o = offsets[i];
if( (i && o.top > nTop) || ((i < c-1) && o.bottom < nTop)) continue;
dropzone = {element:o.$item};
if(o.top > nTop - 12) {
dropzone.state = 'before';
$holder.css('top', o.top-5);
} else {
dropzone.state = 'after';
$holder.css('top', o.bottom-5);
}
}
$clone.css({top:nTop});
})
.bind('mouseup.st', function(event) {
var $dropzone;
dragging = false;
$(document).unbind('mousemove.st mouseup.st');
$tr.removeAttr('target').css('opacity', '');
$clone.remove();
$holder.remove();
if(!dropzone) return;
$dropzone = $(dropzone.element);
// use the clone for animation
$dropzone[dropzone.state]($tr);
$table.trigger('after-drag.st');
});
})
return this;
};
$('table.sortable').xeSortableTable();
function getOffset(elem, offsetParent) {
var top = 0, left = 0;
while(elem && elem != offsetParent) {
top += elem.offsetTop;
left += elem.offsetLeft;
elem = elem.offsetParent;
}
return {top:top, left:left};
}
});