10

Web サイトの一部の領域をいくつかの jQuery アニメーションであちこちに飾りたいと思っています。また、既存のコードにはブラウザー間の互換性の問題があるため、AJAX コードを完全に置き換えたいと考えています。ただし、jQuery は JavaScript ライブラリであるため、JavaScript がオフになっている場合やユーザーのブラウザーに存在しない場合、ページが正しく機能しないことが心配です。

例を挙げましょう: 現在、純粋な CSS ツールチップを使用して、他のユーザーに関する情報をユーザー (プレーヤー、サイトはブラウザー ゲーム) に提供しています。たとえば、ゲーム内の他のプレーヤーが 1 つ以上の条件を満たしている場合、ターゲット アイコンが名前の横に表示され、そのターゲット アイコンにカーソルを合わせると、ターゲットの背後にある理由に関する情報が表示されます。これは、プレイヤーがゲームで次に攻撃する予定の相手を知るのに役立つため、有益な情報です。

現在、私は CSS を使用してそのようなツールチップを作成しています。クラス「info」のターゲットアイコンの画像を保持する親divがあります。次に、その中に含まれる「info」クラスのホバー状態では表示されるが、通常の状態では非表示になるクラス「tooltip」を持つ div があります。私はそれについて読んだときにかなり賢いと思いました.JavaScriptが使用されていないため、CSS準拠のブラウザで動作します.

jQuery を使用して同じ効果を達成したいと思います。これは主に、よりきれいに見えるためですが、また、迅速で微妙なアニメーションにより、そのようなものが「ランダムに表示される」ことがユーザーにとってより意味のあるものになると信じているためです。出会い。この2つが衝突するかどうかだけが気になります。これはほんの一例であり、JavaScript を使用できないことがサイトの妨げになる例は他にもたくさんあります。

私が尋ねているのは、JavaScript をサポートしていないが、それ以外の場合はほとんどの CSS をサポートしているブラウザーで jQuery サイトを適切に低下させるにはどうすればよいかということです。私の目標は、ブラウザーの選択に関係なく、すべてのユーザーにとって基本的なレベルでサイトが機能することです。アニメーションは良い例ですが、AJAX を使用した自動更新などのより動的な部分についても心配しています。これを達成する方法についての良いリソースはありますか、または最善の方法について何かアドバイスはありますか?そのような分解性は達成できますか？

ありがとう

PS: まったく関係ありませんが、Firefox は「分解性」は単語ではなく、「生分解性」(接頭辞が「bio」の場合) であると考えているようです。変...

4

3 に答える 3

5

css の「Cascading Order」を考慮する場合、以前のすべての css 定義の最後に css スタイルを追加して、現在 tooltip effect 用に持っている css 効果をキャンセルすることはできませんか?

その css ルールは、Javascript がアクティブ化され、JQuery が検出された場合にのみ宣言されます。

そうすれば、 css ツールチップ効果が JQuery 効果と競合しないことが確実になります。

何かのようなもの：

a.info:hover span{ display:none}

「js_enabled」クラスを使用して、この CSS ルールを条件付きにします。

オンザフライでcssルールを追加することでそれを行うこともできます：

function createCSSRule(rule,attributes)
{
    //Create the CSS rule
    var newRule = "\n"+rule+"{\n";
    for (var attribute in attributes)
    {
        newRule += "\t" + attribute + ": " + attributes[attribute] + ";\n";
    }
    newRule += "}\n";

    //Inject it in the style element or create a new one if it doesn't exist
    styleTag = $E('style[type="text/css"]') || new Element("style").setProperty('type','text/css').injectInside(document.head);
    if(window.ie)
    {
        styleTag.styleSheet.cssText += newRule;
    }
    else
    {
        styleTag.appendText(newRule);
    }
}

CSS と Javascrip を分離するための最も簡単な解決策は、css クラスを削除することです。

function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): <-
      o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}

この関数の例では、次の 4 つのパラメーターを使用します。

a
関数で実行するアクションを定義します。
o
問題のオブジェクト。
c1
最初のクラス
c2
の名前 2 番目のクラスの名前

可能なアクションは次のとおりです。

swap
オブジェクト o のクラス c1 をクラス c2 に置き換えます。
add
オブジェクト o にクラス c1 を追加します。
remove
オブジェクト o からクラス c1 を削除します。
check
クラス c1 が既にオブジェクト o に適用されているかどうかをテストし、true または false を返します。

于 2008-11-21T07:10:16.473 に答える
1

何かを完全に CSS で行うことができる場合は、そのままにしておいてください。ブラウザに JavaScript がないことが懸念される場合は、ほとんどの場合、ページ全体を表示しても問題ありません。

たとえば、jQuery を使用して、チェックボックスがクリックされたときに要素を切り替えるとします。ページの読み込み時にチェックボックスを見て、それに応じて要素を更新します。JavaScript が有効になっていない場合でも、要素は表示され、サイトは引き続き使用できます。それほど良くない。

于 2008-11-21T11:59:26.703 に答える
0

男、ブラウザベースのゲームを持っていますよね？JS が無効になっているユーザーは 1% 未満です。そして、その 1% は黙示録的な数字です。

とにかく、これが本当に心配な場合は、JavaScript を使用せずにサイトを実行してください。そしてそれを100％機能させます。サイトが JS フレーバーなしで完全に機能したら、jQuery (または他のライブラリ。jQuery が最適です:P ) を使用して改善を開始します。ただし、注意してください: HTML は一切変更しないでください。見た目よりも簡単です;）

はい、JS なしで機能するもの (ツールチップなど) がある場合は、それを保持してください!

于 2008-11-21T12:45:46.953 に答える