Фрагменты кода JQuery, которые делают красивый интерфейс

Question

Мы создаем веб-приложение, которое должно быть разработано, чтобы быть полностью 2.0 (AJAX-ed и что нет).

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

Я нашел такие вещи, как SlideDown в его 'API, который будет перемещать элемент в поле зрения.

Мне интересно, что еще может сравнительно легко создавать красивые интерфейсы.

Библиотеки или ядро ​​JQuery в порядке.

Answer 1

Как более опытный пользователь, я бы посоветовал сначала составить ваши идеи, а затем искать jQuery-плагины (jQueryUI - фантастика, но есть множество сторонних плагинов), которые улучшат это. дизайн с точки зрения UX. Хороший дизайн и рабочий процесс начинаются с планирования - очень похоже на разработку. Красивый интерфейс всегда будет начинаться с солидного дизайна.

Answer 2

Посмотрите на jQuery UI . Он предоставляет красивый набор базовых компонентов, включая поддержку тем.

Answer 3

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

Это говорит ...

• fadeIn () и fadeOut (), slideDown () и т. Д. - все это хорошо, но animate () - их дедушка. Вы можете анимировать любое свойство CSS, которое вам нравится . Если вам не нужно анимировать свойства, просто измените их, гораздо понятнее определить классы CSS и использовать addClass () и removeClass () или toggleClass ().
• эффект jQuery UI выделение хорошо, когда вы используете AJAX для добавления чего-либо на экран; это как "эй, посмотри на это на секунду!" затем постепенно возвращается к норме. (jQuery также упрощает AJAX; эти функции являются простыми оболочками для низкоуровневого интерфейса , который имеет больше опций)
• Если у вас есть много всплывающих элементов на странице (например, списки продуктов), и вы начинаете скрывать / показывать некоторые из них в соответствии с критериями пользователя, способ настройки поплавка выглядит довольно круто

«Красивый интерфейс» субъективен, но если вы пользуетесь Google для сайтов, использующих jQuery (некоторые связаны с собственной страницей jQuery), вы можете найти понравившиеся сайты и использовать инструменты разработчика Firebug или Chrome для проверки их jQuery

Answer 4

jQuery UI - неплохое место для запуска пользовательского интерфейса, но есть множество плагинов для jQuery, которые могут сделать вашу жизнь проще. Зачем изобретать велосипед, если кто-то уже изобрел его лучше?

Я наткнулся на отличный сайт с ресурсами для дизайнеров, использующих jQuery. http://jqueryfordesigners.com/ объясняет JS таким образом, который могут использовать новички или опытные пользователи.

Answer 5

jQuery Tools - хорошая альтернатива пользовательскому интерфейсу jQuery. Тем не менее, он не имеет столько функций, как пользовательский интерфейс jQuery или ThemeRoller.

Answer 6

Вы смотрели на jQuery-ui? Он не так богат, как другие библиотеки soem (пока), но в нем много основных компонентов (диалоги, аккордеоны, перетаскивание, ползунки и т. Д.). Хотя, как вы описали, идентификатор вашего приложения должен рекомендовать вместо этого использовать Dojo (так же, как я ADORE jQuery).

Answer 7

Для наибольшего соотношения Bang: Buck посмотрите jQuery plugins

Базовый jQuery превосходен, и он разработан для создания великолепных эффектов. Плагины, как правило, представляют собой полностью запеченные веб-виджеты высшего порядка.