2014-09-06 67 views
2

我有這個代碼,其中有3個鏈接,但是當我點擊鏈接時,在Firefox的頁腳欄上顯示鏈接,但不打開鏈接。如果點擊鼠標滾輪,打開頁面。鼠標的sx按鈕在其他網站或Windows功能上正常工作。jquery插件 - toolbar.js>鏈接不工作

<head> 
<link href="tooltip/documentation.css" rel="stylesheet" /> 
<link href="tooltip/jquery.toolbars.css" rel="stylesheet" /> 
<link href="http://fonts.googleapis.com/css?family=Lustria" rel="stylesheet" type="text/css"> 
<!--[if gte IE 9]> 
<style type="text/css"> 
      .gradient { 
       filter: none !important; 
      } 

      .tool-container.tool-top { 
       border-bottom: none; 
      } 

      </style> 
<![endif]--> 
<link href="tooltip/bootstrap.icons.css" rel="stylesheet"> 
<link href="tooltip/prettify.css" rel="stylesheet"> 
<link href="tooltip/sunburst.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="tooltip/prettify.js"></script> 
<script src="tooltip/jquery.toolbar.js"></script> 
<script type="text/javascript"> 
      jQuery(document).ready(function($) { 

       // Define any icon actions before calling the toolbar 
       $('.toolbar-icons a').on('click', function(event) { 
        event.preventDefault(); 
       }); 
       $('.settings-button').toolbar({content: '#user-options', position: 'bottom'}); 
       $('#normal-button').toolbar({content: '#user-options', position: 'top'}); 
       $('.normal-button-bottom').toolbar({content: '#user-options', position: 'bottom'}); 
       $('.normal-button-small').toolbar({content: '#user-options-small', position: 'top', hideOnClick: true}); 
       $('#button-left').toolbar({content: '#user-options', position: 'left'}); 
       $('#button-right').toolbar({content: '#user-options', position: 'right'}); 
       $('#link-toolbar').toolbar({content: '#user-options', position: 'top' }); 
      }); 
     </script> 
</head> 

</head> 

<body onload="prettyPrint()"> 


<div id="normal-button-bottom" class="settings-button"> <img src="tooltip/icon-cog-small.png" /> </div> 
<br><br> 
<div id="normal-button-bottom" class="settings-button"> <img src="tooltip/icon-cog-small.png" /> </div> 


<div id="user-options-small" class="toolbar-icons" style="display: none;"> 
    <a href> 
     <i class="icon-align-left"></i> 
    </a> 
    <a href>  
     <i class="icon-align-center"></i> 
    </a> 
    <a href> 
     <i class="icon-align-right"></i> 
    </a> 
</div> 
<div id="user-options" class="toolbar-icons" style="display: none;"> 
    <a href="http://google.it"> 
     <i class="icon-user"></i> 
    </a> 
    <a href="http://yahoo.it"> 
     <i class="icon-star"></i> 
    </a> 
    <a href="http://www.tiscali.it"> 
     <i class="icon-edit"></i> 
    </a> 
    <a href="#"> 
     <i class="icon-trash"></i> 
    </a> 
    <a href="#"> 
     <i class="icon-ban-circle"></i> 
    </a> 
</div> 
</body> 

</html> 

如何鏈接工作?

感謝

回答

2
jQuery(document).ready(function ($) { 
    // Define any icon actions before calling the toolbar 
    $('.toolbar-icons a').on('click', function (event) { 
     event.preventDefault(); 
    }); 
    $('.settings-button').toolbar({ 
     content: '#user-options', 
     position: 'bottom', 
    }); 
    $('.settings-button').on('toolbarItemClick', function (e, el) { 
     if (el.href) window.location.href = el.href; 
    }); 
}); 

就用它來

+0

做工精細。謝謝 – Frankie 2014-09-09 10:51:19