Деградация jquery изящно в drupal, когда недоступен javascript. Идеи?

Я хотел бы, чтобы моя кнопка в Drupal изящно деградировала, когда javascript недоступен, направляя пользователя на полный узел.

У меня есть этот код javascript jquery в голове моего Drupal node-type-tpl.php;

  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
person Meggy    schedule 14.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что самый простой подход — использовать тег <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() здесь. Я не совсем поддерживаю это, хотя метод ссылки является более распространенным методом изящной деградации.

Наконец, я бы включил ваш Javascript с помощью drupal_add_js(), а не непосредственно в шаблон узла, чтобы вы могли воспользоваться преимуществами автоматического кэширования и сжатия.

person Austin Smith    schedule 14.04.2012
comment
Ву ху! Это сработало. За исключением пары изменений в коде; 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> - person Meggy; 14.04.2012