1
我有一個網站，其中大部分依賴於JQuery和JavaScript。我在MooTools中找到了一個登錄表單，我想實現它，但似乎有問題。 我的頭頁面就像是以下幾點：JQuery與Mootools如何工作togather？
<!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 sign問題，因爲它使用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 [email protected]
// -------------------------------------------------
// 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);
你應該真的嘗試找到類似的jQuery登錄表單實現。根本沒有意義，只爲了包含MooTools。 – mekwall
另外，爲什麼要使用XHTML？這是古老而過時的。只要用'<！DOCTYPE html>'去，你就可以去;） – mekwall
我不能老闆想要這個，他固執己見:)。我沒有很好的東西。 – Basel