Добавление TabSlideOut JavaScript в Drupal 7 - PullRequest
Новая
       42

Добавление TabSlideOut JavaScript в Drupal 7

0 голосов
/ 15 февраля 2012

Для Drupal не существует модуля, который действует как скользящая вкладка (при наведении), поэтому я хотел бы включить этот http://www.building58.com/examples/tabSlideOut.html в мой сайт.

В процессе добавления вышеупомянутой выдвижной вкладки на мой сайт Drupal я попытался произвольно добавить код в html.tpl.php, и вкладка частично сработала (с ошибками конфликта). Однако я продолжал получать сообщение об ошибке конфликта с моим меню Superfish. Я прочитал на Drupal.org, чтобы добавить javascript, используя функцию ловушки drupal_add_js в template.php для темы, однако я ничего не вижу, кроме вкладки, появляющейся при этом. 1005 *

Я что-то упустил? Если кто-нибудь может мне помочь, я буду очень признателен, я потратил дни и недели, пытаясь понять это.

1 Ответ

1 голос
/ 04 июня 2012

Я попробовал это, и это работает таким образом, поместите следующий код в файл page.tpl.php вверху `

<script type="text/javascript">
$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                     //class of the element that will become your tab
        pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
        imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '200px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
    });

});

</script>`

поместите изображение images / contact_tab.gif в папку изображениясвою тему и замените строку на «sites / all / themes / YOUR_THEME / images / contact_tab.gif», замените YOUR_THEME на имя папки темы

, затем поместите код css в файл css вашей темы без тегакак следует 

.slide-out-div {
      padding: 20px;
      width: 250px;
      background: #ccc;
      border: 1px solid #29216d;
  }

и в нижней части page.tpl.php введите следующий код 

<div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users.html">Content</a>
        <h3>Contact me</h3>
        <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
        </p>
        <p>This can be a form to submit feedback, or contact info</p>
    </div>
...