使用Drupal7实现tabslideout

Question

我正在尝试添加一个jquery插件到我的Drupal7站点(这个主题已经解释过很多次了，我在Drupal7中使用了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‘元素。

/非常感谢您的任何意见/建议！/

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()；

干杯。