使用 Drupal 7 实现 tabslideout

Question

我正在尝试将 jquery 插件 tabslideout 添加到我的 Drupal 7 站点（主题 已经解释过很多次了，我在 Drupal 7 中使用了this example，但它在我的网站上不起作用。 我是一个绝对的菜鸟，我无法理解php，似乎我无法使函数工作。

首先，我在 .info 文件中添加了脚本。

接下来，我将以下代码添加到我的页面--front.tpl.php 文件中：

<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'sites/all/themes/temp3/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>

再往下：

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

而且，我添加了 CSS

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

只有 div 显示在页面上...

我也找到了这段代码，不幸的是它不能正常工作。

<script type="text/javascript">
(function($) {
Drupal.behaviors.tabslideout = {
    attach: function() {
$('.slide-out-div').tabSlideOut {
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'sites/all/modules/tabslideout/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: true                     //options: true makes it stick(fixed position) on scroll
};.next().hide();
};
 };
  })(jQuery);

</script>

我想肯定有一些我以前没有想到的完全不同的东西，因为我根本不知道，这让专家大笑；） 同一页面包含一个“flexslider”元素。

//////////// 非常感谢您的任何评论/建议！ ///////////////////////p>

Answer 1

尝试替换

<script type="text/javascript">
(function($) {
Drupal.behaviors.tabslideout = {
    attach: function() {
$('.slide-out-div').tabSlideOut {
tabHandle: '.handle',                     //class of the element that will become your tab
pathToTabImage: 'sites/all/modules/tabslideout/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: true                     //options: true makes it stick(fixed position) on scroll
};.next().hide();
};
};
  })(jQuery);

</script>

有

<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut {
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'sites/all/modules/tabslideout/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: true                     //options: true makes it stick(fixed position) on scroll
};
};

</script>

正如网站描述的那样

如果这不起作用，请尝试删除 .next().hide();

干杯。