外部CSSファイルとのjqueryダイアログでdialogClassオプションを使用する方法

外部CSSファイルを使用している場合、jqueryダイアログでdialogClassによって定義されたCSSスタイルは適用されません。 ...少なくとも私がやっている方法ではない。私は手伝いをしていましたが、そこで働いていることに気付き、CSSをページの頭の部分に動かしてみました。 jqueryダイアログで外部CSSファイルからスタイルを適用する方法はありますか、またはhtmlページにCSSを貼り付けていますか？以下のコードがどのように動作するかを解説してください（オンザフライでダイアログを表示する場合はhtml、イニシャライザではダイアログオプションを使用してください）。外部CSSファイルとのjqueryダイアログでdialogClassオプションを使用する方法

function test() 
{ 
    var html = "<strong>Hello World!</strong>"; 
    var $dialog = $('<div></div>').html(html) 
     .dialog({ dialogClass: 'myStyle', modal: true, autoOpen: false }); 

    $dialog.dialog('open'); 
} 

.myStyle 
{ 
    color: #FF0000; 
    font-size: 28pt; 
    font-family: 'Comic Sans MS'; 
} 


<head> 
<script type="text/javascript" src="myexternal.js"></script> 
    <link type="text/css" href="core.css" rel="Stylesheet" /> 
    <link type="text/css" href="lib/jquery-ui-1.8.19.custom/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="lib/jquery-ui-1.8.19.custom/js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="lib/jquery-ui-1.8.19.custom/js/jquery-ui-1.8.19.custom.min.js"></script> 
</head> 
<body> 
    <form id="form2" > 
     <div> 
      <input id="Button2" type="button" value="Show Dialog" onclick="test();" /> 
     </div> 
    </form> 
</body>

出典

2012-04-27 johntrepreneur

あなたの問題はあなたのレイアウトです。自分のコアリンクの前にjQueryUIのCSSリンクを入れてください。このようにして、jQueryUI.cssが最初に適用されます。その後、CSSが後で適用され、遅れて変更されます。

また、同じメモで、コアjsがjqueryを使用している場合は、urヘッダーのjqueryリンクに従うほうが良いです。独自の「Additives」を追加する前に、常に「Core Libraries」（別名jQuery & jQueryUI）を追加してください。

出典

2012-04-27 00:30:29 SpYk3HH

あまりにもわかりやすい数字です。 – johntrepreneur

np、ちょうど覚えておいて、ウェブコードとPCソフトとの大きな違いは、ウェブコードが、上から下へ行の1行目の行に読み込まれるということです。あなたのコード（cssを含む）があなたが "上書き"したいものの前に来るならば、あなたが望むようにうまくいくわけではありません。ロボットアームをプログラミングするようなWebコーディングを考えてみましょう。 step1、step2 step 3 ... – SpYk3HH

外部CSSファイルとのjqueryダイアログでdialogClassオプションを使用する方法

答えて

関連する問題