代码之家  ›  专栏  ›  技术社区  ›  Prisoner ZERO

javascript“烤面包机弹出”类在firefox中非常有用,在ie中失败

popup inheritance class jquery javascript
  •  0
  • Prisoner ZERO  · 技术社区  · 15 年前

    解决了的: 参见“校正溶液”区域(如下)

    原文

    我已经创建了一个javascript烤面包机弹出窗口来显示关于单个行的信息。它在火狐中很好用……但在IE中会着火。

    …感谢您的建议和帮助。

    我认为失败的是: 我想我说的“烤面包机”类是错的。因此,当我在烤面包机上调用“popup(clientid)”时,它会失败,因为它不会遍历数组。

    另外,firefox在documents“ready”函数中正确地填充了数组……但我不确定ie是否这样做。

    最后,由于我还不熟悉JavaScript(显然),它可能是我创建类的方式(也是)。

    失败的地方: 代码失败,因为“target”的值为空。此变量为空,因为ie似乎没有遍历烤面包机(数组)。 

    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();
}

    完整代码集: 谢谢你的帮助… 

    <!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>
    1 回复  |  直到 15 年前
        1
  •  1
  •   Pointy    15 年前

    通过将数组用作“Toaster”类的原型对象来“子类”数组的尝试在IE中不起作用,不管是什么原因。如果调试“add”方法,您会注意到对“push”的调用似乎不会失败,但它们也不会更改烤面包机的长度。

    尝试让javascript像一种礼貌的面向对象语言一样运行是充满危险的,特别是当您尝试将本机类型(如数组)视为也在javascript中实现时。

    我只需要在“烤面包机”的某个地方放一排面包。

    推荐文章
    Fernando Chu  ·  一个变量有多个可能的类?[关闭]
    1 年前
    Donald Duck user7392049  ·  这种比较似乎是无意的,因为类型“This”和“Derived”没有重叠
    1 年前
    Amaterastis  ·  基类接受子类和内部子类的模板参数
    1 年前
    Song  ·  关于python中的继承,为什么人们不在子类中写“self”?[副本]
    1 年前
    Rishab Negi  ·  这个关键字在抽象类中是如何工作的
    1 年前
    dEmigOd  ·  类层次结构中的运算符重载解析
    1 年前
    TableTopRug  ·  如何从Kotlin中的密封类继承?
    1 年前
    Gautzilla  ·  Pycharm静态分析不能像我希望的那样推断子类类型
    1 年前
    hasdrubal  ·  抽象基类函数指针python
    1 年前
    Josh  ·  通过反思访问孩子的财产
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号