將TabSlideOut javascript添加到Drupal 7

Drupal沒有模塊作爲滑動選項卡（懸停），所以我想將這一個，http://www.building58.com/examples/tabSlideOut.html加入我的網站。將TabSlideOut javascript添加到Drupal 7

在試圖將上述滑出標籤添加到我的Drupal站點的過程中，我試圖任意將代碼添加到html.tpl.php，並且選項卡部分工作（帶有衝突錯誤）。但是，我一直收到與我的Superfish菜單衝突錯誤。我在Drupal.org上閱讀，在template.php中爲主題添加了使用鉤子函數drupal_add_js的javascript，但是根本沒有看到任何內容，只要選項卡出現在我這樣做的時候。

我錯過了什麼嗎？如果任何人都可以幫助我，我將不勝感激，我花了好幾天和幾周的時間試圖弄清楚這一點。

來源

2012-02-15 Robert Goodall

我嘗試過了，是這樣工作的，放在page.tpl.php中的文件下面的代碼頂部`

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

把圖像的圖像/ contact_tab.gif形象將主題文件夾替換爲「sites/all/themes/YOUR_THEME/images/contact_tab.gif」替換主題文件夾名稱YOUR_THEME

然後將css代碼放入主題的css文件中如下

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

，並在page.tpl.php中的底部，把下面的代碼

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

來源

2012-06-04 11:09:04

將TabSlideOut javascript添加到Drupal 7

回答

相關問題