jQuery .load () - угловой плагин не работает в IE - Firefox в порядке - PullRequest
Новая
       18

jQuery .load () - угловой плагин не работает в IE - Firefox в порядке

0 голосов
/ 19 января 2011

У меня есть две простые страницы, которые я использую для тестирования.

На моей первой странице я использую $.load() для загрузки div со второй страницы.

Обе страницысодержит плагин для прохождения поворотовЕсли я загружаю первую страницу, которая загружает div со второй страницы, поворот не работает.Однако, если я сам загружаю вторую страницу, поворот работает, так что это связано с $ .load ().

Вот код со страницы 1: 

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#load").load('testLoadCornering2.aspx #loadMe');   
            });
        </script>

        <script src="resources/js/curvycorners.js" type="text/javascript"></script>

        <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

        <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="load" class="BWTable">
        </div>
        </form>
    </body>
    </html>

Вы видитестраница пытается загрузить второй div.

И вторая страница: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script src="resources/js/curvycorners.js" type="text/javascript"></script>

    <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>
    </form>
</body>
</html>

И CSS, который он использует для округления (вместе с плагином закругленных углов): 

 background-image: url(         '../../images/wp_form2.gif' );
 border: solid 1px #000000;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: white;
 -moz-border-radius: 10px; /* Rounded corners plugin */
 -webkit-border-radius: 10px; /* Rounded corners plugin */

В Firefox это работает нормально - но в IE (особенно в версии 8, которую я пробовал) углы никогда не закругляются.

Повторим, вручную переходя на вторую страницу в углах IE 8правильно, только когда используется метод .load ().

Любая помощь приветствуется.

Примечание: я знаю, что мне не нужно добавлять таблицы стилей на обе страницы и т. д.как они должны быть загружены с первой страницы, но я добавил их, чтобы показать вам полный код того, что он пытается сделать.Спасибо, Рики

Ответы [ 2 ]

1 голос
/ 19 января 2011

Проблема здесь заключается в том, что curvycorners будут воплощаться в жизнь только для IE, поскольку Firefox полностью поддерживает закругленные углы CSS3, поэтому, пока он работает в Firefox, это происходит только потому, что curvycorners не пытается ничего делать.

Ваша загрузка JQuery размещена в блоке, готовом к документу, и поэтому не будет выполняться до тех пор, пока не будет загружена вся страница, включая (я полагаю) javascript, поэтому curvycorners работает до загрузки вашей второй страницы div. Вам нужно найти способ либо загрузить скрипт curvycorners после вашего второго div страницы, либо узнать, как вызвать curvycorners для повторного анализа страницы после загрузки div второй страницы.

Из документации на Curvycorners:

Если вам нужно изменить некоторые атрибуты или стиль перерисовываемых элементов, это не должно быть сделано напрямую через DOM. Вместо этого, имея идентифицировал объект DOM (например, с document.getElementById ()), вызов

curvyCorners.adjust(DOMObj, propertyName, newValue);

где:

DOMObj - это объект элемента с className curvyRedraw, который должен быть изменено;
propertyName - это имя свойство без ведущей точки; если это свойство стиля, оно должно быть выражается как 'style.property'.
newValue - это новое значение, например 'никто'.

curvyCorners.adjust () must принять все три параметра, описанные выше. Не возвращает никакого полезного значения.

0 голосов
/ 19 января 2011

Спасибо, Лазарь.Вы поставили меня на правильный путь, и я разработал решение, это работает.Теперь я чувствую себя немного глупо!

Еще раз спасибо.

Страница 1: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

        $("#load").load('testLoadCornering2.aspx #loadMe');  

            $.getScript('resources/js/curvycorners.js', function() {
                $(this).init();
            });
            $.getScript('resources/js/curvycorners.src.js', function() {
                $(this).init();
            });        
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="load" class="BWTable">
    </div>
    </form>
</body>
</html>

Страница 2: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>  
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>

    </form>
</body>
</html>
...