我有一个大部分依赖 JQuery 和 JavaScript 的网站。我在 MooTools 中找到了一个登录表单，我想实现它，但它似乎有问题。我的标题页如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="tr" >
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools-core-1.4.5.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script language="javascript" type="text/ecmascript">
// Now you can use $ safely in this closure
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
document.id('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
</head>
我收到的错误消息在 mooSlide2-moo12.js 文件的某行中：
Uncaught TypeError: Object [object Object] has no method 'setStyle'
如何解决这个问题我使用了 1.4.5 v 的 MooTools，它没有 doller 符号问题，因为它使用的是 document.id。任何人都可以给我一个线索吗？
mooSlide2-moo12.js：
// -------------------------------------------------
// artViper's mooSlide 3.2.1 revamp for mooTools 1.2
// -------------------------------------------------
// if you make significant changes, extensiosn etc
// please drop us a copy at admin@artviper.net
// -------------------------------------------------
// more mootools based stuff can be found at:
// ------------- www.artviper.net ------------------
var mooSlide2 = new Class({
options: {
slideSpeed: 500,
fadeSpeed: 500,
effects: Fx.Transitions.linear,
toggler: "myToggle",
contentID: null,
removeOnClick: true,
from: 'top',
opacity: 1,
height: 0,
isOpen: 0,
executeFunction: null,
loadExternal: null,
request: null
},
initialize: function(options){
this.setOptions(options);
if(options['toggler']) this.toggler = options['toggler'];
if(options['content']) this.content = $(options['content']);
if(options['height']) this.height = options['height'];
if(options['opacity']) this.opacity = options['opacity'];
if(options['slideSpeed']) this.slideSpeed = options['slideSpeed'];
if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
if(options['close']) this.close = options['close'];
if(options['from']) this.from = options['from'];
if(options['executeFunction']) this.executeFunction = options['executeFunction'];
if(options['loadExternal']) this.loadExternal = options['loadExternal'];
if(this.close){
$(this.content).addEvent('click',this.clearit.bindWithEvent(this));
}
if(options['effects']){
this.effects = options['effects'];
}else{
this.effects = Fx.Transitions.linear;
}
this.content.setStyle('opacity','1');
this.content.setStyle('visibility','hidden');
this.content.setStyle('display','none'); // hide panel on page load
$(this.content).setStyle('z-index','5000');
$(this.toggler).addEvent('click',this.toggle.bindWithEvent(this));
},
clearit: function(){
var myEffects = new Fx.Morph(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
myEffects.start({
'opacity': [1, 0]
});;
this.isOpen = 0;
var p = new Function(this.executeFunction);
p();
},
toggle: function(e){
e = new Event(e).stop();
var top = window.getHeight().toInt() + window.getScrollTop().toInt();
if(!this.isOpen){
$(this.content).setStyle('position','absolute');
$(this.content).setStyle('top',top);
$(this.content).setStyle('height',this.height);
$(this.content).setStyle('visibility','visible');
$(this.content).setStyle('display','block');
$(this.content).setStyle('opacity','1');
$(this.content).setStyle('left','25%');
var end;
if(this.from == "top"){
var myEffect = new Fx.Morph(this.content, {duration: this.slideSpeed, transition: this.effects});
var totalEnd = end+this.height;
myEffect.start({
'top': ['-200', '100']
});
this.isOpen = 1;
}
}else{
var myEffects = new Fx.Morph(this.content, {duration: this.fadeSpeed, transition: Fx.Transitions.linear});
myEffects.start({
'opacity': [1, 0]
});
this.isOpen = 0;
var p = new Function(this.executeFunction);
p();
}
}
})
mooSlide2.implement(new Options);
mooSlide2.implement(new Events);