2011-01-19 17 views
0

私はテスト用に2つの簡単なページを用意しています。jQuery .load() - コーナープラグインがIEで動作しない - Firefoxが正常です

私の最初のページでは、$.load()を使用して、2番目のページから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> 

あなたはページが第二の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:Firefoxので

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 */ 

、これは正常に動作します - しかし、IEで(特に私が試しているバージョン8)コーナーは丸められません。

繰り返して、手動でIE 8コーナーの2番目のページに移動するには、.load()メソッドが使用されているときだけです。

助けてください。

注:最初のページからロードする必要があるため、両方のページなどにスタイルシートを追加する必要はないはずですが、試しているものの完全なコードを表示するために追加しましたする。 おかげで、 リッキー

+0

ボックスモデルではなく、国境を使用することができますので、それはFirefoxやChromeのと同じようにボーダー半径などの作業を見ていかもしれません。 –

+0

これは今解決され、私は私の答えを掲載しました。みんな、ありがとう。 – Ricky

答えて

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> 
+0

馬鹿感を感じる必要はありません。解決策を見るには、問題に近づけるのがとても簡単です。「木の木を見ることができません」という表現は、それを表現する最善の言い回しです。しばらくすると、あなたのコードを精算して2時間かけて拾い読みし、バグを探して紙に書いてみようとしても、同僚があなたの肩に寄りかかって、スクリーンを見てすぐに* *想像できる最も明白なバグ。 :) – Lazarus

+0

あなたの答えを受け入れることを忘れないでください、それはあなたのものですが、それは答えです。 – Lazarus

1

ここでの問題は、Firefoxは完全にそれがFirefoxで働いている間curvycornersが何かをしようとされていないので、それだけですので、CSS3の角を丸めサポートとしてcurvycornersはIEのみの生活に春になるということです。

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

あなたには、いくつかの属性にredrawable要素の やスタイリングを変更する必要がある場合は、 これは直接 DOMを通じて行われるべきではありません。代わりに、 にDOMオブジェクトが識別されている(例: ドキュメント)。getElementByIdを())、呼び出し

curvyCorners.adjust(DOMObj, propertyName, newValue);

DOMObjが を変更する必要が クラス名curvyRedraw有する要素オブジェクトです。
propertyNameは、 の名前で、先行ドットなしのプロパティです。 の場合はスタイルプロパティ、 は 'style.property'とする必要があります。
newValueは新しい値です。 'なし'。

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

+0

ありがとうラザロ。これは私を正しい軌道に乗せた。私は私のために働いた答えを投稿しました。 – Ricky

関連する問題