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/

哪里是代码好友？ – diEcho 2011-05-21 08:05:22

请提供您的代码。 – 2011-05-21 08:11:48

答

这里有一个教程：

Creating a Floating HTML Menu Using jQuery and CSS

答

你可以使用CSS，并给出了菜单的位置风格：固定

要知道这不会在Internet Explorer 6的工作。对于Internet Explorer，您可以使用jQuery重新定位该项目。使用条件标签包括设置你的菜单位置的样式表：绝对的，然后使用类似下面剪断移动你的DIV，当滚动窗口：

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

注意滚动听众会触发很多，所以你可能想限制它来消除任何性能问题。欲了解更多信息，请参阅John Resigs博客文章here。

这不是我要找的...现在我已经更新了代码 – Elankeeran 2011-05-21 09:20:55

答

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

答

您可能想查看Toolbar.js。它创建一个工具提示，如工具栏，您可以在其中添加各种控件。它非常好看，非常可定制。

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

jquery中的浮动菜单工具栏

相关推荐