草庐IT

javascript - jQuery 优雅降级

coder 2024-07-15 原文

我想用一些 jQuery 动画来美化我网站的某些区域，并且我希望完全替换我的 AJAX 代码，因为我现有的代码存在一些跨浏览器兼容性问题。但是，由于 jQuery 是一个 JavaScript 库，我担心当 JavaScript 关闭或用户浏览器中不存在时我的页面无法正常运行。

我举个例子:目前，我正在使用纯 CSS 工具提示向我的用户(玩家，网站是浏览器游戏)提供其他用户的信息。例如，如果游戏中的其他玩家满足一个或多个条件，则目标图标会显示在他们的名字旁边，并且在将鼠标悬停在该目标图标上时会显示有关目标背后原因的信息。这是有用的信息，因为它可以帮助我的玩家了解他们应该计划在游戏中接下来攻击谁。

目前，我使用 CSS 制作此类工具提示。我有一个父 div，它包含类“信息”的目标图标的图像。然后我在其中有一个带有类“工具提示”的 div，在它包含的“信息”类的悬停状态下显示，但在正常状态下隐藏。当我读到它时，我认为它相当聪明，而且由于没有使用 JavaScript，它可以在任何兼容 CSS 的浏览器上运行。

我想使用 jQuery 来实现同样的效果，主要是因为它看起来更干净，而且因为我相信快速和微妙的动画可以使这些“随机出现”的东西对用户来说更有意义，尤其是在第一次相遇。我只是想知道这两者会不会冲突。这只是这方面的一个例子，还有许多其他例子表明无法使用 JavaScript 会阻碍网站。

所以我想问的是，如何使 jQuery 站点在不支持 JavaScript 但不支持大多数 CSS 的浏览器上优雅地降级？我的目标是让网站在所有用户的基本级别上运行，无论浏览器的选择如何。动画是一个很好的例子，但我也担心更动态的部分，比如使用 AJAX 自动更新等。是否有任何关于如何实现这一点的好资源，或者你对最佳方法有什么建议这样的可降解性可以实现吗？

谢谢

PS:完全无关紧要，但 Firefox 似乎认为“可降解性”不是一个词，而是“可生物降解性”(带有“bio”前缀)。奇怪...

最佳答案

如果考虑到 css 的“级联顺序”，是否可以在之前所有 css 定义的末尾添加一个 css 样式，以取消当前用于工具提示效果的任何 css 效果？

只有在激活 Javascript 并检测到 JQuery 时才会声明该 css 规则。

这样，您就可以确定您的 css tooltip effect与您的 JQuery 效果不冲突。

类似于:

a.info:hover span{ display:none}

使用“js_enabled”类使此 css 规则成为条件。

您也可以通过 adding css rule on the fly 来完成:

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);
    }
}

最简单的解决方案 Separation of CSS and 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;
  }
}

这个示例函数有四个参数:

一个
定义您希望函数执行的操作。
o
有问题的对象。
c1
第一个类的名字
c2
第二类的名字

可能的操作是:

交换
将对象 o 中的类 c1 替换为类 c2。
添加
将类 c1 添加到对象 o。
删除
从对象 o 中删除类 c1。
检查
测试类 c1 是否已应用于对象 o 并返回 true 或 false。

关于javascript - jQuery 优雅降级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/308076/

javascriptjQuerycode39classNamecssbackwards-compatibility

有关javascript - jQuery 优雅降级的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. ruby-on-rails - Rails 优雅地处理超时 session ？ - 2

    使用rails4，ruby2。我在rails配置中为我的cookiesession设置了30分钟的超时时间。问题是，如果我转到表单，让session超时，然后提交表单，我会收到此ActionController::InvalidAuthenticityToken错误。如何在Rails中优雅地处理这个错误？比如说，重定向到登录屏幕？ 最佳答案 在您的ApplicationController:rescue_fromActionController::InvalidAuthenticityTokendoredirect_tosome_p

  3. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？ 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  4. ruby-on-rails - 优雅的 Rails : multiple routes, 相同的 Controller Action - 2

    让多条路线去同一条路的最优雅的方式是什么ControllerAction？我有:get'dashboard',to:'dashboard#index'get'dashboard/pending',to:'dashboard#index'get'dashboard/live',to:'dashboard#index'get'dashboard/sold',to:'dashboard#index'这很丑陋。有什么“更优雅”的建议吗？一个类轮的奖励积分。 最佳答案 为什么不只有一个路由和一个Controller操作，并根据传递给它的参数来

  5. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  6. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - RVM/降级 bundler gem - 2

    我有以下有趣的场景:我已经通过RVM安装了ruby​​1.9.2，它预打包了bundler1.1.4。我的应用程序需要bundler1.0.15。我试过运行以下命令:gemuninstallbundler我得到以下信息:INFO:gem"bundler"isnotinstalled有什么想法可以降级我的bundler吗？谢谢。 最佳答案 找到解决方案。显然rvm在所有gemspec可见的全局gemspec中安装它的gem。所以通过这样做:rvmuse1.9.2@global然后是:gemuninstallbundler成功了。这也可

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - 优雅的链式 'or' 用于测试 Ruby 中的相同变量 - 2

    怎样说才是明智的呢？if@thing=="01"or"02"or"03"or"04"or"05"(数字包含在数据类型字符串的列中。) 最佳答案 制作数组并使用.include?if["01","02","03","04","05"].include?(@thing)如果值真的都是连续的，你可以使用像(1..5).include?这样的范围对于字符串，你可以使用:if("01".."05").include?(@thing) 关于ruby-优雅的链式'or'用于测试Ruby中的相同变量，我

随机推荐