将 TabSlideOut javascript 添加到 Drupal 7答案

【问题标题】：Adding TabSlideOut javascript to Drupal 7将 TabSlideOut javascript 添加到 Drupal 7
【发布时间】：2012-03-07 04:48:44
【问题描述】：

Drupal 没有用作滑动标签（悬停时）的模块，所以我想将这个 http://www.building58.com/examples/tabSlideOut.html 合并到我的网站中。

在尝试将上述滑出选项卡添加到我的 Drupal 站点的过程中，我尝试将代码任意添加到 html.tpl.php 并且选项卡部分工作（出现冲突错误）。但是，我的 Superfish 菜单一直出现冲突错误。我在 Drupal.org 上阅读了主题，在 template.php 中使用钩子函数 drupal_add_js 添加 javascript，但是当我这样做时，就选项卡而言，我根本看不到任何东西。

我错过了什么吗？如果有人可以帮助我，我将不胜感激，我已经花了几天和几周的时间来解决这个问题。

【问题讨论】：

标签： javascript jquery drupal tabs slide

【解决方案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>`

将图像 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>

【讨论】：