Свой виджет Fivestar для Drupal

Опубликовано 2014.04.16 в разделе Drupal

Модуль Fivestar предлагает на выбор 11 типов виджетов. В основном это всё звёздочки. Хуки этого модуля позволяют с лёгкостью добавить свои виджеты, или попросту скины для отображения оценок. Для добавления своих виджетов нужен отдельный модуль. Почитать о его создании можно тут или тут. Далее используем hook_fivestar_widgets. Пусть модуль называется star_widgets Тогда функция будет выглядеть так:
  1. function star_widgets_fivestar_widgets() {
  2. $widgets = array(
  3. 'widgets/my_fivestar/my_fivestar.css' => 'My new stars',
  4. );
  5. return $widgets;
  6. }
В этом хуке можно перечислить сразу несколько новых виджетов, в переменной $widgets. widgets/my_fivestar/my_fivestar.css - это путь к стилям виджета. Папку widgets можете обозвать как угодно, а вот имя папки виджета и css файла должны быть одинаковыми, иначе виджет работать не будет. Если модуль уже был включен - придётся почистить кэш. Ещё один отличный момент - ваш css файл может быть пустым, fivestar подложит дефолтный скин и всё будет работать. Так что раскрашивать виджет можно даже после его запуска на сайте. В стилях тоже всё достаточно просто. В my_fivestar.css нужно прописать: [css] /* Static View-only Star Version */ .fivestar-my_fivestar div.fivestar-widget-static .star { background-image: url('картинка для звёздочки'); } .fivestar-my_fivestar div.fivestar-widget-static .star span.on { background-image: url('картинка для активной звёздочки'); } .fivestar-my_fivestar div.fivestar-widget-static .star span.off { background-image: url('картинка для неактивной звёздочки'); } /* Javascript Star Version */ .fivestar-my_fivestar div.fivestar-widget .cancel, .fivestar-my_fivestar div.fivestar-widget .cancel a { background-image: url('картинка для отмены'); } .fivestar-my_fivestar div.fivestar-widget .star, .fivestar-my_fivestar div.fivestar-widget .star a { background-image: url('картинка для звёздочки'); } .fivestar-my_fivestar div.fivestar-widget div.hover a, .fivestar-my_fivestar div.rating div a:hover { background-image: url('картинка для звёздочки по наведению'); } [/css] Так же можно дописывать любые другие css свойства. Обратите внимание на имена классов, в них притсутсвует имя виджета, это так же важно. Если всё сделали правильно - в настройках отображения поля появится ваш новый виджет.

2 Комментариев

Оставить комментарий

  1. Гость 2015/03/24

    Здравствуйте. Спасибо за статью. Так не работает, не видит css.

    1. 'widgets/my_fivestar/my_fivestar.css' => 'My new stars',

    Вот так работает.
    1. drupal_get_path('module', 'my_fivestar') . '/widgets/my_fivestar/my_fivestar.css' => 'My new stars',

    Ответить

    1. Админ 2015/03/25

      Странно что не видит, у меня вроде бы видел. Но ваш код конечно более надёжен.

      Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте дом