26 lines
No EOL
2.4 KiB
Markdown
26 lines
No EOL
2.4 KiB
Markdown
# Алгоритм решения
|
||
|
||
<ol>
|
||
<li>Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.</li>
|
||
<li>Найти все кнопки</li>
|
||
<li>Присвоить им обработчики</li>
|
||
<li>Обработчик будет ловить событие на кнопке и удалять соответствующий элемент.</li>
|
||
<ol>
|
||
|
||
# Вёрстка
|
||
|
||
Исправьте HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопку лучше сделать как `div`, а картинка --- будет его `background`. Это более правильно, чем `img`, т.к. в данном случае картинка является *оформлением кнопки*, а оформление должно быть в CSS.
|
||
|
||
Расположить кнопку справа можно при помощи `position: relative` для `pane`, а для кнопки `position: absolute + right/top`. Так как `position: absolute` вынимает элемент из потока, то кнопка может перекрыть текст заголовка. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
|
||
|
||
Потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
|
||
|
||
# Обработчики
|
||
|
||
Для того, чтобы получить кнопку из контейнера, можно найти все `IMG` в нём и выбрать из них кнопку по `className`. На каждую кнопку можно повесить обработчик.
|
||
|
||
# Решение
|
||
|
||
[edit src="solution"]Решение в песочнице[/edit]
|
||
|
||
Для поиска элементов `span` с нужным классом в нём используется `getElementsByTagName` с фильтрацией. К сожалению, это единственный способ, доступный в IE 6,7. Если же эти браузеры вам не нужны, то гораздо лучше -- искать элементы при помощи `querySelector` или `getElementsByClassName`. |