0

我有两个用于测试的简单页面。

在我的第一页上，我使用从第二页$.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() 方法时。

任何帮助表示赞赏。

注意：我知道我不需要在两个页面等上添加样式表，因为它们应该从第一页加载，但我添加它们是为了向您展示它正在尝试做的完整代码。谢谢，瑞奇

4

2 回答 2

1

这里的问题是 curvycorners 只会在 IE 中出现，因为 Firefox 完全支持 CSS3 圆角，所以当它在 Firefox 中工作时，这只是因为 curvycorners 没有尝试做任何事情。

您的 JQuery 加载放置在文档就绪块中，因此在整个页面加载之前不会执行，包括（我相信）javascript，因此 curvycorners 在加载第二页 div 之前运行。您需要找到一种方法来在第二页 div 之后加载 curvycorners 脚本，或者在加载第二页 div 后找出如何调用 curvycorners 来重新解析页面。

从 curvycorners 文档中：

如果您需要更改可重绘元素的某些属性或样式，则不应直接通过 DOM 完成。相反，在识别出 DOM 对象（例如使用 document.getElementById()）后，调用

curvyCorners.adjust(DOMObj, propertyName, newValue);

在哪里：

DOMObj是className为curvyRedraw需要改变的元素对象；
propertyName 是不带前导点的属性名称；如果它是一个样式属性，它应该表示为'style.property'。
newValue 是新值，例如'none'。

curvyCorners.adjust() 必须采用上述所有三个参数。它没有返回有用的值。

于 2011-01-19T12:22:17.110 回答
0

谢谢拉撒路。你让我走上了正确的轨道，我已经找到了解决方案，这很有效。我现在觉得有点傻！

再次感谢。

第 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>
于 2011-01-19T12:35:07.760 回答