Я пытаюсь воспроизвести функцию блокировки на сообщениях в facebook с помощью jquery и php/mysql.
Ниже приведено изображение, показывающее различные действия, которые он делает при нажатии.
Я думаю, что вы сделаете что-нибудь вроде hover, покажите скрытый div с помощью всплывающей подсказки, наведите указатель мыши, чтобы удалить его. В событии клика показывается другой скрытый div, но так или иначе нужно изменить цвета кнопок. Когда открывается диалоговое окно меню, у него есть меню, и если любой из них щелкнут, ему необходимо отправить результат на бэкэнд script с помощью ajax. После нажатия кнопки или щелчка за пределами divs он скроет все div, возможно, это просто щелчок, который закрывает его, поэтому, возможно, можно использовать переключатель?
Может кто-нибудь уточнить, что я иду в правильном направлении. Я havent использовал jquery очень или javascript. Любые примеры чего-то подобного или помощи были бы очень благодарны.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
Вам не нужен JavaScript для зависания. Создайте элемент, который будет использоваться в качестве подсказки и расположите его над кнопкой выпадающего меню. Затем сделайте родительский <div>
для обоих. Ваш HTML должен выглядеть примерно так:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Как только вы это сделаете, вы можете использовать CSS для размещения всплывающей подсказки и отображения ее при необходимости.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone hovering over the button. */
display: block;
}
Чтобы отобразить раскрывающийся список, вам, вероятно, понадобится JavaScript. Добавьте еще один элемент в контейнер:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Поместите его так, как вам нравится, используя position: absolute
и скройте его, используя display: none
. Затем покажите его, когда мы нажимаем кнопку:
$('#button').click(function() {
$('#selection').show();
});
Затем вы можете сделать свои подпозиции делать все, что им нравится, если они также скрывают #selection
.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Наконец, вы хотите изменить цвет фона и текста при наведении. Это достаточно легко:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
Это не будет работать отлично в IE 6 или (я считаю) 7 - вам нужно будет исследовать альтернативные решения для этого. Или используйте JavaScript или зарегистрируйтесь IE7.js и IE8.js.
Вот такой подход: