当没有可用的 javascript 时，在 drupal 中优雅地降级 jquery。想法？

Posted 2023-02-26

【中文标题】当没有可用的 javascript 时，在 drupal 中优雅地降级 jquery。想法？

【英文标题】：Degrading jquery gracefullly in drupal when no javascript available. Ideas?

【发布时间】：2012-04-14 00:34:17

【问题描述】：

我希望 Drupal 中的按钮在 javascript 不可用时通过将用户定向到完整节点来优雅降级。

我的 Drupal node-type-tpl.php 头部有这个 jquery javascript 代码；

  Drupal.behaviors.infobutton = function(context) 
  $("button").click(function () 
  $('.more').hide();
  $('.more').eq( $('button').index( $(this) ) ).show();
  );
  

这是我的 node-type-tpl.php 表格中一行中的按钮；

  <button>More</button>

这是表格中被 css 隐藏的下一行，直到我点击我的按钮；

 <tr class="more"><td>some php content</td></tr> 

当前，用户在视图中看到一个修剪过的节点。当他们单击按钮时，此节点会打开以显示更多内容。我想拥有它，以便在关闭 javascript 时将用户定向到完整节点。

知道我该怎么做吗？

【参考方案1】：

我认为最简单的方法是使用<a> 标签而不是<button> 标签，然后在您的函数中调用e.preventDefault()。您可以像这样创建链接：

<php print l('More', 'node/' . $node->nid, array('attributes' => array('class' => array('morelink'))); ?>

请注意，Drupal 6 和 7 中的类格式不同，请参阅 http://api.drupal.org/api/drupal/includes%21common.inc/function/l/7

然后是这样的javascript：

Drupal.behaviors.morelink = function(context) 
  $("a.morelink").click(function (e) 
    e.preventDefault();
    $('.morelink').hide();
    $('.morelink').eq( $('a.morelink').index( $(this) ) ).show();
  );

如果你希望它是一个实际的按钮控件，你应该使用一个实际的表单，因为 <button> 元素本身无法在没有 Javascript 的情况下重定向浏览器。可能看起来像

<form action="<?php print url('node/' . $node->nid); ?>">
  <input type="submit" class="more" value="More" />
</form>

您仍然需要e.preventDefault()。不过我并不是很赞成这种做法，链接方法是更常见的优雅降级方法。

最后，我将使用 drupal_add_js() 而非直接在节点模板中包含您的 Javascript，这样您就可以利用自动缓存和压缩。

【讨论】：

哇哦！那行得通。对代码进行一些更改； Drupal.behaviors.morelink = function(context) $("a.morelink").click(function (e) e.preventDefault(); $('.more').hide(); $('.more').eq( $('a.morelink').index( $(this) ) ).show(); ); 和 <a class="morelink" href = "<?php print url('node/' . $node->nid); ?>">More</a>