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


Работа с атрибутами элементов на 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

5 красивых, но бесполезных эффектов на JQuery / CSS3

Собрал небольшую подборку из очень эффектных, впечатляющих и красивых вариантах применения CSS3 в совокупности JavaScript-библиотеки JQuery и ей подобных, но бесполезных. «Почему бесполезных?», — да банально потому, что  такие примеры не кроссбраузерны. А пока вы будете их адаптировать под все основные интернет-обозреватели, вам начнет нравится flash анимация, и вы скорее всего возненавидите JQuery.

Что касается браузера. Для просмотра лучше всего использовать Google Chrome, — как самый быстрый на сегодняшний день. Или Firefox на крайний случай. Или иные программы на базе движка webkit.

1. Капельки воды по стеклу

JQuery капли воды

По стеклу вниз стекают капельки воды / дождя, очень реалистичные надо заметить (если не приглядываться внимательно, — они всегда круглые). На втором плане помещается размытая фотография какого-нибудь красивого ночного пейзажа, например город с огоньками.

Просмотреть Скачать
(далее…)

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

Как в JavaScript обрезать строку

Сниппет, представленный далее, наглядно демонстрирует то, как в JavaScript  можно производить обрезку произвольных строк:

var stroka = 'Curabitur nibh libero suscipit a metus mi lacus';

alert(stroka.slice(0, -5));
// В конечной строке будет все, кроме 5 последних символов: 
// 'Curabitur nibh libero suscipit a metus mi'

alert(stroka.slice(0, 11));
// В конечной строке будет 11 символов, начиная от 0: 
// 'Curabitur n'

alert(stroka.slice(5, 12));
// В конечной строке будут символы с 5-го по 12-й: 
// 'itur ni'

(далее…)

Опубликовано 4-09-2013 в 14:22

Фотогалереи и слайдеры для ваших сайтов

Небольшая подборка из 5 различных фронтенд фотогалерей с использованием возможностей JQuery и аналогичных библиотек.

Фотогалерея GalleryView с автопроигрыванием

JQuery плагин GalleryView - фотогалерея на сайт

Фотогалерея под названием GalleryView представляет собой JQuery плагин. Есть функция автоматической прокрутки изображений. Справа, слева, снизу или сверху может отображаться небольшая панель навигации с превьюшками и кнопками управления. В верхнем левом углу есть небольшая иконка при нажатии на которую выпадает краткое описание фотографии.

Скачать Просмотреть
(далее…)

Опубликовано 4-09-2013 в 12:04

JQuery поиск всех email на странице в блоке

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

jQuery(document).ready(function($) {

    var text_block = $('#my_block_with_emails').text();
    var email_regularexp = /[\._a-zA-Z0-9-]+@[\._a-zA-Z0-9-]+/igm;
    var return_block = $('#finded_emails');
    var emails = text_block.match(email_regularexp);
    return_block.empty();

    $.each(emails, function(index, value) {
        return_block.append(value);
        (index !== emails.length - 1) ? return_block.append(', ') : '';
    });

})

(далее…)

Опубликовано 3-09-2013 в 16:03

Редирект на JavaScript с подтверждением

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

/**
 * Функция выполняет редирект на указанный url 
 * с выводом окошка подтверждения перехода.
 * Пример использования:
 * <a href="javascript:confirm_redirect('http://www.yandex.ru')">
 * Перейти на yandex.ru</a>
 * 
 * @param {string} url
 * @returns {undefined}
 */
function confirm_redirect(url) {
    // Сообщение для пользователей:
    var message = 'Вы действительно хотите продолжить?'
    if (confirm(message)) {
        location.href = url;
    }
}

А вот, как это будет выглядеть все это в полностью рабочем варианте, если разбавить все HTML и поместить на веб-страничку: (далее…)

Опубликовано 2-09-2013 в 12:55



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

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

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

Blogroll:

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