Простые JavaScript и JQuery, а также MooTools-примеры.


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

Пара примеров с использованием JQuery-методов .after() и .before().

.after()

Имеем:

<script>
$(document).ready(function() {
    $("#raz-after").after("<p>JQuery - метод .after()</p>");
});
</script>
<div class="tak-dlya-primera">
    <div id="raz-after">
    </div>
</div>

Получаем:

<div class="tak-dlya-primera">
    <div id="raz-after">
    </div><p>JQuery пример с методом .after()</p>
</div>

(далее…)

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

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

Несколько не сильно сложных примеров с JQuery-методами .append(), .prepend().

.append()

Было:

<script>
$(document).ready(function() {
    $("#demka-odin").append("<p>JQuery пример с методом .append()</p>");
});
</script>
<div class="obichnii-div">
    <div id="demka-odin">
    </div>
</div>

Станет:

<div class="obichnii-div">
    <div id="demka-odin">
    <p>JQuery пример с методом .append()</p></div>
</div>

Как видим метод .append() вставляет тег между тегами блочных div-элементов под общим идентификатором #demka-odin. (далее…)

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

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

JQGrid: решение проблемы с шириной таблицы и колонок

Если вам когда-нибудь нужно было по-быстрому реализовывать  мощные таблицы в онлайне, чтобы пользователи могли забивать в них свои данные, что-то там вычислять и т.п., — в общем некое упрощенное подобие Microsoft Excell, то вряд ли вы не могли бы не заметить такую замечательную реализацию решения сей задачи, как например JQuery плагин под названием JQGrid.

Однако хватит лирики, давайте-ка я приведу решение такой проблемы, как установка правильной ширины ячеек таблицы и общей ширины таблицы. В общем, что можно сделать, если колонок много, они не умещаются в width окна / экрана / заданного блочного элемента. По крайней мере для меня это совсем недавно было очень большой проблемой, т.к. я полагал, что весь вопрос должен был бы решаться с помощью установки autowidth в true, ан нет, не все так просто, к сожалению.

Скачать полный пример с JQGrid

Описание задачи:

Итак, имеем таблицу с N-м количеством столбцов, каждый из которых имеет фиксированную ширину. Также мы имеем блочную верстку с фиксированной шириной. Задача: сделать так, чтобы таблица не выползала куда не следует. В общем смотрите скриншот:

JQGrid ширина колонок и ширина самой таблицы (далее…)

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

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

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

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

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

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



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

  • Эрик: к записи Спасибо, помогло) 20 минут мучался) »
  • steblo: к записи спаисбо »
  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »

Статистика спама

Blogroll:

  • Информация тут. →

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