Как я могу заставить DIV делать это с помощью jquery?

0

Я пытаюсь воспроизвести функцию блокировки на сообщениях в 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

  • 0
    Очень похоже на Facebook.
  • 0
    посмотрите на селекторы и функцию hide ()
Показать ещё 1 комментарий

2 ответа

4
Лучший ответ

Вам не нужен 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.

  • 0
    спасибо, что должно заставить меня начать ценить это
0

Вот такой подход:

  • Для зависания проверьте jQuery событие hover, чтобы изменить различные состояния изображения.
  • Для всплывающей подсказки есть несколько плагинов jQuery, таких как qTip, что вы можете достичь чего-то вроде этого
  • Для нажатия jQuery событие click будет делать трюк
  • Выпадающее меню будет немного сложнее. Вам нужно будет использовать комбинацию методы ajax и методы выбора для изменения страницы (например, пули)
  • Наконец, вам нужно будет выполнить какой-либо запрос, когда страница изначально загружается, чтобы узнать, какой параметр выбран, затем отобразите выделение. Это можно сделать либо с помощью php при загрузке страницы, либо с помощью запроса ajax, как указано выше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню