JQuery — как вставить элемент на страницу: .insertAfter(), .insertBefore()

Немного о различных методах динамичной вставки элементов в содержимое веб-страницы, просто в примерах.

.insertAfter()

Имеем:

<script>
$(document).ready(function() {
    $("<p>Пример первый</p>").insertAfter("#primer-pervii");
});
</script>
<div class="prosto-div">
    <div id="primer-pervii">
    </div>
</div>

Получим:

<div class="prosto-div">
    <div id="primer-pervii">
    </div><p>Пример первый</p>
</div>

Как видим абзац вставился ПОСЛЕ заданного элемента. (далее…)

Опубликовано 9-12-2013 в 15:30

Что нового появилось в JQuery 2.0-2.0.x

Как известно библиотека JQuery позволяет упростить ряд вещей в веб-разработке. Напомню вам известный слоган  «write less, do more», что можно понимать, как «пиши меньше, делай больше» / «писать меньше, делать больше».

Итак, в JQuery 2.0 команда разработчиков не стала добавлять множество новых функций,  -вместо этого они занялись внесением ряда поправок и исправлений в программном коде. (далее…)

Опубликовано 14-11-2013 в 12:41

Какие JQuery плагины и библиотеки есть в Drupal по умолчанию

Итак, как известно Drupal — это очень мощная система управления содержимым сайтов. По умолчанию она имеет ряд встроенных в систему скриптов на JavaScript, библиотек и JQuery плагинов. Ниже я попытаюсь перечислить те, что известны мне на сегодняшний момент, — в дальнейшем этот список возможно будет дополняться.

jquery

  • JQuery. Правда на сегодня уже очень старая версия (1.4.4), но тем не менее пригодная к использованию.
  • JQuery UI. Набор не полный. К примеру есть диалоговые окна (ui.dialog), вкладки (ui.tabs), календарик (ui.datepicker), слайдер-ползунок (ui.slider), аккордеон (ui.accordion) и т.п., но нет всплывающих подсказок (ui.tooltips), что весьма досадно.
  • Плагин для удобной, простой работы с куками — jquery.cookie.js.
  • Плагин JQuery Form (jquery.form.js) — для какой-то там обработки форм.
  • Плагин jQuery BBQ — для работы с историей браузера (?).
  • Плагин jQuery Once (1.2) — какое-то старье, по-моему включенное в сборку самой JQuery в её последних версиях.

(далее…)

Опубликовано 12-11-2013 в 15:32

JQuery селекторы: как получить элемент по тексту между двумя тегами

Выбирать HTML-элементы на веб-странице в JQuery можно с помощью специального селектора element:contains(‘text’). А теперь давайте сразу перейдем к примерам.

Пример 1.

Выбираем элемент <strong> по тексту внутри него и окрашиваем этот текст серым цветом.

JavaScript:

$("strong:contains('Как установить MODX Evolution')").css({color: 'silver'});

HTML: (далее…)

Опубликовано 31-10-2013 в 15:59

Как сделать JQuery прелоадер на загрузку веб-страницы

Используя достаточно незамысловатую конструкцию с $(window).bind('load',function(){ }); можно реализовать простой вариант заглушки, которую будут видеть пользователи, переходя на страницу вашего веб-приложения, пока все элементы не будут загружены. Именно веб-приложения, потому что с обычным веб-сайтом это нецелесообразно по соображениям здравого смысла, потому как вряд ли сегодняшние посетители будут ждать даже пару десятков секунд пока загрузится какая-то там страницы с какой-то информацией.

(далее…)

Опубликовано 17-10-2013 в 14:14

Работа с атрибутами элементов на JQuery

Чуть ниже будут рассмотрены примеры различных вариантов установки, удаления атрибутов у HTML элементов на странице средствами JavaScript библиотеки JQuery.

Пример 1. Установка значения атрибута. Сделаем инпут-кнопку неактивной.

JavaScript:

$('[name="apply"]').attr('disabled', 'disabled');

HTML:

<input type="submit" id="apply" value="Применить" name="apply" />

Пример 2. Установка нескольких значений нескольких атрибутов. Добавим полю ввода класс CSS .new и впишем в него надпись GoogleBot.

JavaScript: (далее…)

Опубликовано 15-10-2013 в 16:33

Как на JQuery по мере ввода информации пользователем добавить новый элемент на страницу

Небольшая заметка о том, как динамически добавлять элементы формы с использованием JQuery / JavaScript. Это полезно, когда DOM уже загружен, и вы должны добавить дополнительный элемент, полагаясь на действия пользователей (событие change). Разумееется так вы можете вставлять на страницу любые новые элементы формы, а не только поля ввода. В качестве альтернативы вы также можете создать форму входа на странице и просто скрыть её, а затем показать, когда она потребуются.

(далее…)

Опубликовано 15-10-2013 в 10:07













Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты