![image image](http://blogs.gotdotnet.ru/personal/OLEGaFX/content/binary/WindowsLiveWriter/GlimmerjQuery_B351/image_thumb_6.png)
Сегодня я вам расскажу о замечательном WPF приложении, которое сильно упростит вам создание популярных jQuery-эффектов!
Этот инструмент для дизайнеров и разработчиков называется Glimmer. Он доступен для всех со странички на Codeplex.
Хотите переделать приложение под свои нужды? Нет проблем – на той же страничке можно скачать исходный код Glimmer!
В установке приложения нет ничего необычного. Единственное – для работы приложения требуется .NET 3.5 SP1, который автоматически установится, если у вас его нет.
![image image](http://blogs.gotdotnet.ru/personal/OLEGaFX/content/binary/WindowsLiveWriter/GlimmerjQuery_B351/image_thumb.png)
После запуска приложения, можем сразу начать создавать эффекты для своих сайтов. Тут же видна ссылка на документацию, которую можно почитать перед началом работы.
![image image](http://blogs.gotdotnet.ru/personal/OLEGaFX/content/binary/WindowsLiveWriter/GlimmerjQuery_B351/image_thumb_3.png)
Для приложения доступно несколько хороших примеров, которые можно скачать и посмотреть в действии. Mix Online Glimmer Lab Page — страница, на которой везде используются скрипты, сгенерированные с помощью Glimmer!
Давайте теперь посмотрим насколько легко создавать красивые эффекты для сайтов с помощью Glimmer!
Для примера я создал сайт в Microsoft Expression Web, использовав один из многих доступных шаблонов. В раздел контента я добавил две простых кнопки, которые сейчас ничего не делают:
![image image](http://blogs.gotdotnet.ru/personal/OLEGaFX/content/binary/WindowsLiveWriter/GlimmerjQuery_B351/image_thumb_10.png)
Перейдем в Glimmer и через File->Open HTML (или Ctrl+O) откроем наш сайт:
![image image](http://blogs.gotdotnet.ru/personal/OLEGaFX/content/binary/WindowsLiveWriter/GlimmerjQuery_B351/image_thumb_11.png)
Мы видим экран Preview и две кнопки – “Добавить новое действие” и “Сохранить”.
Добавим эффектов на нашу страницу. При нажатии на кнопку Hide, навигационное меню станет полностью прозрачным. А при нажатии на кнопку Show оно снова станет видимым.
Нажимаем на кнопку “Add New Action” и заполняем поля:
- Action Name – имя действия
Action Type – событие, при котором действие произойдет
Trigger – элемент, который вызывает действие. Можно нажать кнопку Select и выбрать нужный элемент, щелкнув по нему в окне Preview.
Target – элемент, на который мы действуем
Add Effects – выбор нужного эффекта
В моем случае для кнопки Hide настройки выглядят так:
А для кнопки Show так:
Теперь нажимаем на кнопку Save и сохраняем js файл в каталог нашего сайта.
То, что получилось, мы можем просмотреть сразу в окне Preview:
А можем выбрать из списка Preview in Browser браузер, в котором мы хотим просмотреть полученный эффект:
За минимальное количество действий мы создали довольно симпатичный эффект. Но я показал лишь самый простой эффект. В Glimmer можно создавать выпадающие меню, галереи изображений, смешивать различные эффекты и еще многое другое! Пробуйте! :)