Barra de herramientas del menú flotante en jquery

Question

Intento crear un menú flotante como el editor Aloha pero no funciona correctamente. Cualquiera me puede ayudar con el ejemplo básico para el menú flotante en jquery.

No estoy buscando para el menú flotante que necesita la barra de herramientas similares flotando en el editor de 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> 

ejemplo barra de herramientas flotante http://elankeeran.com/manish/prototype/alohaEditor/

Answer 1

Hay un tutorial aquí:

Creating a Floating HTML Menu Using jQuery and CSS

Answer 2

Usted sólo puede usar CSS, y darle al menú de un estilo de posición: fijo

Sólo ten en cuenta que esto no funcionará en Internet Explorer 6. Para Internet Explorer, puede usar jQuery para reposicionar el elemento. Use un código condicional para incluir una hoja de estilo que establece su menú a la posición: absoluta y luego usar algo como el cortado con tijeras abajo para mover el div, cuando la ventana se desplaza:

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

Tenga en cuenta que el oyente de desplazamiento dispara una mucho, por lo que es posible que desee estrangularlo para negar cualquier problema de rendimiento. Para obtener más información al respecto, consulte la publicación de blog John Resigs here.

Answer 3

¡Yo quería hacer lo mismo y encontré un gran tutorial here!

Answer 4

Es posible que desee ver Toolbar.js. Crea una información sobre herramientas como la barra de herramientas en la que puede agregar varios controles. Es muy bonito y muy personalizable.

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