jQuery потребителски интерфейс и ThemeRoller

• Април 26, 2024

Ако искате лесен и бърз начин да проектирате потребителския интерфейс за уебсайт или уеб приложение и също да включва jQuery, проверете jQuery потребителския интерфейс. Там ще намерите комбиниран пакет за CSS и jQuery функции до ключ, който прави добавянето на тези функции към новия ви проект кратко.

Нека да се разходим из сайта. Под връзката Demos and Docs ще намерите списък на jQuery интерактивни плъгини като плъзгане и пускане, раздели и преходи. За всеки плъгин има демо, документация и примерен код за изрязване и поставяне за тестване.

Ако искате да вземете файловете до ключ, щракнете върху връзката Теми за jQuery ThemeRoller. Css по подразбиране е бяла и сива тема с голи кости. Можете да щракнете върху бутона за изтегляне и да използвате, както е, но има и Галерия с цветни теми, за да започнете. В областта Галерия има няколко миниатюри за теми. Просто кликнете върху този, който харесвате. Можете да изтеглите тази тема, както е, като щракнете върху раздела Roll Your Own и след това бутона Download Theme. Но забавлението започва, когато започнете да туитвате темата с двигателя ThemeRoller. Има 11 опции, които можете да персонализирате. Повечето опции ще ви позволят да промените текстурата и цвета на фона, цвета на рамката и цветовете на текста и иконите.

Имате няколко опции за туитър на темата.

• Настройки на шрифта: Можете да промените семейството на шрифта, теглото и размера.
  
  
• Ъглов радиус: Можете да промените радиуса на ъгъла. Всяка тема има стил по подразбиране заоблен раздел, но тук можете да промените размера на ъгъла или да го зададете на нула за квадратен раздел. (Раздели са изградени на CSS3, който понастоящем не се поддържа от IE.)
  
  
• Заглавие / лента с инструменти: Можете да зададете стойностите на цветовете за зоната зад раздели и областите на заглавката, като например за приставката на календара.
  
  
• Съдържание: Тук можете да зададете цветовете за основната зона на съдържание. Можете да получите много различен дизайн в зависимост от вашия избор на граница или без граница.
  
  
• Състояние по подразбиране, което се кликва: Това контролира външния (неактивен) вид на раздели и бутони.
  
  
• Clickable Hover State: Тези контроли са за появата на раздели и бутони в състояние на задържане.
  
  
• Активно състояние, което се кликва: Контролира външния вид на раздела и бутона за активната страница.
  
  
• Акцент: Цветове на фона, рамката, текста и иконата за маркираните области.
  
  
• Грешка: цветове на фон, рамка, текст и икона за съобщения за грешка.
  
  
• Модален екран за наслагвания: Контролира цвета и текстурата на фона.
  
  
• Drop Shadows: Контролира за непрозрачността на сенките, дебелината, отместването и ъглите за ефект на сянка.
  
  

Когато изтеглите jquery-ui-x.x.xx.custom.zip и надстроите пакета, ще видите три папки (css, пакет за разработка и js) и файл index.html. Файлът index.html е демонстрация на приставките, оформени с вашата тема. Ще искате да поставите папките css и js в основната си директория и да копирате / поставите кода от файла index.html в кода за вашия сайт на мястото, където искате да се появят плъгините.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Инструкции Видео: Theming Theme Roller Customizations in JQuery UI (Април 2024).