На нашем сайте мы используем 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>
И вот мы видим необходимую черту:



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


Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

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





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


Что такое Java или особенности языка
Урок 10. Создание переменной JavaScript: var


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