На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Верстка с помощью jQuery


Да-да, я ничего не перепутал, я собираюсь вам показать, как верстать с помощью jQuery (javascript). Зачем и как? Читайте ниже!

Зачем верстать с помощью jQuery?

Чаще всего jQuery (в общем случае javascript, но удобнее пользоваться именно JQuery поэтому здесь и далее я буду писать о нем) применяют для верстки тогда, когда нельзя (или нерационально) влиять на исходный код. Например, добавить элемент. Рассмотрим конкретный пример.

Есть виджет для вордпресс под названием «Recent Posts Extended» - для вывода последних (и не только) записей. Он очень прост и удобен в работе, даже гибок. Но в моей практике всегда имеют место быть такие ситуации, когда даже гибкости самого гибкого плагина/виджета не хватает. Так и в этом случае.

Смотрите, виджет формирует такой код: список записей, в которых есть картинка, название записи, цитата (несколько слов из записи), дата, а также дополнительная ссылка на «читать дальше».

С помощью CSS в данном случае мы можем сделать много: например, поменять элементы местами. Но в коде вывода не предусмотрена вставка дополнительных элементов. А что если мы хотим, к примеру, добавить горизонтальную черту (<hr>) перед заголовком у каждой выводимой записи? Такой настройки нет. А вот с помощью jQuery вопрос решается просто.

Как верстать с помощью jQuery?

Очень просто: в основном используем две функции: prepend() и append(). Первая вставляет текст или html код в начало нужного элемента, вторая – в конец. В нашем случае используем первую функцию в поле виджета «HTML или текст после вывода последних записей»:
<script>
jQuery(".rpwe-title > a").prepend('<hr class="chert-zagol">');
</script>
И вот мы видим необходимую черту:



Примечание. Есть и еще один способ решения данной задачи. Он заключается в том, чтобы залезть в исходный код виджета и добавить в него для вывода еще один элемент – эту самую пресловутую черту. Может быть, он даже более правильный. Но это более долгий путь, а иногда все приходится верстать быстро.



тегизаметки, javascript, jquery, верстка, хитрости





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Коллекции Java: введение
JS: сложение иногда совсем не сложение


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.