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


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

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













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

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

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