Плавающая панель инструментов меню в jquery - PullRequest
Новая
       2

Плавающая панель инструментов меню в jquery

5 голосов
/ 21 мая 2011

Я пытаюсь создать плавающее меню, такое как редактор 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/

Ответы [ 4 ]

2 голосов
/ 21 мая 2011
1 голос
/ 03 января 2012

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

0 голосов
/ 30 января 2013

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

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

0 голосов
/ 21 мая 2011

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

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

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

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

...