2

ナビゲーション メニュー用の jQuery プラグインを作成しました。JavaScript 内で、jQuery プラグイン JavaScript ファイル (ファイルの上部) で、プラグインに関連する CSS を動的にロードしています。次に$(document).ready(function()、プラグインを HTML 要素の DIV にアタッチします。

問題は、プラグインの起動時に、要素に適用される CSS に基づいていくつかの outerWidth() が計算されることです。一部のブラウザーでは、CSS が完全に読み込まれて HTML に適用される前に、プラグインが実行されます。これが発生すると、幅の計算が正しくありません。多くの場合、li または ul 要素からウィンドウの幅を取得するのではなく、ウィンドウの幅を取得しています。

プラグイン JavaScript ファイルに次のようなコードがあります。

function includeCSS(p_file) {
    var v_css = document.createElement('link');
    v_css.rel = 'stylesheet'
    v_css.type = 'text/css';
    v_css.href = p_file;        
    document.getElementsByTagName('head')[0].appendChild(v_css);
}

includeCSS("Scripts/jQuery/plugins/jquery-mmm-1.0/menu.css");

jQuery init メソッドで css をロードしようとしましたが、これにも同様の問題があります。

jQuery プラグイン JavaScript ファイル内から CSS を指定する必要があります (エンド ユーザーにとって作業を簡単にするため)。

これに取り組んでいる間、私は HTML ページの CSS に直接リンクしました。これを行っている間、物事はうまくいきました。問題は、CSS を動的にロードし、その後この CSS をプラグインからの計算に適用する必要があることです。

どうすればこれを解決できますか?

4

2 に答える 2

5

ほとんどのプラグインは、ヘッダー セクションに CSS と JavaScript の両方を含めるように開発者に指示します。jQuery に精通しているほとんどの Web 開発者は、この規則に慣れています。うまく機能するだけでなく、実際に予想される他の JavaScript、CSS、および HTML 検証の問題との競合が少なくなります。経験豊富なプロの開発者は、時間をかけてコードを検証し、慎重にサイトを設計するかもしれませんが、インターネット コミュニティ全体は非常に多様であり、多くの場合、これらの原則を常に順守しているわけではありません。

そうは言っても、AJAX リクエストを使用して CSS をテキスト/プレーン コンテンツとしてダウンロードし、成功ハンドラーで CSS を<style>ブロックに追加してから、幅計算関数を呼び出すことができます。

AJAX を使用して CSS を取得するソリューション:

CSS を JavaScript 文字列にロードしてから<style>要素を動的に構築することにより、JavaScript が実行される前に CSS がロードされるようにします。

$.ajax({ "url" : "/css/yourstyle.css",
    success: function(data) {
        // assume data is "body { background-color:yellow; }";
        $('head').append('<style id="testtest"></style>');
        $('head').find("#testtest").html( cssString );

        // now fire your width-calculating function here
    }
});

このアプローチの問題の 1 つは、操作の順序が原因で、スタイルが適切にレンダリングされないことです。一般に、インライン スタイルはスタイル ブロックよりも優先度が高く、スタイル ブロックは外部スタイルシートよりも優先度が高くなります。CSS は外部スタイルシートではなくスタイル ブロックとして読み込まれるようになったため、オーバーライドするつもりのないスタイルをオーバーライドしたり、無効にしたりする可能性があります。

これにより、ユーザーは CSS を変更してより具体的な CSS ルールを含めるか、CSS ルールで !important 識別子を使用する必要が生じる可能性があります。

また、開発者が CSS ファイルの場所を簡単に再構成できるようにしてください。あなたのパスは相対パスであり、別のフォルダーに HTML ファイルがある場合、CSS ファイルを見つけられない可能性があります。

要約すると、このアプローチは非常にうまく機能しますが、そのようなソリューションにより多くの時間とメンテナンスを投入し、CSS がどのように解釈されるかの違いを処理する準備ができている必要があります。幸運を！:)

于 2012-05-19T03:48:01.100 に答える
1

この問題を解決する 1 つの方法は、.get() を使用して をロードし、CSSその操作が完了したときに残りのコードを呼び出すことです!

Jクエリ

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});
于 2012-05-19T03:45:32.863 に答える