向Drupal7添加TabSlideOut javascript

Question

Drupal没有一个模块可以充当滑动标签(在悬停时)，所以我想把这个http://www.building58.com/examples/tabSlideOut.html合并到我的站点中。

在尝试将上面的滑出式选项卡添加到我的Drupal站点的过程中，我尝试随意地将代码添加到html.tpl.php中，但选项卡部分工作(有冲突错误)。然而，我的Superfish菜单总是收到一个冲突错误。我在Drupal.org上阅读，在主题的template.php中使用钩子函数drupal_add_js添加javascript，但是我根本看不到任何东西，就选项卡而言，当我这样做时，它会出现。

我是不是遗漏了什么？如果有人能帮助我，我将非常感激，我已经花了几天和几周的时间试图弄清楚这一点。

Answer 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文件中，如下所示

.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>