0

テスト用に使用している 2 つの単純なページがあります。

最初のページでは、2 番目のページから$.load()a をロードするために使用しdivます。

どちらのページにもコーナリングを行うためのプラグインが含まれています。2 番目のページから div をロードする最初のページをロードすると、コーナリングが機能しません。ただし、2 番目のページを自分でロードすると、コーナリングが機能するため、$.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>

2 番目の div を読み込もうとしているページが表示されます。

そして2番目のページ：

<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 コーナーの 2 ページ目に移動すると、それは .load() メソッドが使用された場合のみです。

どんな助けでも感謝します。

注: 最初のページからスタイル シートを読み込む必要があるため、両方のページにスタイル シートを追加する必要がないことは承知していますが、実行しようとしている内容の完全なコードを表示するために追加しました。ありがとう、リッキー

4

2 に答える 2

1

ここでの問題は、Firefox が CSS3 の丸みを帯びた角を完全にサポートしているため、curvycorners が IE でのみ有効になることです。これは、Firefox で動作している間は、curvycorners が何もしようとしないためです。

JQuery の読み込みはドキュメント対応ブロック内に配置されるため、javascript を含む (私が信じている) ページ全体が読み込まれるまで実行されないため、2 番目のページ div が読み込まれる前に curvycorners が実行されます。2 番目のページ div の後に curvycorners スクリプトをロードする方法を見つけるか、curvycorners を呼び出して 2 番目のページ div をロードした後にページを再解析する方法を見つける必要があります。

curvycorners のドキュメントから:

再描画可能な要素の属性やスタイルを変更する必要がある場合は、DOM から直接変更しないでください。代わりに、(document.getElementById() などを使用して) DOM オブジェクトを識別してから、

curvyCorners.adjust(DOMObj, propertyName, newValue);

どこ：

DOMObj は、変更が必要な className curvyRedraw を持つ要素オブジェクトです。
propertyName は、先頭にドットを付けないプロパティの名前です。スタイル プロパティの場合は、「style.property」と表現する必要があります。
newValue は、「none」などの新しい値です。

curvyCorners.adjust() は、上記の 3 つのパラメーターすべてを取る必要があります。有用な値は返されません。

于 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 に答える