JavaScript «Toaster Popup» классно работает в FireFox, не работает в IE - PullRequest
Новая
       7

JavaScript «Toaster Popup» классно работает в FireFox, не работает в IE

0 голосов
/ 24 июня 2010

РЕШЕНО: СМ. "ИСПРАВЛЕННОЕ РЕШЕНИЕ" (ниже)

--------------------------------- ОРИГИНАЛЬНЫЙ ТЕКСТ --------- ------------------

Я создал всплывающее окно JavaScript для отображения информации об отдельной строке. Он отлично работает в FireFox ... но в IE он загорелся.

... предложения и помощь приветствуются.

То, что я думаю, терпит неудачу: Я думаю, что я объявил класс "Toaster" неправильным, и IE не распознает его как массив. Таким образом, когда я вызываю «PopUp (clientId)» на тостере, он выходит из строя, потому что не пересекает массив.

Кроме того, FireFox правильно заполняет массив в функции «готовность» документов ... но я не уверен, что IE делает это.

Наконец, так как я все еще новичок в JavaScript, это (очевидно) может быть КАК я создаю классы (также).

ГДЕ ОШИБКА: Код не выполняется, потому что значение "target" равно нулю. Эта переменная равна нулю, потому что IE, похоже, не пересекает Toaster (массив). 

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 Ответ

1 голос
/ 24 июня 2010

Попытка "подкласса" массива с использованием его в качестве объекта-прототипа для вашего класса "Toaster" не будет работать в IE по любой причине. Если вы отладите метод «Add», вы заметите, что вызовы «push» не кажутся неудачными, но они также не меняют длину тостера.

Попытка заставить Javascript действовать как хороший вежливый объектно-ориентированный язык чревата опасностью, особенно когда вы пытаетесь обращаться с нативными типами (такими как Array), как будто они также реализованы в Javascript.

Я бы просто сохранил массив как часть "Тостера".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...