【问题标题】:Degrading jquery gracefullly in drupal when no javascript available. Ideas?当没有可用的 javascript 时,在 drupal 中优雅地降级 jquery。想法?
【发布时间】: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 时将用户定向到完整节点。

知道我该怎么做吗?

【问题讨论】:

    标签: javascript jquery drupal views


    【解决方案1】:

    我认为最简单的方法是使用&lt;a&gt; 标签而不是&lt;button&gt; 标签,然后在您的函数中调用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();
      });
    }
    

    如果你希望它是一个实际的按钮控件,你应该使用一个实际的表单,因为 &lt;button&gt; 元素本身无法在没有 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(); }); }&lt;a class="morelink" href = "&lt;?php print url('node/' . $node-&gt;nid); ?&gt;"&gt;More&lt;/a&gt;
    猜你喜欢
    • 2011-04-14
    • 1970-01-01
    • 2011-08-29
    • 2011-11-21
    • 1970-01-01
    • 2010-11-19
    • 2010-11-13
    • 2010-12-04
    • 2018-05-16
    相关资源
    最近更新 更多