jquery中的浮动菜单工具栏

Question

我尝试创建像Aloha编辑器一样的浮动菜单，但它无法正常工作。 任何人都可以帮助我在jquery中使用浮动菜单的基本示例。

我不是在寻找菜单浮动我需要在Aloha编辑器中浮动类似的工具栏

$(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/

Answer 1

这里有一个教程：

使用jQuery和CSS创建浮动HTML菜单

Answer 2

我想做同样的事情，我在这里找到了一个很棒的教程！

Answer 3

您可能想要查看Toolbar.js。 它会创建一个类似工具栏的工具提示，您可以在其中添加各种控件。 它非常漂亮，非常可定制。

Toolbar.js - 一个用于创建响应式工具提示样式工具栏的jQuery插件

Answer 4

您可以使用CSS，并为菜单提供一种位置：固定

请注意，这不适用于Internet Explorer 6.对于Internet Explorer，您可以使用jQuery重新定位项目。 使用条件标记包含一个样式表，用于将菜单设置为position：absolute，然后在滚动窗口时使用类似下面剪切的内容移动div：

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

请注意，滚动侦听器会触发很多内容，因此您可能希望限制它以消除任何性能问题。 欲了解更多有关该看到约翰Resigs博客文章在这里 。