Adding TabSlideOut javascript to Drupal 7

问题

There is no module for Drupal that acts as a sliding tab (on hover) so I would like to incorporate this one, http://www.building58.com/examples/tabSlideOut.html into my site.

In the process of trying to add the above slide-out tab to my Drupal site, I have tried arbitrarily adding the code to the html.tpl.php and the tab partially worked (with conflict errors). However I kept receiving a conflict error with my Superfish menu. I read up on Drupal.org to add the javascript using the hook function drupal_add_js in the template.php for the theme, however I don't see anything at all, as far as the tab, appearing when I do it this way.

Am I missing something? If anyone can help me out, I'd greatly appreciate it, I have spent days and weeks trying to figure this out.

回答1:

i tried it and it works this way, put the following code in the page.tpl.php file at the top `

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

put the image images/contact_tab.gif in the image folder of your theme and replace the string with "sites/all/themes/YOUR_THEME/images/contact_tab.gif" replae YOUR_THEME with the theme folder name

then put the code of css in the css file of your theme without tage as follow

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

and in the bottom of the page.tpl.php put the following code

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

来源：https://stackoverflow.com/questions/9300258/adding-tabslideout-javascript-to-drupal-7

标签

javascript

jquery

drupal

tabs

slide