Грациозно деградиране на jquery в drupal, когато няма наличен javascript. Идеи?

Бих искал моят бутон в Drupal да се деградира елегантно, когато javascript не е наличен, като насочва потребителя към пълния възел.

Имам този jquery javascript код в главата на моя 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