Како прилагођавати и подешавати јКуери УИ Датепицкер

јКуери УИ је једноставно невероватан и због лакоће коришћења, популаран је и широко коришћен на готово било ком сајту који захтева интерактивне функције.

И, у овом посту, погледаћемо једну од понуђених функција, видгет Датепицкер.

Покушаћемо да научимо како да прилагодимо тему календара, тако да ћете моћи да креирате сопствену тему која ће одговарати вашем укупном дизајну. Међутим, потребно је мало разумевања у ЈаваСцрипту и познавање ЦСС-а пре него што следите овај водич.

• Демо
• Довнлоад Соурце

Ако сте спремни, почнимо.

Тхе Ассетс

Припремимо неке од основних средстава за календар.

Прво, дизајн календара ће се односити на ПСД датотеку са Премиум Пикелс. Зато је боље да га прво преузмемо како би нам помогли да узмемо узорак боја које су нам потребне. Затим преузмите два обрасца Суптилно Паттернс које ћемо користити као позадину нашег календара. У овом примеру, одлучили смо да користимо следеће обрасце: црни трапер и тамну кожу.

Такође ће нам требати алатка за развој веба као што је Фиребуг за преглед класа елемената / ИД-ова генерираних од стране јКуери УИ.

Па, мислим да смо имали довољно припрема. Сада идемо на први корак.

Корак 1: јКуери УИ Датепицкер

Прво идите на страницу за преузимање јКуери УИ. На овој страници ћете добити неколико опција, као што следи; Цоре УИ, Видгетс, Интерацтионс и Еффецтс.

Ми би требало да одзначите све компоненте, јер нам не требају све.

Онда, у Видгетс секцију одаберите само датум. Кориснички интерфејс јКуери ће аутоматски изабрати битне зависности, а затим преузимање фајл.

Повежите све преузете датотеке - осим ЦСС-а - на ваш ХТМЛ празан документ, као што следи:

Корак 2: Прилагодите Датепицкер

У овом кораку, ми ћемо конфигурирати датум за бирање са следећим опцијама.

Горњи код ће упутити јКуери да прикаже календар на елементу са датепицкер ид. Дакле, треба да ставимо следеће див ознака са - датепицкер ИД - у одељку боди да бисте формирали календар:

Сада је календар требао бити већ генерисан и изгледати овако, без икаквих стилова, али и даље има функционалност.

Корак 3: Стилови

Почнимо са стајлингом календара. Почећемо нормализацијом свих елемената - као и обично - и креирањем нове стилске табеле, у овом примеру зовем је датепицкер.цсс. Затим их све повежите са ХТМЛ документом.

Затим ћемо прво додати тело позадини тако да наш ХТМЛ не изгледа превише једноставно.

боди бацкгроунд: урл ('… / имг/даркденим3.пнг') поновите 0 0 # 555; 

Затим ћемо одредити ширину датума за бирање, позиционирати га у центар и додати капљицу како би ефекат проминеца дао календару.

.уи-датепицкер ширина: 216пк; хеигхт: ауто; маргин: 5пк ауто 0; фонт: 9пт Ариал, санс-сериф; -вебкит-бок-схадов: 0пк 0пк 10пк 0пк ргба (0, 0, 0, .5); -моз-бок-схадов: 0пк 0пк 10пк 0пк ргба (0, 0, 0, .5); бок-схадов: 0пк 0пк 10пк 0пк ргба (0, 0, 0, .5); 

Такође ћемо уклонити подразумевану подвучену декорацију са сваке ознаке сидра.

.уи-датепицкер а тект-децоратион: ноне; 

Календар у јКуери УИ се формира са а сто. Дакле, хајде да додамо 100% видтх фор тхе сто, тако да ће имати исту максималну ширину као омот горе; то је 216пк

.уи-датепицкер табела ширина: 100%; 

Стајлинг секције заглавља

Датепицкер има заглавље које садржи Месец година календара. Ова секција ће имати тамну текстуру коже коју смо претходно преузели са мало белом бојом и 1пк бела сенка на врху.

