實現tabslideout使用Drupal 7

Question

我想一個jQuery插件tabslideout添加到我的Drupal 7個網站（主題 它解釋了很多次了，我用this example爲Drupal 7，但它並不在我的網站工作。 我絕對的菜鳥，我不能讓我的周圍的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（）;

乾杯。