Zverushka Posted April 21, 2014 Report Share Posted April 21, 2014 (edited) Хочу спросить у вас, какие плагины вы считаете необходимо знать для облегчения жизни верстальщику? Уметь их настраивать и вставлять на сайте.Fancybox - первый плагин, с которым должен познакомится верстальщик http://fancyapps.com/fancybox/jquery form (отправка форм, в том числе ajax отправка файлов - очень удобная штука) http://www.malsup.com/jquery/form/#getting-startedbxslider - гибконастраиваемый слайдер http://bxslider.com/roundabout - http://fredhq.com/projects/roundabout/ еще один слайдер, но который крутит по кругу - часто пригождался.Countdown - Счетчик времени, очень гибкий. http://keith-wood.name/countdown.htmlValidate - плагин для валидации форм http://jqueryvalidation.org/qTip - всплывающие подсказки - например об ошибках при отправке форм qtip2.com. Желательно с ним ознакомится, но не обязательно.ddscrollspy - плавная навигация по странице с помощью меню (возможно есть более популярный - как-то я с ним познакомилась на заре верстки, так им и пользуюсь) http://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htmmasketinput - тот самый плагин, который позволяет вводить номер телефона по маске http://digitalbush.com/projects/masked-input-pluginequalize - одинаковая высота слоев http://tsvensen.github.io/equalize.js/ Этот плагин может их сделать вам одинаковую высоту слоев на всех строках (несколько строк будут иметь одинаковую высоту)eqheight - то, что не может первый плагин - может второй http://jsliang.com/eqHeight.coffee/ В отличии от первого - если у вас несколько строк, то этот плагин будет делать одинаковую высоту на каждой строке свою. Тоже клевая в этом плане вещь. Кто может еще что посоветовать? Есть ли какие-то ошибки в моем списке (в плане более удобных и более популярных аналогов)?Из-за глюка форума пришлось в тег цитаты засунуть. Edited April 22, 2014 by Zverushka 5 Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 21, 2014 Report Share Posted April 21, 2014 Чтобы уметь настраивать любые плагины надо обязательно прокачать один очень важный скилл - умение читать документацию. В прокачивании этого скилла помогает одно несложное упражнение: написание своего собственного плагина (любого, не обязательно сложного) и составление документации к нему. 1 Quote Link to comment Share on other sites More sharing options...
npofopr Posted April 21, 2014 Report Share Posted April 21, 2014 Главное уметь правильно гуглить и корректно задавать вопросы, причем и на английском тоже) одинаковая высота блоков - http://brm.io/jquery-match-height/слайдер - http://docs.dev7studios.com/caroufredsel-old/ Quote Link to comment Share on other sites More sharing options...
swandev Posted April 21, 2014 Report Share Posted April 21, 2014 Хочу спросить у вас, какие плагины вы считаете необходимо знать для облегчения жизни верстальщику? Уметь их настраивать и вставлять на сайте.Fancybox - первый плагин, с которым должен познакомится верстальщик http://fancyapps.com/fancybox/jquery form (отправка форм, в том числе ajax отправка файлов - очень удобная штука) http://www.malsup.com/jquery/form/#getting-startedbxslider - гибконастраиваемый слайдер http://bxslider.com/roundabout - http://fredhq.com/projects/roundabout/ еще один слайдер, но который крутит по кругу - часто пригождался.Countdown - Счетчик времени, очень гибкий. http://keith-wood.name/countdown.htmlValidate - плагин для валидации форм http://jqueryvalidation.org/qTip - всплывающие подсказки - например об ошибках при отправке форм qtip2.com. Желательно с ним ознакомится, но не обязательно.ddscrollspy - плавная навигация по странице с помощью меню (возможно есть более популярный - как-то я с ним познакомилась на заре верстки, так им и пользуюсь) http://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htmmasketinput - тот самый плагин, который позволяет вводить номер телефона по маске http://digitalbush.com/projects/masked-input-pluginequalize - одинаковая высота слоев http://tsvensen.github.io/equalize.js/eqheight - то, что не может первый плагин - может второй http://jsliang.com/eqHeight.coffee/ Отличия не помню. Каждый по-своему полезен. Кто может еще что посоветовать? Есть ли какие-то ошибки в моем списке (в плане более удобных и более популярных аналогов)?Из-за глюка форума пришлось в тег цитаты засунуть. lightslider http://sachinchoolur.github.io/lightslider/examples.htmlGoUP http://ryuk87.github.io/jquery-goup/skrollr http://prinzhorn.github.io/skrollr/bootstrap validator https://github.com/nghuuphuoc/bootstrapvalidatorвообще все что нужно, можно загуглить (иногда может не получатся, значит не то ищите) 1 Quote Link to comment Share on other sites More sharing options...
Zverushka Posted April 21, 2014 Author Report Share Posted April 21, 2014 (edited) Про гугл так отвечу. Да можно загуглить и найти, допустим, вместо fancybox - lightbox - который не все умеет, нормально не поддерживается и в целом хуже фенсибокса. Осознание ошибки приходит со временем - путем просмотра кода чужих сайтов или их доработки, когда ты вдруг понимаешь насколько удобно то, что использовали они. Не все плагины, у которых есть документация - хороши и удобны, такие иногда по полчаса читаешь и ничего не получается или не получается какая-то конкретная фишка, которая вдруг оказывается нужна, но этот плагин ее не предусматривает и время выкинуто в трубу. Почему лучше с многими плагинами ознакомится заранее (с частоиспользуемыми), чтобы потом не попасть в просак. К, примеру, ты портишь разметку на сайте - вставляешь какие-то омфг классы, которые зачем-то нужны плагину, чтобы он работал, ворочаешь стили (к примеру для карусели bxslider margin ставится только справа, который указывается в настройках - мелочь, а не сразу вникнешь, почему у тебя слайдер дергается криво), потому, что и их он искажает, подгоняешь все. И тут бац - "сделайте мне fade эффект типа crossfade" (fade бывает двух типов), а у этого чертого плагина этого эффекта нету. И тут начинается порочный круг, когда ты находишь crossfade, но не находишь настройку еще одной важной фишки. А все потому, что ты не знаешь о существовании прекрасных гибких слайдеров, в которых есть почти все, что нужно =)... Edited April 21, 2014 by Zverushka 2 Quote Link to comment Share on other sites More sharing options...
DivMan Posted April 21, 2014 Report Share Posted April 21, 2014 спасибо за слайдер Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 22, 2014 Report Share Posted April 22, 2014 Да можно загуглить и найти, допустим, вместо fancybox - lightbox - который не все умеет, нормально не поддерживается и в целом хуже фенсибокса. Осознание ошибки приходит со временем - путем просмотра кода чужих сайтов или их доработки, когда ты вдруг понимаешь насколько удобно то, что использовали они. Не все плагины, у которых есть документация - хороши и удобны, такие иногда по полчаса читаешь и ничего не получается или не получается какая-то конкретная фишка, которая вдруг оказывается нужна, но этот плагин ее не предусматривает и время выкинуто в трубу. Именно по-этому я пишу, что надо прокачивать скилл чтения документации. Прежде чем тупо взять и установить плагин (тем более на продакшн) нужно изучить его документацию, изучить насколько просто его использовать, какие возможности он поддерживает, а какие нет. А не тыкаться в каждый плагин как слепой котёнок пока не найдёшь, то что тебе надо. Quote Link to comment Share on other sites More sharing options...
Zverushka Posted April 22, 2014 Author Report Share Posted April 22, 2014 (edited) Вот еще, если кто захочет паралакс от мышки, то очень неплохой плагин http://matthew.wagerfield.com/parallax/В отличии от его собрата http://stephband.info/jparallax/ - имеет плавные изинги, не подтормаживает и использует для смещения объектов трансформацию (через аппаратное ускорение) - от чего не так нагружает страницу. Главное осторожнее с большими слоями - в хроме может быть баг с белым экраном. Работает по принципу - сначала идет слой сцены, потом слой паралакса и уже внутри него должен быть ваш базовый слой или картинка, которая должна двигаться. Печалит только то, что внутри сцены дать личные настройки слою невозможно (такие как, не двигаться по оси х, например) - и нужно городить несколько сцен.Заодно расписала в первом посте отличия плагинов с одинаковой высотой строк - один все строки одинаковыи делает, другой построчно высоту равняет. Edited April 22, 2014 by Zverushka Quote Link to comment Share on other sites More sharing options...
nerv Posted April 22, 2014 Report Share Posted April 22, 2014 (edited) если кто захочет паралакс от мышкимышка, мышка, дай мне паралакс Не понимаю, зачем давать ссылку на демо, если можно дать ссылку на github, где в настоящее время лежит почти все.Кроме того, на данный момент, почти все разработчики используют bower, что делает поиск еще проще. UPD: оказывается мой модуль на втором месте по популярности =) Edited April 22, 2014 by nerv 1 Quote Link to comment Share on other sites More sharing options...
swandev Posted April 22, 2014 Report Share Posted April 22, 2014 если кто захочет паралакс от мышкимышка, мышка, дай мне паралакс Не понимаю, зачем давать ссылку на демо, если можно дать ссылку на github, где в настоящее время лежит почти все.Кроме того, на данный момент, почти все разработчики используют bower, что делает поиск еще проще. UPD: оказывается мой модуль на втором месте по популярности =) А зачем? Лучше посмотреть демо, а потом уже решать, устанавливать или нет Quote Link to comment Share on other sites More sharing options...
nerv Posted April 22, 2014 Report Share Posted April 22, 2014 А зачем? Лучше посмотреть демо, а потом уже решать, устанавливать или нет Потому, что:1. очень часто делают несколько демок и оформляют их отдельными страницами2. зачастую демо не всегда дает понять, насколько удобно то, с чем предстоит иметь дело. Демо красивое, код говно. Я лучше буду иметь дело с некрасивым демо и с хорошим кодом.3. демо !== документация4. ... продолжать? 1 Quote Link to comment Share on other sites More sharing options...
swandev Posted April 22, 2014 Report Share Posted April 22, 2014 Я не говорю что документацию читать не нужно. Кому-то удобней для начала посмотреть на демо, а уже потом читать документацию (как мне). А разницы как давать ссылку нет, с демо можно попасть на гитхаб, или с гитхаба на демо страницу. Quote Link to comment Share on other sites More sharing options...
nerv Posted April 22, 2014 Report Share Posted April 22, 2014 А разницы как давать ссылку нет Действительно, какая разница:https://google.ruhttps://github.com/wagerfield/parallax Я не сказал главного (как мне кажется): в большинстве случаев гитхаб - первоисточник. Иными словами, если есть ссылка на репозиторий, то оттуда можно попасть на все остальные страницы (как правило). Кому-то удобней для начала посмотреть на демо, а уже потом читать документацию (как мне). а я думал, ты смотришь демо, а потом устанавливаешьЛучше посмотреть демо, а потом уже решать, устанавливать или нет ты уж определись =) Quote Link to comment Share on other sites More sharing options...
swandev Posted April 22, 2014 Report Share Posted April 22, 2014 А разницы как давать ссылку нетДействительно, какая разница:https://google.ruhttps://github.com/wagerfield/parallax Я не это имел ввиду. Простой пример:http://prinzhorn.github.io/skrollr/ ссылки на гитхаб в начале и внизу страницы https://github.com/Prinzhorn/skrollr собственно сам гитхаб, чтобы перейти на демо нужно пару раз поскролить и несколько раз кликнуть Quote Link to comment Share on other sites More sharing options...
Zverushka Posted April 22, 2014 Author Report Share Posted April 22, 2014 (edited) @nerv,ну я блин не думала, что это чисто демо - мне показалось, что это официальная страница плагина, от которой можно уже и на гитхаб зайти и куда-то еще. Мне лично удобнее смотреть на официальной странице, где и покажут плагин в действии и тут же краткое руководство дадут. Edited April 22, 2014 by Zverushka 1 Quote Link to comment Share on other sites More sharing options...
cyklop77 Posted April 23, 2014 Report Share Posted April 23, 2014 (edited) masonry плотная упаковка блоков Edited April 23, 2014 by cyklop77 1 Quote Link to comment Share on other sites More sharing options...
amelice Posted April 24, 2014 Report Share Posted April 24, 2014 почти все разработчики используют bower, что делает поиск еще проще. можешь посвятить какого вида информации ищет? только среди проектов в гитхабе? Quote Link to comment Share on other sites More sharing options...
Николя223 Posted April 24, 2014 Report Share Posted April 24, 2014 (edited) AjaxFileUpload - Вот тоже неплохой плагин, отправляет просто файлы без формыjQuery Easing - Настройка пользовательской анимации. работает не только с animate, но и fadeIn, fadeOut и т.д.jquery.transform - Кроссбраузерные трансформации. 2d - работают и с восьмым ослом. Если мне память не изменяет - ещё и анимацию поддерживает. (хоть и ослик 8 уже в прошлом, но вдруг кому то понадобится) noUISlider - Интерессный Слайдер. jQuery.autoComplete.js Для тех, кому лень организовывать самостоятельно аяксопоиск при вводе в текстовое полеjquery.cookie.js - собственно простая работа с куккамиHistory.js - наверно многие читали статью на htmlbook про маскировку URL при аяксе, собственно вот он. Вопрос - никому на глаза не попадался крутой колорпикер с возможностью получения цвета не только HEX, но и rgb,rgba,hsl, ну и чтобы стильно выглядел)) Думаю уже самому делать ... UPD: думаю это нужная тема. Копилка опыта Edited April 25, 2014 by Николя223 1 Quote Link to comment Share on other sites More sharing options...
npofopr Posted April 25, 2014 Report Share Posted April 25, 2014 UPD: думаю это нужная тема. Копилка опыта не надо думать) надо создавать. И лучше бы на Гитхабе, удобнее редактировать и все на одной странице Quote Link to comment Share on other sites More sharing options...
ryter Posted April 25, 2014 Report Share Posted April 25, 2014 (edited) http://yuilibrary.com/yui/docs/color/hsl-picker.html Edited April 25, 2014 by ryter Quote Link to comment Share on other sites More sharing options...
Николя223 Posted April 28, 2014 Report Share Posted April 28, 2014 не надо думать) надо создавать \Ты уже создал? ) Quote Link to comment Share on other sites More sharing options...
npofopr Posted April 28, 2014 Report Share Posted April 28, 2014 не надо думать) надо создавать\Ты уже создал? ) Ну я и не думал) Но создал https://github.com/npofopr/plugins-for-webХотел поставить http://habrahabr.ru/post/218433/ но в винде ошибки пошли. Может починю) А вообще. Недавно нашел вот такой проект https://develop.re/ Он как раз о том же. Там собираются хорошие вещи) Правда не только о верстке) В общем свой репозиторий я тоже допилю, и для себя хоть буду собирать) Quote Link to comment Share on other sites More sharing options...
nerv Posted May 5, 2014 Report Share Posted May 5, 2014 можешь посвятить какого вида информации ищет?ищет по имени пакета, ключевым словам и т.п. Словом, всему тому, что указано в конфиге (описании пакета) * можешь посвятить какого вида информации ищет? только среди проектов в гитхабе? среди "зарегистрированных в bower пакетов"http://bower.io/#finding-packages *насколько знаю Quote Link to comment Share on other sites More sharing options...
nerv Posted June 9, 2014 Report Share Posted June 9, 2014 sly - слайдер/карусель/паралакс (тач, физика) 6 Quote Link to comment Share on other sites More sharing options...
swandev Posted June 9, 2014 Report Share Posted June 9, 2014 sly - слайдер/карусель/паралакс (тач, физика)ох какой интересный плагин) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.