.уи-датепицкер-хеадер позадина: урл ('… /имг/дарк_леатхер.пнг') понавља 0 0 # 000; боја: # е0е0е0; фонт-веигхт: болд; -вебкит-бок-схадов: инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, 2); -моз-бок-схадов: инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, .2); бок-схадов: инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, .2); тект-схадов: 1пк -1пк 0пк # 000; филтер: дропсхадов (боја = # 000, оффк = 1, оффи = -1); висина линије: 30пк; бордер-видтх: 1пк 0 0 0; гранични стил: солид; бордер-цолор: # 111; 

Следеће, центрирајмо Месец дана позицију.

 .уи-датепицкер-титле тект-алигн: центар; 

Заменити Следећи и Прев текст са сликама са стрелицама које су изрезане из ПСД-а.

.уи-датепицкер-прев, .уи-датепицкер-нект дисплаи: инлине-блоцк; видтх: 30пк; хеигхт: 30пк; тект-алигн: центар; курсор: показивач; бацкгроунд-имаге: урл ('… / имг/арров.пнг'); позадина-понављање: нема понављања; висина линије: 600%; оверфлов: хидден; 

Затим подесите положај стрелице.

.уи-датепицкер-прев флоат: лево; позиција у позадини: центар -30пк;  .уи-датепицкер-нект флоат: ригхт; бацкгроунд-поситион: центер 0пк; 

Док имена дана Одељак је омотан унутар а тхеад, базиран на нашој референци дизајна, имаће благо бели градијент. А да бисмо поједноставили наш задатак, користићемо овај алат за генерисање градијентног кода:

.уи-датепицкер тхеад бацкгроунд-цолор: # ф7ф7ф7; бацкгроунд-имаге: -моз-линеар-градиент (топ, # ф7ф7ф7 0%, # ф1ф1ф1 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (0%, # ф7ф7ф7), боја-стоп (100%, # ф1ф1ф1)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # ф7ф7ф7 0%, # ф1ф1ф1 100%); бацкгроунд-имаге: -о-линеарно-градијент (топ, # ф7ф7ф7 0%, # ф1ф1ф1 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # ф7ф7ф7 0%, # ф1ф1ф1 100%); бацкгроунд-имаге: линеарно-градијент (топ, # ф7ф7ф7 0%, # ф1ф1ф1 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# ф7ф7ф7", ендЦолорстр = "# ф1ф1ф1", ГрадиентТипе = 0); бордер-боттом: 1пк солид #ббб; 

Тхе имена дана текст ће имати тамно сиву боју # 666666 и они ће такође имати танку белу боју тект-схадов да бисте добили притиснут ефекат.

.уи-датепицкер тх тект-трансформ: велика слова; фонт-сизе: 6пт; паддинг: 5пк 0; цолор: # 666666; текст-сенка: 1пк 0пк 0пк #ффф; филтер: дропсхадов (боја = # ффф, оффк = 1, оффи = 0); 

У овом тренутку, календар ће изгледати овако:

Стилинг тхе Датес

Датуми календара су обавијени унутар тд или табеларни подаци. Дакле, поставићемо паддинг на 0 да уклоните размаке између тд и дајте му праву границу од 1пк.

.уи-датепицкер тбоди тд паддинг: 0; бордер-ригхт: 1пк солид #ббб; 

Осим последњег тд, који неће имати праву границу. Поставили смо праву границу на 0 за ово.

.уи-датепицкер тбоди тд: последње дете бордер-ригхт: 0пк; 

Ред у табели ће бити скоро исти. Имаће дно границе од 1пк, осим последњег реда.

.уи-датепицкер тбоди тр граница-дно: 1пк солид #ббб;  .уи-датепицкер тбоди тр: ласт-цхилд бордер-боттом: 0пк; 

Стилинг Дефаулт, Ховер и Ацтиве Стате

У овом кораку ћемо дефинисати датум ховер и активне стилове. Прво ћемо дефинисати задано стање датума навођењем димензије; центрирајте позицију текста датума, додајте боју градијента и унутрашњу белу сенку.

.уи-датепицкер тд спан, .уи-датепицкер тд а дисплаи: инлине-блоцк; фонт-веигхт: болд; тект-алигн: центар; видтх: 30пк; хеигхт: 30пк; висина линије: 30пк; цолор: # 666666; текст-сенка: 1пк 1пк 0пк #ффф; филтер: дропсхадов (боја = # ффф, оффк = 1, оффи = 1);  .уи-датепицкер-цалендар .уи-стате-дефаулт бацкгроунд: #едедед; бацкгроунд: -моз-линеар-градиент (топ, #едедед 0%, #дедеде 100%); бацкгроунд: -вебкит-градиент (линеарни, леви врх, леви дно, боја-стоп (0%, # едедед), боја-стоп (100%, # дедеде)); бацкгроунд: -вебкит-линеар-градиент (топ, #едедед 0%, # дедеде 100%); бацкгроунд: -о-линеар-градиент (топ, #едедед 0%, # дедеде 100%); бацкгроунд: -мс-линеар-градиент (топ, #едедед 0%, # дедеде 100%); бацкгроунд: линеарно-градијент (топ, #едедед 0%, # дедеде 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# едедед", ендЦолорстр = "# дедеде", ГрадиентТипе = 0); -вебкит-бок-схадов: инсет 1пк 1пк 0пк 0пк ргба (250, 250, 250, .5); -моз-бок-схадов: уложак 1пк 1пк 0пк 0пк ргба (250, 250, 250, .5); бок-схадов: инсет 1пк 1пк 0пк 0пк ргба (250, 250, 250, .5);  .уи-датепицкер-унселецтабле .уи-стате-дефаулт бацкгроунд: # ф4ф4ф4; боја: # б4б3б3; 

Када пређете преко датума, он ће постати благо бели.

 .уи-датепицкер-цалендар .уи-стате-ховер бацкгроунд: # ф7ф7ф7; 

Када је датум у активном стању, он ће имати следеће стилове.

 .уи-датепицкер-цалендар .уи-стате-ацтиве бацкгроунд: # 6еафбф; -вебкит-бок-схадов: инсет 0пк 0пк 10пк 0пк ргба (0, 0, 0, .1); -моз-бок-схадов: уложак 0пк 0пк 10пк 0пк ргба (0, 0, 0, .1); бок-схадов: инсет 0пк 0пк 10пк 0пк ргба (0, 0, 0, .1); боја: # е0е0е0; текст-сенка: 0пк 1пк 0пк # 4д7а85; филтер: дропсхадов (боја = # 4д7а85, оффк = 0, оффи = 1); бордер: 1пк солид # 55838ф; позиција: релативна; маргин: -1пк; 

Сада би календар требао изгледати много боље.

Поправљање позиције

У овом тренутку пажљиво погледајте датум. Када кликнете на датум на првој или последњој колони, приметићете да активно стање прелази пиксел изван ивице календара.

Дакле, овде ћемо направити неке мале поправке.

Прво ћемо смањити ширину датума на 29пк, и поставите десну маргину последње колоне и леве маргине прве колоне на 0 да преокрену -1пк маргину смо претходно поставили за активно стање.

.уи-датепицкер-цалендар тд: фирст-цхилд .уи-стате-ацтиве ширина: 29пк; маргин-лефт: 0;  .уи-датепицкер-календар тд: ласт-цхилд .уи-стате-ацтиве ширина: 29пк; маргин-ригхт: 0;  

Датум у последњем реду календара ће такође имати сличан третман.

.уи-датепицкер-календар тр: ласт-цхилд .уи-стате-ацтиве хеигхт: 29пк; маргин-боттом: 0; 

Сада, да видимо резултат. Па, календар сада изгледа лепо и савршено се уклапа у наш дизајн. Можете да видите демо и преузмете извор да бисте проверили код са линкова испод слике.

• Демо
• Довнлоад Соурце

Бонус: Проширите календар

Па, данас смо доста научили о томе како креирати прилагођену тему за ЈКуери УИ Датепицкер. Али не би требало да се заустављате овде, јер још увек има много ствари које се могу проширити са овог датума. У зависности од вашег јКуери и ЦСС знања, проширите календар на следећи начин - унос текста са датумом за преклапање.

• Демо
• Довнлоад Соурце

Додатна литература

За даље читање на јКуери УИ. Овде можете прочитати комплетну документацију:

• Почетак рада са јКуери УИ
• Тхеминг јКУери УИ
• јКуери УИ: Тхеминг АПИ класе

Последње мисли

Хвала вам што сте читали и пратили овај водич, надам се да ће вам бити корисно. И, Ако имате било какву повратну информацију или желите да додате ствари које можда недостају у овом упутству, слободно га наведите у одељку коментара испод. Хвала још једном).