jQueryのグレースフルデグラデーション

StackOverflow https://stackoverflow.com/questions/308076

質問

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

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

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

jQueryを使用して同じ効果を実現したいのは、主にそれがはるかにきれいに見えるからです。特に最初の出会いでは、ユーザーにとってより理にかなっています。 2つが競合するかどうか疑問に思っています。これはこの一例にすぎません。JavaScriptを使用できないとサイトが妨げられる他の多くの例があります。

だから、JavaScriptをサポートしていないブラウザーでjQueryサイトをどのように優雅に劣化させるのでしょうか？私の目標は、ブラウザでの選択に関係なく、サイトがすべてのユーザーに対して基本レベルで機能することです。アニメーションは良い例ですが、AJAXを使用した自動更新など、より動的なビットについても心配しています。これを達成する方法についての良いリソースはありますか、または最善の方法についてアドバイスはありますかそのような分解性は達成できますか？

ありがとう

PS：完全に無関係ですが、Firefoxは「分解性」と考えているようです。言葉ではありませんが、「生分解性」 （接頭辞「bio」を使用）です。奇妙な...

役に立ちましたか？

解決

「カスケード順序」を検討する場合cssの場合、ツールチップ効果のために現在持っているcss効果をキャンセルするために、以前のすべてのcss定義の最後にcssスタイルを追加することはできませんか？

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

そのようにして、 cssツールチップ効果がJQueryと競合していないことを確認します。効果。

次のようなもの：

a.info:hover span{ display:none}

＆quot; js_enabled＆quot;を使用してこの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の分離の最も簡単な解決策は、< strong> 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番目のクラスの名前

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

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

他のヒント

CSSで何かを完全に行うことができる場合は、そのままにしておきます。ブラウザにjavascriptがないことが懸念される場合は、ほとんどの場合、ページ全体が影響を受けることはありません。

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

男、あなたはブラウザベースのゲームを持っていますよね？ jsが無効になっているユーザーは1％未満です！そして、その1％が終末論的な数です。あなたがそれより少ないものをベットできるからです;）

とにかく、あなたが本当にこれを心配しているなら、javascriptなしでサイトを行ってください。そして、100％機能するようにします。サイトがjsフレーバーなしで完全に動作した後、jquery（または他のライブラリ; jqueryが最適です：P）で改善を始めてください。ただし、注意してください。HTMLを変更しないでください。見た目よりも簡単です;）

そして、そうです、jsなしで機能するもの（ツールヒントなど）がある場合は、それを保持してください！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top