将TabSlideOut javascript添加到Drupal 7

Drupal没有模块作为滑动选项卡（悬停），所以我想将这一个，http://www.building58.com/examples/tabSlideOut.html加入我的网站。将TabSlideOut javascript添加到Drupal 7

在试图将上述滑出标签添加到我的Drupal站点的过程中，我试图任意将代码添加到html.tpl.php，并且选项卡部分工作（带有冲突错误）。但是，我一直收到与我的Superfish菜单冲突错误。我在Drupal.org上阅读，在template.php中为主题添加了使用钩子函数drupal_add_js的javascript，但是根本没有看到任何内容，只要选项卡出现在我这样做的时候。

我错过了什么吗？如果任何人都可以帮助我，我将不胜感激，我花了好几天和几周的时间试图弄清楚这一点。

来源

2012-02-15 Robert Goodall

我尝试过了，是这样工作的，放在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”替换主题文件夹名称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>

来源

2012-06-04 11:09:04

将TabSlideOut javascript添加到Drupal 7

回答

相关问题