问题描述
没有Drupal的模块用作滑动选项卡（在悬停上），因此我想将这个模块合并到一起，到我的网站。
在尝试添加的过程中上面的滑出选项卡到我的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！