2012-02-15 8 views
0

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

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

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

ответ

1

я попробовал его и он работает таким образом, поместить следующий код в файле 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>` 

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

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

.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> 
Смежные вопросы