jquery中的浮動菜單工具欄

我嘗試創建一個浮動菜單，如Aloha編輯器，但無法正常工作。任何人都可以幫助我用jQuery中的浮動菜單的基本示例。jquery中的浮動菜單工具欄

我不是在尋找菜單浮動我需要類似的工具欄漂浮在阿羅哈編輯

$(document).ready(function() { 
      var fBox = $('#box'); 
       fBox.draggable(); 
       $(".columns").click(function(e){ 
       var mouseXPos = e.pageX; 
       var mouseYPos = e.pageY; 
       console.log("mouseXPos:" + mouseXPos + "cleft:" +mouseYPos); 
       fBox.animate({top:mouseYPos},1000); 
       fBox.animate({left:mouseXPos},1000); 
       }); 
      });

CSS

<style> 
     #page{width:600px;margin:0 auto;} 
     #page .columns{float:left;width:250px;} 
     #box{ background-color: #FFFFFF; 
    border: 1px solid #CCCCCC; 
    left: 749px; 
    opacity: 0.9; 
    padding: 0 10px; 
    position: absolute; 
    top: 35px; 
    width: 216px;} 
     </style>

HTML

<div id="page"> 
      <div class="columns"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div class="columns"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 
      <div id="box"> 
       <h2>hello world</h2> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
      </div> 
     </div>

例如浮動工具欄http://elankeeran.com/manish/prototype/alohaEditor/

來源

2011-05-21 Elankeeran

哪裏是代碼好友？ – diEcho 2011-05-21 08:05:22

請提供您的代碼。 – 2011-05-21 08:11:48

這裏有一個教程：

Creating a Floating HTML Menu Using jQuery and CSS

來源

2011-05-21 08:06:10

你可以使用CSS，並給出了菜單的位置風格：固定

要知道這不會在Internet Explorer 6的工作。對於Internet Explorer，您可以使用jQuery重新定位該項目。使用條件標籤包括設置你的菜單位置的樣式表：絕對的，然後使用類似下面剪斷移動你的DIV，當滾動窗口：

$(window).scroll(function() { 
    $('#myElement').css('top', $(this).scrollTop() + "px"); 
});

注意滾動聽衆會觸發很多，所以你可能想限制它來消除任何性能問題。欲瞭解更多信息，請參閱John Resigs博客文章here。

來源

2011-05-21 08:38:36 addedlovely

這不是我要找的...現在我已經更新了代碼 – Elankeeran 2011-05-21 09:20:55

我想要做同樣的事情，我發現了一個很棒的教程here！

來源

2012-01-03 05:38:27 alex

您可能想查看Toolbar.js。它創建一個工具提示，如工具欄，您可以在其中添加各種控件。它非常好看，非常可定製。

Toolbar.js - A jQuery Plugin To Create Responsive Tooltip Style Toolbars

來源

2013-01-30 09:41:46 Hirvesh

jquery中的浮動菜單工具欄

回答

相關問題