php - Drupal 7 で tabslideout を実装する

Question

jquery プラグイン tabslideout を自分の Drupal 7 サイトに追加しようとしています (テーマ 何度も説明されていますが、この例を 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」要素が含まれています。

/////////////コメント/提案をありがとう！//////////////////////