• Страница 1 из 1
  • 1
Форум » II.jQuery » Начало работы с jQuery » Делаем автоматические "броские цитаты" в тексте (Интересные фразы, оформленные в рамку)
Делаем автоматические "броские цитаты" в тексте
1 Наверняка вы не раз видели в периодических журналах такой приём, когда среди общего основного потока текста выделяется наиболее интересный фрагмент.
Обычно, его шрифт отличается от основного, либо сам текст помещается в красивую рамку, чтобы привлечь внимание.

Подобное мы попытаемся реализовать в этом уроке.

Во-первых, для автоматической обработки предварительно договоримся, что "броские цитаты" будут формироваться из фрагментов текста, которые будут заключены в теги span с классом catchyQuotes.

В тексте статьи это будет выглядеть так:

Код
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="catchyQuotes">Lorem Ipsum has been the industry's standard dummy text</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Соответственно, наша программа должна будет найти все элементы span с классом catchyQuotes

Далее, все найденные элементы span необходимо будет продублировать.

Затем программа должна для каждого элемента span удалить класс catchyQuotes и добавить новый, pullQuotes.

И, наконец, нужно добавить на страницу все продублированные элементы span ("броские цитаты")

Изменить / Удалить

2 Для начала в шапке страницы, сразу после подключенной библиотеки jQuery, добавим еще одну пару тегов script:

Код
<script>
$(document).ready(function() {

}); // конец ready
</script>


Это всего лишь подготовительные действия к написанию программы. Как вы видите, здесь мы передаём функции document.ready() в качестве аргумента анонимную функцию.

делаем выборку, чтобы найти все элементы span с классом catchyQuotes:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes')
}); // конец ready
</script>


Выборку получили, теперь, чтобы обработать каждый элемент выборки в отдельности, берём функцию each() и передаём ей в качестве аргумента также анонимную функцию:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {

}); // конец each
}); // конец ready
</script>


Создаём копию элемента span с помощью функции clone(), результат сохраняем в переменную quote:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
}); // конец each
}); // конец ready
</script>


jQuery функция clone() дублирует элемент, включая весь html-код внутри него и присвоенные атрибуты.
Получается, что у нашего клона элемента span также присутствует класс catchyQuotes, он нам теперь не нужен, поэтому мы его удаляем, а добавляем класс pullQuote, отвечающий за оформление "броских цитат"

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
}); // конец each
}); // конец ready
</script>


И теперь добавляем элемент span на страницу:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
  $(this).before(quote);
}); // конец each
}); // конец ready
</script>


Код программы готов. Остались некоторые штрихи.

Изменить / Удалить

3 Нам нужно добавить в CSS-стили класс .pullQuote, отвечающий за оформление "броских цитат":

Код
.pullQuote {
    float: right;
    clear: right;
    width: 200px;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255, 211, 224, 0.5);
    border-radius: 5px;
    margin: 20px 0 10px 10px;
    font-style: italic;
}


Ну а теперь, в тексте нужно с помощью тегов span с классом catchyQuotes выделить участки кода, из которых вы хотите сделать "броские цитаты".

Смотрим что у нас получилось в итоге нашей работы.

Изменить / Удалить

Форум » II.jQuery » Начало работы с jQuery » Делаем автоматические "броские цитаты" в тексте (Интересные фразы, оформленные в рамку)
  • Страница 1 из 1
  • 1
Поиск: