Drupal и jQuery. Урок 8. Подключаем к drupal 7 jquery ui, jquery ui tabs

Опубликовано пользователем admin

Код файла

/sites/all/modules/custom/custom.info

name = custom
description = custom module
core = 7.x

/sites/all/modules/custom/custom.module

<?php

  drupal_add_library('system', 'ui.tabs');

 

 CSS-код:

#tabs{
  border: 0px;
}

.ui-tabs-nav{
  background: none;
  border: none;
}

 HTML код в node-product.tpl.php:

<div id="tabs">
      <ul>
        <li>
          <a href="#tabs-1">Описание</a>
        </li>
        <li>
          <a href="#tabs-2">Характеристики</a>
        </li>
      </ul>

      <div id="tabs-1">
        <?php
          print render($content['body']);
        ?>
      </div>
      <div id="tabs-2">
        <?php
          print render($content);
        ?>
      </div>
    </div>

 

Для начала нужно создать кастомный модуль.

drupalbook.ru/content/iz-chego-sostoit-modul-drupala

Теперь нужно поставить вес модуля custom больше, чем вес модулей ядра, для этого нужно зайти в БД через phpmyadmin и поставить вес модуля (weight) 100 или больше. Найти запись о модуле можно в таблице system:

phpmyadmin

 

Теперь в модуль custom можно подцеплять jquery ui плагины, например так:

<?php
drupal_add_library('system', 'ui.tabs');
drupal_add_library('system', 'ui.accordion');

 

Вставлять код можно в самом начале модуля после открывающего тега php.

 

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Более подробная информация о текстовых форматах

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

jQueryUI очень хорошая вещь,

jQueryUI очень хорошая вещь, не могли бы вы добавить парочку наглядных примеров, а то я подключить то подключу, а вот что дальше с этим делать ума не приложу. Был бы очень благодарен вам.

чё то как то сложно и не

чё то как то сложно и не пноятно для чего именно это нужно  делать. 

 

Вообще проще можно сделать. Создаем блок  и туда вставляем 

<?phpdrupal_add_library('system', 'ui.tabs');drupal_add_library('system', 'ui.accordion'); а если нужно подрубить jquery и jqueryuiвставляем удаленные ссылки

<!-- 1. Подключим библиотеку jQuery (без нее jQuery UI не будет работать) --><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- 2. Подключим jQuery UI --><linkhref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"rel="stylesheet"type="text/css"/><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Что то мой предыдущий комент

Что то мой предыдущий комент разъехался весь.

 

Напишу ещё раз уже от руки

 

Можно ведь не создавая модулей просто создать блок и туда добавить PHP код

<?php
drupal_add_library('system', 'ui.tabs');
drupal_add_library('system', 'ui.accordion');

 и подрубить удаленно или локально нужные файлики, хотя по идее это всё уже входит в ядро Drupal7

<!-- 1. Подключим библиотеку jQuery (без нее jQuery UI не будет работать) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- 2. Подключим jQuery UI -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
второй день разбираюсь с этим делом, не хватает хороших примеров с применением данной взможности.
 

Да, конечно, можно. Я

Да, конечно, можно. Я стараюсь свой код по возможности писать или в кастомном модули или в template.php, чтобы другие разработчики не искали, что я на сайте написал.

Как вы сделали картинку

Как вы сделали картинку товара вверху отдельно от табов? Когда я делаю  к drupal commerce, набираю node--my.tpl.php для табов: print render($content['имя поля']); Имя поля - одно, print render($content['body']);- для первого таба а для характеристики - print render($content['field_haracteristic']); как в моих настройках . В конце получается просто работающие  табы как в вашем примере ,но без материала товара, тоесть без картинок, добавить в корзину, цены. Вышеперечисленное получается когда я удаляю из node--my.tpl.php строчку <?php print render($content); ?>.

 Когда возвращаю <?php print render($content); ?> на сайте отображаются картинка товара, добавить в корзину, цена. Отдельно описание, отдельно характеристика а отдельно работающие табы с тем же описанием и характеристикой.

Как вы сделали картинку

Как вы сделали картинку товара вверху отдельно от табов? Когда я делаю  к drupal commerce, набираю node--my.tpl.php для табов: print render($content['имя поля']); Имя поля - одно, print render($content['body']);- для первого таба а для характеристики - print render($content['field_haracteristic']); как в моих настройках . В конце получается просто работающие  табы как в вашем примере ,но без материала товара, тоесть без картинок, добавить в корзину, цены. Вышеперечисленное получается когда я удаляю из node--my.tpl.php строчку <?php print render($content); ?>.

 Когда возвращаю <?php print render($content); ?> на сайте отображаются картинка товара, добавить в корзину, цена. Отдельно описание, отдельно характеристика а отдельно работающие табы с тем же описанием и характеристикой.

jquery конечно хорошо,но ..

jquery конечно хорошо,но ...все же надо по максимуму реализовывать модулями друпал.Ведь этим сайтом потом кому-то управлять. И как правило этот кто-то не знает всего этого.