Using jquery with OO Javascript
Using jquery with OO Javascript
我正在尝试创建一个jquery弹出脚本OO样式。我这样做是因为我想用更多的jquery/javascript扩展这段代码,而不会失去监督。我收到的错误是Object #<HTMLDivElement> has no method 'centerPopup'
和Resource interpreted as Script but transferred with MIME type text/x-c:
我是OO javascript的新手,但在OO PHP有相当的经验
function popup(){
var popupStatus = 0;
$(document).ready(function () {
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
$("#backgroundPopup").click(function()
{
this.disablePopup();
});
$(document).keypress(function(e)
{
if(e.keyCode==27 && popupStatus==1)
{
this.disablePopup();
}
});
});
this.loadPopup = function (){
if(this.popupStatus==0)
{
$("#backgroundPopup").css(
{
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
this.popupStatus = 1;
}
}
this.disablePopup = function (){
if(this.popupStatus==1)
{
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
this.popupStatus = 0;
}
}
this.centerPopup = function (){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css(
{
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css(
{
"height": windowHeight
});
}
}
var popup = new popup()
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/popup.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/popup2.js" type="text/javascript"></script>
</head>
<body>
<center>
<div id="button"><input type="submit" value="Popup!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
this
不是你真正想的那样。它不是popup
的实例,而是DOM元素(#button
)。您可以通过在类的开头保存实例上的引用来修复此问题:
function popup(){
var self = this;
this.popupStatus = 0; // you should use `this` here
$(document).ready(function () {
$("#button").click(function()
{
self.centerPopup();
self.loadPopup();
});
/* ... snip ... */
相关文章:
- OO JavaScript - 避免自我 = 这个
- 写作的好处是什么;“功能性”;与OO相反的Javascript
- OO Javascript/jQuery事件点击处理程序
- OO Javascript子对象对父属性的访问
- OO JavaScript circumventing .call
- OO Javascript 调试 - 使用传输进行图像交换
- JavaScript OO 编程语法帮助菜鸟
- 如何在 ASP-Classic 或 WSH 环境中使用 VBScript 中的 Javascript OO 类
- OO Javascript从同一对象的另一个方法调用方法
- javascript中的两种OO方法有什么区别
- 困惑于如何编写OO Javascript来实现简单的类模式
- OO Javascript回调:我做得对吗
- 进行OO javascript回调时的作用域
- Javascript OO键值对访问器
- 带有侦听器回调的JavaScript OO类
- javascript OO如何用一些JSON变量更新self参数
- JavaScript OO Design
- 访问实例方法时出现的JavaScript OO问题
- Phonegap Javascript OO, this reference
- Javascript OO引用这个