为什么MooTools在创建Fx.Slide实例时删除边距?
我有一个<div>
与CSS规则margin: 0 auto;
和我使用MooTools在必要时滑动它。为什么MooTools在创建Fx.Slide实例时删除边距?
看起来,仅仅是Fx.Slide
对象的实例化就删除了我元素上的边距。也就是说,虽然元素用于在父级中居中,但它现在是左对齐的。只是仅此行似乎这样做:
var slide = new Fx.Slide('mydiv');
我可以做这样的事情抵消这种效应:
var slide = new Fx.Slide('mydiv');
$('mydiv').setStyle('margin', '0 auto');
但是,这是原油和我当然不希望有这样做每次遇到这种情况。甚至更多,我想知道,为什么 MooTools首先删除边距?有没有我不知道的选项,我忽略了一些参数?请让我知道,因为我是MooTools的新手。虽然我很快发现它的应用程序远远超出了jQuery(至少对于我的目的而言),但我发现它的文档比语法冗长得多。
从Fx.Slide.js
:
Fx.Slide = new Class({
/* .. */
initialize: function(element, options){
this.addEvent('complete', function(){
this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0);
if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper);
}, true);
this.element = this.subject = document.id(element);
this.parent(options);
var wrapper = this.element.retrieve('wrapper');
this.wrapper = wrapper || new Element('div', {
styles: $extend(this.element.getStyles('margin', 'position'), {overflow: 'hidden'})
}).wraps(this.element);
this.element.store('wrapper', this.wrapper).setStyle('margin', 0);
this.now = [];
this.open = true;
},
/* .. */
正如你所看到的,Fx.Slide
需要应用到它的元素(this.element
),把它包装在包装DIV(this.wrapper
)与overflow: hidden
和元素的margin
和position
然后删除元素的margin
。
因此删除margin
是有意设计的。我不明白的是为什么保证金没有转移到包装上。您可能会在使用!important
的父元素中修改纯DIV,并阻止Fx.Slide
正确传输属性。
您是否正在使用MooTools 1.2.3和最新版本的MooTools More(1.2.3.1)?
此外,要使Fx.Slide
正常工作,您的页面需要处于标准模式。作为标记中的第一件事,您是否有XHTML或HTML(严格或过渡)文档类型? (没有XML序言)。最坏的情况下,如果仍然无法正常工作,使用以下命令:
$('mydiv').getParent().setStyle('margin', '0 auto');
MooTools是伟大的JavaScript框架,继续努力,我个人觉得it is way more powerful than jQuery(不包括jQuery有一个庞大的社区的事实)。不幸的是,More
包(这与jQuery的插件相当)的一致性在某些方面有些欠缺。
我正在使用这两个版本,是的。几小时前刚刚下载了它们。 我的页面是HTML 5(只是),但我只是将它切换到XHTML Transitional来查看结果,它仍然是相同的结果。 – 2009-08-08 16:28:27
你有一些影响父元素的纯DIV的CSS吗? – 2009-08-08 16:31:48
父div也是0 auto,并且该div的父项是body,它的margin设置为0.但这似乎并未影响它,因为我刚删除了该声明并没有任何更改。除非我理解构造函数是错误的,否则它不明确地告诉包装器没有边距?正如你所问,为什么不是转移的保证金? – 2009-08-08 16:36:44