将TabSlideOut javascript添加到Drupal 7 [英] Adding TabSlideOut javascript to Drupal 7

问题描述

没有Drupal的模块用作滑动选项卡（在悬停上），因此我想将这个模块合并到一起， http://www.building58.com/examples/tabSlideOut.html 到我的网站。

在尝试添加的过程中上面的滑出选项卡到我的Drupal站点，我已经尝试任意添加代码到html.tpl.php和选项卡部分工作（有冲突错误）。但是我不断收到我的Superfish菜单的冲突错误。我在Drupal.org上阅读，使用该主题的template.php中的hook函数drupal_add_js来添加javascript，但是，当我以这种方式出现时，我看不到任何东西。 / p>

我错过了什么吗？如果有人可以帮助我，我会非常感激，我花了几天和几周的时间试图弄清楚这一点。

解决方案

我试过它，它的工作原理这样，
将以下代码放在page.tpl.php文件的顶部`

 < script type =text / javascript> 
 $（function（）{
 $（'。slide-out-div'）。tabSlideOut（{
 tabHandle：'.handle'，//将成为您的元素的类标签
 pathToTabImage：'images / contact_tab.gif'，//选项卡的图像路径//可选择可以使用css 
 imageHeight：'122px'，//选项卡图像的高度//可选择可以使用css 
 imageWidth：'40px'，//选项卡图像的宽度//可选地可以使用css 
 tabLocation：'left'，//屏幕的一边tab， ，右，底或左
速度：300，//动画速度
动作：'点击'，//选项：'点击'或'悬停'，动作触发动画
 topPos：'200px'，//从顶部的位置/如果tabLocation为左或右，则使用
 leftPos：'20px'，// position from left / use if tabLocation is bottom or top 
 fixedPosition：false // options：true make it stick（fixed position）on scroll 
}）; 
 
}）; 
 
< / script>`
  

放置图像图像/ contact_tab。 gif在您的主题的图像文件夹中，并用sites / all / themes / YOUR_THEME / images / contact_tab.gif将字符串替换为主题文件夹名称的YOUR_THEME

然后将CSS的代码放在您的主题的css文件中，无需按照如下方式。

  .slide-out-div {
 padding：20px; 
 width：250px; 
背景：#ccc; 
 border：1px solid＃29216d; 
} 
  

并在page.tpl.php的底部放入以下代码

 < div class =slide-out-div> 
< a class =handlehref =http：//link-for-non-js-users.html> Content< / a> 
< h3>与我联系< / h3> 
< p>感谢您查看我的jQuery插件，希望您能发现这有用。 
< / p> 
< p>这可以是提交反馈的表单，或联系信息< / p> 
< / div> 
  

There is no module for Drupal that acts as a sliding tab (on hover) so I would like to incorporate this one, http://www.building58.com/examples/tabSlideOut.html into my site.

In the process of trying to add the above slide-out tab to my Drupal site, I have tried arbitrarily adding the code to the html.tpl.php and the tab partially worked (with conflict errors). However I kept receiving a conflict error with my Superfish menu. I read up on Drupal.org to add the javascript using the hook function drupal_add_js in the template.php for the theme, however I don't see anything at all, as far as the tab, appearing when I do it this way.

Am I missing something? If anyone can help me out, I'd greatly appreciate it, I have spent days and weeks trying to figure this out.

解决方案

i tried it and it works this way, put the following code in the page.tpl.php file at the top `

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

put the image images/contact_tab.gif in the image folder of your theme and replace the string with "sites/all/themes/YOUR_THEME/images/contact_tab.gif" replae YOUR_THEME with the theme folder name

then put the code of css in the css file of your theme without tage as follow

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

and in the bottom of the page.tpl.php put the following code

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

这篇关于将TabSlideOut javascript添加到Drupal 7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！