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

这里有一个教程：

Creating a Floating HTML Menu Using jQuery and CSS

Answer 2

我想做同样的事情，我发现了一个很棒的教程here！

Answer 3

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

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

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

请注意滚动侦听器会激发很多内容，因此您可能希望对其进行限制以消除任何性能问题。有关详情，请参阅John Resigs博文here。

Answer 4

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

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

jquery中的浮动菜单工具栏

4 个答案: