Archive for the ‘JavaScript’ Category

jQuery autocomplete

Июнь 12, 2010

У разрабатываемой системы для составления расписания колледжа довольно таки специфическая модель данных. Если еще на это наложить некоторые жизненные ограничения (невозможность в реальном времени показывать в холе расписание, т.к. нету большого экрана, а листики никто менять ежедневно не будет), то приходится придумывать некоторые извращения, чтобы удовлетворить требования заказчика.

Одним из таких требований является организация так называемых «объеденённых» групп. Например, объединённая группа по немецкому состоит из представителей нескольких групп. Вот именно организация выбора группы или нескольких групп для создания занятия и было основной головной болью.

В jQuery 1.8 был добавлен «родной» autocomplete (раньше для этого использовались различные плагины). А в статье How to Use the jQuery UI Autocomplete Widget как раз и расписан нужный мне use-case. Прям бери и копипасть :)

Всё разжевано (не только исходники но и css), есть live example а так же подготовленный пак с исходниками.

Перетаскиваемое расписание

Апрель 15, 2009

Так как у детей в ХТТ достаточно мало времени на самостоятельное освоение и написание диплома, то придётся им помогать.

Марина делает систему для поддержки деятельности учебной части. Проще говоря, удобный интерфейс для работы с расписанием. Делаться всё это будет на PHP и MySQL. Это мой тактических ход. Тема сама по себе очень хороша. Ведь доступ к расписанию можно дать многим и у каждого будут свои привилегии. Для того, чтобы потом в будущем можно было развивать  систему в этом направлении я решил, что лучше использовать легкий клиент в виде браузера, а PHP обладает очень низким порогом вхождения. На сервере пусть крутиться MySQL. Не понравиться — тогда поставлю «слоника» (PostgreSQL).

Как всегда, расписание отображается в виде сетки. Вверху будет время, а слева любое другое измерение (преподаватели, аудитории, гпуппа).

Схема расписания занятий

Схема расписания занятий

Для того, чтобы это всё было «юзабельным» лучше всего реализовать возможность перетаскивания занятий по сетке. Причём сетка должна быть «заморожена», т.е. при прокручивании расписания верх и левая сторона не изчезают из поля зрения.

Для реализации перетаскиявания подойдет jQuery, а именно draggable и droppable. Лучше конечно про все эти «плюшки» почитать на официальном сайте. Но, как показала практика быстрое вливание на русском будет в моём случае более продуктивнее. В итоге у меня просто таскаемый прямоугольник :)

Для начала то что надо.

jQuery magic

Февраль 19, 2009

logo_jquery_215x53Что такое jQuery скорее всего уже все знают (а если не знают, то бегом читать…). Но некоторые методы данного JS фреймворка для меня казались бесполезными (какой я был наивный :))

Рассмотрим мой конкретный пример. У меня в ячейке таблицы находится линк. При нажатии на этот линк мне необходимо получить ссылку на строку, в которой находиться данный линк.

Я поначалу воспользовался методом

.parents("tr")

Но меня ждал сюрприз. (Дети, внимательно читайте документацию !!!). Оказывается данный метод вернет всех родителей в дереве, которые являются строками таблицы. Т.е. если наша таблица вложена в еще одну таблицу (а такой вариант на 100% вам попадётся) то вы получите и родительскую строку, и прородительскую. А мне такого не надо.

На помощь приходит базовый фильтр eq. Написав

.parents("tr:eq(0)")

я как раз и получил только первую строку таблицы. Кстати, рекомандую заглянуть на страницу справки данного фильтра. Там очень интересные примеры использования.

И напоследок, есть возможность устновить себе на комптютер offline версию хелпа по jQuery, которая выполнена в виде AIR приложения.