Блог

Я пытаюсь создать плавающее меню, подобное Aloha editor, но оно не работает должным образом. Любой может помочь мне с базовым примером для плавающего меню в 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 /

Здесь есть руководство:

Создание плавающего HTML-меню с использованием jQuery и CSS

Я хотел сделать то же самое, и я нашел отличный учебник здесь!

Вы можете просто использовать CSS и придать меню стиль расположения: исправлено

Просто имейте в виду, что это не будет работать в Internet Explorer 6. Затем для Internet Explorer вы можете использовать jQuery для изменения положения элемента. Используйте условный тег, чтобы включить таблицу стилей, которая устанавливает для вашего меню значение position: absolute, а затем используйте что-то вроде приведенного ниже для перемещения вашего div при прокрутке окна:

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

Имейте в виду, что прослушиватель прокрутки часто срабатывает, поэтому вы можете отключить его, чтобы устранить любые проблемы с производительностью. Подробнее об этом читайте в блоге Джона Рэгса здесь.

Возможно, вы захотите увидеть Toolbar.js . Это создает всплывающую подсказку, подобную панели инструментов, в которую вы можете добавлять различные элементы управления. Это действительно красиво выглядит и очень настраиваемо.

Toolbar.js — Плагин jQuery для создания адаптивных панелей инструментов в стиле всплывающих подсказок