JavaScript";“烤面包机弹出窗口”;类在FireFox中工作非常出色在IE中失败
已解决:请参见“已纠正的解决方案”区域(下方) -------------------------------------原文---------------------- 我已经创建了一个JavaScript烤面包机弹出窗口来显示关于单个行的信息。它在FireFox中工作得很好,但在IE中却失败了 …感谢您的建议和帮助 我认为失败的地方: 我想我把“Toaster”类声明错了,IE不能将其识别为数组。因此,当我在烤面包机上调用“PopUp(clientId)”时,它会失败,因为它不会遍历数组 此外,FireFox在documents“ready”函数中正确填充了数组……但我不确定IE是否正在这样做 最后,由于我还不熟悉JavaScript,所以(显然)我也可以这样创建类 失败的地方: 代码失败,因为“target”的值为null。此变量为null,因为IE似乎没有遍历烤面包机(数组) 完整的代码集: 谢谢你的帮助JavaScript";“烤面包机弹出窗口”;类在FireFox中工作非常出色在IE中失败,javascript,jquery,class,inheritance,popup,Javascript,Jquery,Class,Inheritance,Popup,已解决:请参见“已纠正的解决方案”区域(下方) -------------------------------------原文---------------------- 我已经创建了一个JavaScript烤面包机弹出窗口来显示关于单个行的信息。它在FireFox中工作得很好,但在IE中却失败了 …感谢您的建议和帮助 我认为失败的地方: 我想我把“Toaster”类声明错了,IE不能将其识别为数组。因此,当我在烤面包机上调用“PopUp(clientId)”时,它会失败,因为它不会遍历数组 此
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="../Includes/JavaScript/jQuery/Core/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
.toast
{
width: 100%;
position: relative;
}
.toastBorder
{
width: 100%;
position: absolute;
border-radius-topright:.5em;
border-radius-topleft:.5em;
-moz-border-radius-topright:.5em;
-moz-border-radius-topleft:.5em;
-webkit-border-radius-topright:.5em;
-webkit-border-radius-topleft:.5em;
background-color: #FFFFCC;
border: 1px solid #969696;
border-bottom-color: White;
display:none;
height: 0;
bottom: 0;
}
.toastForm
{
display:none;
}
</style>
<script type="text/javascript">
// CLASS DEFINITION:
function Toast(clientId, height, speed) {
// PROPERTIES
this.IsUp = false;
this.IsDown = false;
this.ClientId = clientId;
this.Height = height;
this.Speed = speed;
// METHODS
this.PopUp = function() {
if (this.IsUp) { return; }
this.IsUp = true;
this.IsDown = false;
var speed = this.Speed;
var action = '+=' + this.Height + "px";
// Border
jQuery('#' + this.ClientId).children('div.toastBorder').fadeIn('fast', function() {
jQuery(this).animate({ height: action }, speed, function() {
// Form
jQuery(this).children('div.toastForm').fadeIn('fast');
});
});
}
this.PopDown = function() {
if (this.IsDown) { return; }
this.IsUp = false;
this.IsDown = true;
var speed = this.Speed;
var action = '-=' + this.Height + "px";
// Form
jQuery('#' + this.ClientId).children('div.toastBorder').children('div.toastForm').fadeOut('fast');
// Border
jQuery('#' + this.ClientId + ' div.toastBorder').animate({ height: action }, speed, function() {
jQuery(this).fadeOut('fast');
});
}
}
// CLASS DEFINITION:
function Toaster() {
// PROPERTIES
// METHODS
this.PopUp = function(clientId) {
var target = null;
jQuery.each(this, function() {
// Hide previous
if (jQuery(this)[0].IsUp)
jQuery(this)[0].PopDown();
if (jQuery(this)[0].ClientId == clientId)
target = jQuery(this)[0];
});
// Show current
target.PopUp();
}
this.PopDown = function(clientId) {
jQuery.each(this, function() {
if (jQuery(this)[0].ClientId == clientId)
jQuery(this)[0].PopDown(); // Hide current
});
}
this.Add = function(toast) {
var found = false;
// No duplicates are allowed
jQuery.each(this, function() {
if (jQuery(this)[0].ClientId == toast.ClientId)
found = true;
});
if (!found)
this.push(toast);
}
}
// CLASS DEFINITION: Toaster inheritance
Toaster.prototype = new Array();
var myToaster;
var myToast;
// DOM EVENT: Document.Ready()
jQuery(document).ready(function() {
if (myToaster == null)
myToaster = new Toaster();
myToaster.Add(new Toast("row1", 100, 200));
myToaster.Add(new Toast("row2", 100, 200));
myToaster.Add(new Toast("row3", 100, 200));
myToaster.Add(new Toast("row4", 100, 200));
myToaster.Add(new Toast("row5", 100, 200));
// These BOTH return true in IE...
//alert(myToaster.Items instanceof Array);
//alert(myToaster instanceof Array);
// This is for the button example
if (myToast == null)
myToast = new Toast("row3", 100, 200);
});
</script>
</head>
<body>
<br />
I need help on the following:
<ul>
<li>
This works GREAT in FireFox
</li>
<li>
IE doesn't seem to recognize the Toaster class as being an array.
</li>
</ul>
<div style="width: 300;">
<label style="display:block;color: #660000;">INDIVIDUAL pieces of toast work fine in IE:</label>
<input type="button" value="Down (row 3)" onclick="myToast.PopDown();" />
<input type="button" value="Up (row 3)" onclick="myToast.PopUp();" />
</div>
<br /><br />
<label style="color: #660000">Clicking a row IS SUPPOSED TO toggle a "piece of toast" for that row.</label>
<br /><br />
<table cellpadding="0" cellspacing="0" width="500" style=" border: solid 1px black">
<tr>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row1" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row1');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row2" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row2');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row3" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row3');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row4" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row4');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row5" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row5');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
</table>
</body>
</html>
干杯
{
宽度:100%;
位置:相对位置;
}
.土司边界
{
宽度:100%;
位置:绝对位置;
右上角边界半径:.5em;
左上角边界半径:.5em;
-moz边框半径右上角:.5em;
-左上角moz边界半径:.5em;
-webkit边框半径右上角:.5em;
-webkit边框半径左上角:.5em;
背景色:#FFFFCC;
边框:1px实心#9696;
边框底色:白色;
显示:无;
身高:0;
底部:0;
}
.烤面包
{
显示:无;
}
//类别定义:
功能吐司(客户端ID、高度、速度){
//性质
this.IsUp=false;
this.IsDown=false;
this.ClientId=ClientId;
这个。高度=高度;
这个。速度=速度;
//方法
this.PopUp=函数(){
如果(this.IsUp){return;}
this.IsUp=true;
this.IsDown=false;
var速度=此速度;
var action='+='+this.Height+“px”;
//边界
jQuery('#'+this.ClientId).children('div.toast-border').fadeIn('fast',function(){
动画({height:action},速度,函数(){
//形式
jQuery(this).children('div.toastForm').fadeIn('fast');
});
});
}
this.PopDown=函数(){
如果(this.IsDown){return;}
this.IsUp=false;
this.IsDown=true;
var速度=此速度;
var action='-='+this.Height+“px”;
//形式
jQuery(“#”+this.ClientId)、children('div.toastBorder')、children('div.toastForm')、fadeOut('fast');
//边界
jQuery('#'+this.ClientId+'div.toastBorder')。动画({height:action},速度,函数(){
jQuery(this.fadeOut('fast');
});
}
}
//类别定义:
功能烤面包机(){
//性质
//方法
this.PopUp=函数(clientId){
var目标=null;
each(this,function()){
//隐藏以前的
if(jQuery(this)[0].IsUp)
jQuery(this)[0].poppdown();
if(jQuery(this)[0].ClientId==ClientId)
target=jQuery(this)[0];
});
//显示电流
target.PopUp();
}
this.PopDown=函数(clientId){
each(this,function()){
if(jQuery(this)[0].ClientId==ClientId)
jQuery(this)[0].poppdown();//隐藏当前
});
}
this.Add=函数(toast){
var=false;
//不允许重复
each(this,function()){
if(jQuery(this)[0].ClientId==toast.ClientId)
发现=真;
});
如果(!找到)
这个。推(吐司);
}
}
//类定义:Toaster继承
Toaster.prototype=新数组();
我的烤面包机;
var-myToast;
//DOM事件:Document.Ready()
jQuery(文档).ready(函数(){
如果(myToaster==null)
myToaster=新的Toaster();
我的烤面包机。添加(新的烤面包(“row1”,100200));
我的烤面包机。添加(新的烤面包(“row2”,100200));
我的烤面包机。添加(新的烤面包(“row3”,100200));
我的烤面包机。添加(新的烤面包(“row4”,100200));
我的烤面包机。添加(新的烤面包(“row5”,100200));
//这两者在IE中都是真的。。。
//警报(myToaster.Items数组实例);
//警报(myToaster instanceof Array);
//这是按钮示例
if(myToast==null)
myToast=新的Toast(“row3”,100200);
});
我需要以下方面的帮助:
-
这在FireFox中非常有效
-
IE似乎没有将Toaster类识别为数组。
单个烤面包片在IE中工作良好:
点击一行应该是切换该行的“一片烤面包”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="../Includes/JavaScript/jQuery/Core/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
.toast
{
width: 100%;
position: relative;
}
.toastBorder
{
width: 100%;
position: absolute;
border-radius-topright:.5em;
border-radius-topleft:.5em;
-moz-border-radius-topright:.5em;
-moz-border-radius-topleft:.5em;
-webkit-border-radius-topright:.5em;
-webkit-border-radius-topleft:.5em;
background-color: #FFFFCC;
border: 1px solid #969696;
border-bottom-color: White;
display:none;
height: 0;
bottom: 0;
}
.toastForm
{
display:none;
}
</style>
<script type="text/javascript">
// CLASS DEFINITION:
function Toast(clientId, height, speed) {
// PROPERTIES
this.IsUp = false;
this.IsDown = false;
this.ClientId = clientId;
this.Height = height;
this.Speed = speed;
// METHODS
this.PopUp = function() {
if (this.IsUp) { return; }
this.IsUp = true;
this.IsDown = false;
var speed = this.Speed;
var action = '+=' + this.Height + "px";
// Border
jQuery('#' + this.ClientId).children('div.toastBorder').fadeIn('fast', function() {
jQuery(this).animate({ height: action }, speed, function() {
// Form
jQuery(this).children('div.toastForm').fadeIn('fast');
});
});
}
this.PopDown = function() {
if (this.IsDown) { return; }
this.IsUp = false;
this.IsDown = true;
var speed = this.Speed;
var action = '-=' + this.Height + "px";
// Form
jQuery('#' + this.ClientId).children('div.toastBorder').children('div.toastForm').fadeOut('fast');
// Border
jQuery('#' + this.ClientId + ' div.toastBorder').animate({ height: action }, speed, function() {
jQuery(this).fadeOut('fast');
});
}
}
// CLASS DEFINITION:
function Toaster() {
// PROPERTIES
// METHODS
this.PopUp = function(clientId) {
var target = null;
jQuery.each(this, function() {
// Hide previous
if (jQuery(this)[0].IsUp)
jQuery(this)[0].PopDown();
if (jQuery(this)[0].ClientId == clientId)
target = jQuery(this)[0];
});
// Show current
target.PopUp();
}
this.PopDown = function(clientId) {
jQuery.each(this, function() {
if (jQuery(this)[0].ClientId == clientId)
jQuery(this)[0].PopDown(); // Hide current
});
}
this.Add = function(toast) {
var found = false;
// No duplicates are allowed
jQuery.each(this, function() {
if (jQuery(this)[0].ClientId == toast.ClientId)
found = true;
});
if (!found)
this.push(toast);
}
}
// CLASS DEFINITION: Toaster inheritance
Toaster.prototype = new Array();
var myToaster;
var myToast;
// DOM EVENT: Document.Ready()
jQuery(document).ready(function() {
if (myToaster == null)
myToaster = new Toaster();
myToaster.Add(new Toast("row1", 100, 200));
myToaster.Add(new Toast("row2", 100, 200));
myToaster.Add(new Toast("row3", 100, 200));
myToaster.Add(new Toast("row4", 100, 200));
myToaster.Add(new Toast("row5", 100, 200));
// These BOTH return true in IE...
//alert(myToaster.Items instanceof Array);
//alert(myToaster instanceof Array);
// This is for the button example
if (myToast == null)
myToast = new Toast("row3", 100, 200);
});
</script>
</head>
<body>
<br />
I need help on the following:
<ul>
<li>
This works GREAT in FireFox
</li>
<li>
IE doesn't seem to recognize the Toaster class as being an array.
</li>
</ul>
<div style="width: 300;">
<label style="display:block;color: #660000;">INDIVIDUAL pieces of toast work fine in IE:</label>
<input type="button" value="Down (row 3)" onclick="myToast.PopDown();" />
<input type="button" value="Up (row 3)" onclick="myToast.PopUp();" />
</div>
<br /><br />
<label style="color: #660000">Clicking a row IS SUPPOSED TO toggle a "piece of toast" for that row.</label>
<br /><br />
<table cellpadding="0" cellspacing="0" width="500" style=" border: solid 1px black">
<tr>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
<td align="center" style="border-bottom: solid 1px black;">
Header
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row1" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row1');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row2" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row2');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row3" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row3');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row4" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row4');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
<div id="row5" class="toast">
<div class="toastBorder">
<div align="center" class="toastForm">
<br />
Hello
<br /><br /><br /><br /><br />
</div>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr onclick="myToaster.PopUp('row5');">
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
<td align="center">
Data
</td>
</tr>
</table>
</body>
</html>
// CLASS DEFINITION:
function Toast(clientId, maxHeight, speed) {
// PROPERTIES
this.ClientId = clientId;
this.MaxHeight = maxHeight;
this.Speed = speed;
// METHODS
this.IsUp = function() {
return (jQuery('#' + this.ClientId).children().height() > 0) ? true : false;
}
this.PopUp = function() {
if (this.IsUp()) { return; }
var speed = this.Speed;
var action = '+=' + this.MaxHeight + "px";
// Border
jQuery('#' + this.ClientId).children('div.toastBorder').fadeIn('fast', function() {
jQuery(this).animate({ height: action }, speed, function() {
// Form
jQuery(this).children('div.toastForm').fadeIn('fast');
});
});
this.IsUp(true);
}
this.PopDown = function() {
if (!this.IsUp()) { return; }
var speed = this.Speed;
var action = '-=' + this.MaxHeight + "px";
// Form
jQuery('#' + this.ClientId).children('div.toastBorder').children('div.toastForm').fadeOut('fast');
// Border
jQuery('#' + this.ClientId).children('div.toastBorder').animate({ height: action }, speed, function() {
jQuery(this).fadeOut('fast');
});
this.IsUp(false);
}
}
// CLASS DEFINITION:
function Toaster() {
// PROPERTIES
this.Items = new Array();
// METHODS
this.PopUp = function(clientId) {
var target = null;
jQuery.each(this.Items, function() {
if (jQuery(this)[0].ClientId != clientId) {
if (jQuery(this)[0].IsUp()) {
jQuery(this)[0].PopDown(); // Hide previous
}
}
if (jQuery(this)[0].ClientId == clientId) {
target = jQuery(this)[0];
}
});
if (target != null) {
if (target.IsUp() == false)
target.PopUp();
}
}
this.PopDown = function(clientId) {
jQuery.each(this.Items, function() {
if (jQuery(this)[0].ClientId == clientId)
jQuery(this)[0].PopDown(); // Hide current
});
}
this.Add = function(toast) {
var found = false;
// No duplicates are allowed
jQuery.each(this.Items, function() {
if (jQuery(this.Items)[0].ClientId == toast.ClientId)
found = true;
});
if (!found)
this.Items.push(toast);
}
}
var myToaster;
var myToast;
// DOM EVENT: Document.Ready()
$j(document).ready(function() {
if (myToaster == null)
myToaster = new Toaster();
myToaster.Add(new Toast("row1", 125, 200));
myToaster.Add(new Toast("row2", 125, 200));
myToaster.Add(new Toast("row3", 125, 200));
myToaster.Add(new Toast("row4", 125, 200));
myToaster.Add(new Toast("row5", 125, 200));
});
</script>