Динамическая подсказка jQuery - PullRequest
Новая
       21

Динамическая подсказка jQuery

0 голосов
/ 06 декабря 2011

У меня довольно специфический запрос.Я просматривал некоторые другие посты, но не могу найти однозначного ответа на этот вопрос, поэтому помощь приветствуется.

Я ищу подсказку jQuery, которая при наведении - обычная подсказка с текстомпо центру.Однако, когда вы щелкаете элемент, всплывающая подсказка расширяется влево (текст остается центрированным, поэтому кажется, что он перемещается влево, а центр подсказок перемещается влево), и под всплывающей подсказкой выдвигается раскрывающееся меню.Я все еще нахожусь на грани того, будет ли необходимо расширение, но я хочу, чтобы у меня была возможность выпадающего списка при нажатии.

Любая и вся помощь в этом будет принята с благодарностью.Спасибо!

РЕДАКТИРОВАТЬ *** Я написал некоторый код, который я не могу заставить работать.Сейчас я просто пытаюсь решить эту проблему с помощью div, надеясь, что смогу заменить div «toolTip» на форму всплывающей подсказки, а не просто на прямоугольник, но я хочу, чтобы все заработало, прежде чем я об этом подумаю.Любая помощь по следующему коду приветствуется.Спасибо!

Заранее извиняюсь за отсутствие некоторых отступов и прочего, я не знаю, почему мой код никогда не копирует и не вставляет сюда.

HTML: 

<div id="wrapper">

<div class="topIconNew">
</div>

<div class="topTip">
</div>

<div class="topDrop">
</div>

</div>

CSS: 

div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
    top:0;
    left:0;
}  

.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
    top:50px;
    left:450px;
cursor:pointer    
}

.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
    top:70px;
    left:450px;    
}    

.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
    top:90px;
    left:450px;        
}

jQuery 

$(document).ready(function() {

// tooltip hover
$("div.topIconNew").hover(
    function(){
        $("div.topTip").show();
    }
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(
    function(){
        //permanent tooltip
        $("div.topTip").show();
    },    
    function(){
        //widen tooltip
$("div.topTip").animate({width:200},"fast");
    },        
    function() {
        //show dropdown
        $("div.topDrop").slideDown(300);
    }
);
$("div.wrapper").click(
    function(){
        //hide dropdown (hide simultaneously)
        $("div.topDrop").hide();
    }
    function(){
        //hide tooltip (hide simultaneously)
        $("div.topTip").hide();
    {        
);

});

Любая и вся помощь очень ценится.Спасибо!

1 Ответ

1 голос
/ 06 декабря 2011

Предполагая, что сначала я построю

  1. Класс выпадающего меню, который может быть абсолютно позиционирован
  2. Класс всплывающей подсказки, который может быть абсолютно позиционирован

Было бы важно, чтобы эти классы были автономными, например, раскрывающийся список должен обрабатывать все события привязки и т. д. Сначала я подключаю элемент наведения к любому элементу, вызывающему всплывающую подсказку, затем позиционирую подсказку и устанавливаю текст. Затем я бы прикрепил событие onClick к тому же элементу и внутри, к которому я бы:

  1. Пометить всплывающую подсказку как «всплывающее окно больше не уничтожает его» (возможно, вместо этого используйте внешний щелчок по документу)
  2. Запустить анимацию для объекта всплывающей подсказки, который одновременно устанавливает позицию x на x-200 (например), а также устанавливает ширину на + 200 (.animate({x: '-=200', width: '+=200'}))
  3. Я бы прикрепил прослушиватель событий к animate, поэтому в конце анимации я бы прикрепил раскрывающийся список относительно всплывающей подсказки

Если вы кодируете их по отдельности, должно быть легко связать их все вместе. Вы действительно должны сосредоточиться на основных событиях в такой системе:

  1. Наведите указатель мыши на элемент для всплывающей подсказки
  2. Мышь на предмете для всплывающей подсказки
  3. Кликните на предмет, чтобы выскочить всплывающую подсказку и отметьте постоянство
  4. Присоединение выпадающего меню
  5. Реагирование на выпадающие события
...