JQuery Mobile-да арнайы тақырып жасаңыз

Мазмұны

• 01. Барлар (.ui-bar-?)
• 02. Мазмұнды блоктар (.ui-дене-?)
• 03. Түймелер мен тізімге қарау (.ui-btn-?)
• 04. Араластыру және сәйкестендіру үлгілері
• 05. Жалпы сайттың белсенді жағдайы
• 06. Әдепкі белгішелер
• 07. Жеке тақырыпты құру және пайдалану
• 08. ThemeRoller дегеніміз не?
• 09. ThemeRoller пайдалану
• 10. Алдын ала қарау
• 11. Түстер
• 12. инспектор
• 13. Құралдар
• 14. Notekeeper үшін тақырып құру
• 15. Тақырыбыңызды экспорттау

• Қажетті білім: HTML, кейбір CSS және JavaScript
• Қажет: Сіздің сүйікті HTML редакторыңыз бен шолғышыңыздан басқа ештеңе жоқ
• Жоба уақыты: Екі сағат
• Қолдау файлы

Бұл PackQ Publishing жариялаған jQuery Mobile Web Development Essentials бағдарламасының 11-тарауынан өңделген үзінді.

JQuery Mobile-дағы интерфейс әзірлеуші ​​үшін қарапайым және қарапайым, бірақ сахна артында өте күрделі. Бақытымызға орай, сіз үшін жасалып жатқан барлық нәрсені білу қажет болатын кез сирек болады. Алайда оның қалай жұмыс істейтінін түсіну үшін аз уақыт бөлген жөн.

JQuery Mobile қорапшасынан бес түрлі түсті реңктерден тұратын тақырыптар жиынтығы шығарылады, олардың әрқайсысы A-E хатымен байланысты. Тақырып кез-келген элементке өз қалауымен қолдануға болатын базалық CSS класстарының тізбегін қамтиды және олар ені, биіктігі, шекара радиусы және көлеңкелер үшін ғаламдық параметрлерден тұрады. Жеке үлгілерде түс, қаріптер және т.б. туралы нақты ақпарат бар.

F-Z-тен алынған бес түпнұсқаға қосымша үлгілерді қосуға болады немесе түпнұсқа үлгілерді өз қалауы бойынша ауыстыруға немесе ауыстыруға болады. Бұл жүйе тақырыптардың түстерінің, стильдерінің және үлгілерінің миллиондаған ықтимал үйлесімділігіне мүмкіндік беретін барлығы 26 нақты модельге мүмкіндік береді. Сіз jQuery Mobile тақырыбын таңдалған элементке деректер тақырыбының атрибутын қажетті тақырыптың әріпімен қосу арқылы қолдана аласыз:

Әзірлеушілер стильдерді қолдану кезінде деректер тақырыбының атрибуты әдісін пайдалануды таңдайды, бірақ сонымен қатар CSS сынып аттарын тікелей сіздің парағыңыздың элементтеріне бекітуге болады. Бұл икемділікке мүмкіндік беретін бірнеше алғашқы префикстер бар.

01. Барлар (.ui-bar-?)

Жолақ префиксі, әдетте, тақырыптарға, төменгі колонтитулдарға және басқа маңызды аймақтарға қолданылады:

02. Мазмұнды блоктар (.ui-дене-?)

Мазмұн блоктары, әдетте, абзац мәтіні болады деп күтілетін аймақтарға қолданылады. Оның түсі оған қарсы қойылған мәтін түсімен максималды оқуды қамтамасыз етуге көмектеседі:

03. Түймелер мен тізімге қарау (.ui-btn-?)

Түймешіктер мен тізімге қарау - бұл jQuery Mobile кітапханасындағы ең маңызды элементтердің бірі және сіз оларды дұрыс жолға қою үшін уақыт бөлгеніне сенімді бола аласыз. .Ui-btn префиксі сонымен қатар жоғары, төмен, қозғалу және белсенді күйлерге арналған стильдерді қамтиды:

04. Араластыру және сәйкестендіру үлгілері

JQuery Mobile-да тақырыпты құрудың жақсы жақтарының бірі - балалар элементтері, егер басқаша көрсетілмесе, олардың ата-анасынан мұраға қалуы. Бұл дегеніміз, егер сіз тақырыптың немесе колонтитулдың ішіне өзіндік деректер-тақырып атрибутынсыз батырманы қойсаңыз, онда ол батырма оның ата-анасымен бірдей тақырыпты қолданады. Жаман емес пе?

Сондай-ақ, бір үлгіні, ал элементтің баласын екінші серияны қолданып орналастыру өте қолайлы, тіпті ұсынылады. Бұл элементтің ерекшеленуіне немесе қолданбаның басқа бөлігіне сәйкес келуіне немесе әзірлеуші ​​таңдаған кез келген себепке көмектеседі. Бұл мүмкін, ал одан да оңай. Тақырыптың ішіне батырманы (немесе басқа элементті) жай орналастырып, оған деректер тақырыбының төлсипатын тағайындаңыз:

05. Жалпы сайттың белсенді жағдайы

jQuery Mobile барлық элементтер үшін жаһандық белсенді күйді қолданады. Бұл белсенді күй түймелер, форма элементтері, навигация және кез-келген жерде қазіргі кезде бір нәрсе таңдалғанын көрсету қажеттілігі үшін қолданылады. Бұл түс мәнін өзгертудің жалғыз әдісі - оны CSS арқылы орнату (немесе қайта анықтау).Белсенді күйге арналған CSS сыныбы .ui-btn-active сәйкесінше аталды:

06. Әдепкі белгішелер

JQuery Mobile жиынтығына әзірлеушілерге арналған көптеген қажеттіліктерді қамтитын 18 белгіше кіреді. Белгілер жиынтығы мөлдір ақ түсте, оны jQuery Mobile жартылай мөлдір қара шеңбердің үстіне жауып, барлық модельдерге қарама-қайшылықты қамтамасыз етеді. Белгішені қосу үшін деректер белгішесінің атрибутын қажетті белгішенің атымен көрсетіңіз:

jQuery Mobile сонымен қатар батырма үстінде, оң жақта, төменде немесе сол жақта белгішелер орналастыруға мүмкіндік береді, бұл деректер-iconpos = «[жоғарғы, оң жақ, төменгі, сол]» атрибутын қолдана отырып, сол жақ әдепкі орналастыру болып табылады. Сондай-ақ, әзірлеушілер деректерді-iconpos = «notext» көрсету арқылы белгішені мәтінсіз көрсете алады:

Таңдамалы белгішелерді орналастыру да мүмкін және осы тарауда кейінірек қарастырылады.

07. Жеке тақырыпты құру және пайдалану

Біз тақырыптың jQuery Mobile-да қаншалықты қуатты екенін талқыладық. Қарапайым және талғампаз стилі бар мобильді веб-сайтты дамыту өте маңызды емес. Сіздің қосымшаңызды немесе веб-сайтыңызды шынымен бірегей ету үшін пайдалануға болатын өзіңіздің жеке үлгілер кітапханасын құру мүмкіндігі одан да күшті. Өзіңіздің тақырыпты дамытуға келесі екі тәсілдің бірімен жүгінуге болады:

1. Қолданыстағы jQuery Mobile CSS файлын жүктеп алыңыз және ашыңыз және өз мазмұныңызға қарай өңдеңіз.
2. Веб-шолушыны jQuery Mobile үшін ThemeRoller-ге бағыттаңыз.

Біз тек екінші нұсқаға назар аударатын боламыз, өйткені шындықты айтайық, сіз 10 минут ішінде нұсқауларға толы жаңа тақырыпқа нұсқап, нұқып, сүйреп апара алатын болсаңыз, неге осы CSS-тің барлығынан өту керек? ThemeRoller туралы не білетінін білейік.

08. ThemeRoller дегеніміз не?

JQuery Mobile үшін ThemeRoller - бұл jQuery UI жобасы үшін жазылған веб-қосымшаның кеңейтімі. Бұл пайдаланушыларға апарып тастау түстерін басқаруды қолдана отырып, бірнеше минут ішінде модельдерге толы тақырыпты тез жинауға мүмкіндік береді. Мұнда интерактивті алдын-ала қарау мүмкіндігі бар, сондықтан сіз өзіңіздің өзгертулеріңіздің тақырыпқа қалай әсер ететінін бірден көре аласыз. Сондай-ақ, инспектордың кіріктірілген құралы бар, ол сізге минуттық мәліметтерді зерттеуге көмектеседі (қажет болған жағдайда). Ол Adobe® Kuler®, түстерді басқару құралымен біріктірілген. Сіз өзіңіздің тақырыбыңызды аяқтағаннан кейін жүктей аласыз, оны басқалармен теңшелетін URL арқылы бөлісе аласыз және соңғы тақырыптарды өзгерту үшін өткен тақырыптарды қайта импорттай аласыз. Бұл мықты құрал және jQuery Mobile үшін тамаша қосымша.

Бес әдепкі айырмашылықтың белгілерінің бірі - jQuery Mobile командасы оқуға және қолдануға ыңғайлы болу үшін біраз уақыт жұмсаған. Үлгілер ең жоғары контрасттан (A), ең төменгі контрастқа (E) дейін. Бір тақырып шеңберінде ең қарама-қайшылықты бағыттар - беттің ең көрнекті аймақтары. Оған тақырып (және тізімді қарау тақырыптары) және түймелер кіреді. Өзіңіздің жеке тақырыбыңызды жасаған кезде мұны есте ұстаған жөн. Біз әрдайым біздің қолданбадағы ыңғайлылыққа назар аударғымыз келеді, солай ма? Түстерді дұрыс таңдамағандықтан оны ешкім оқи алмаса, тегіс қолданбаның қандай пайдасы бар?

09. ThemeRoller пайдалану

ThemeRoller-ді жүктегенде, алдымен көрінетін жылтыр экран, содан кейін пайдалы Жұмысқа кірісу экраны болады:

Жұмысты бастау экранында бірнеше пайдалы кеңестер бар, сондықтан «Оралуға алу» батырмасын басар алдында оған көз жүгіртіңіз:

Экранның барлық экрандары пайда болғаннан кейін сізге негізгі интерфейс ұсынылады:

ThemeRoller төрт негізгі бағытқа бөлінген: алдын ала қарау, түс, инспектор және құралдар. Олардың әрқайсысы біз қарастыруымыз керек маңызды функционалдылықты қамтиды. Алдын ала қарау бөлімінен бастаймыз.

10. Алдын ала қарау

Егер сіз бұрыннан бар тақырыпты жүктемесеңіз, алдын ала қарау аймағында барлық виджеттермен толтырылған үш толық, бірдей және интерактивті jQuery мобильді парағы ұсынылады:

Тінтуірді олардың үстіне жылжытыңыз, сонда сіз әр парақтың жұмыс істейтінін көресіз. Әр беттегі тақырыпта оның сыртқы түрін қандай бақылау үлгісі басқаратыны туралы хат бар.

11. Түстер

Беттің жоғарғы жағында сіз түрлі-түсті чиптердің сериясын, екі жүгірткі басқару элементімен және ауыстырып-қосқыш түймешігін көресіз. Оң жақта сіз бос болуы керек тағы он түсті чипті көресіз. Олар жақында қолданылған түстерге арналған және сіз түс таңдағанға дейін бос болады:

Түсті чиптердің астында Жеңілдік және қанықтылық деген екі сырғытпа бар. Жеңілдік жүгірткісі түрлі-түсті үлгілер сериясының ашық және күңгірт реңктерін реттейді, ал қанықтыру түстерді көп немесе аз етеді. Біріктіре отырып, пайдаланушы таңдаған кез-келген түске жуықтауы керек. Kuler түстерін пайдалану үшін Adobe Kuler үлгілері бар мәтіндік сілтемені басыңыз.

Түсті чиптердің әрқайсысын алдын ала қарау аймағындағы кез-келген элементке апаруға болады. Бұл модель үлгісін жасауды өте оңай етеді. Көптеген jQuery Mobile стильдерінің бір-бірімен сәйкес келетінін ескеріңіз, мысалы, парақтың жоғарғы жағындағы тақырып жолағы тізім көрінісінің тақырыбымен бірдей стиль алады. Түстерді қалауыңыз бойынша реттеңіз, содан кейін әрбір чипті беттегі элементке сүйреңіз. Әрбір жеке парақ өзінің жеке үлгісі екенін ұмытпаңыз, сондықтан түстерді қалай таңдауға болатындығына мұқият болыңыз.

12. инспектор

Интерфейстің сол жағында инспекторлар тақтасы орналасқан, екі бөлікке бөлінген. Жоғарғы бөлікте әзірлеушілерге тақырыпты жүктеуге, бар тақырыпты импорттауға және олардың тақырыбына сілтемені бөлісуге мүмкіндік беретін түймелер бар. Осы кітапты сатып алмаған адамдар үшін анықтама сілтемесі бар:

Төменгі бөлімде Global, A, B, C және + деп белгіленген бірқатар қойындылар бар. Осы қойындылардың әрқайсысында аккордеон тақтасы бар, олар барлық жеке үлгілерге қолданылатын Global қойындысын қоспағанда, жеке серия үшін барлық мәндерді қамтиды.

Жаһандық қойындысын таңдаңыз, содан кейін Белсенді күйді нұқыңыз, сонда аккордеон панелі бүкіл тақырыпқа арналған белсенді күйге арналған параметрлерді көрсету үшін кеңейеді. Опцияларға мәтін түсі, көлеңке, фон және жиек кіреді. Глобалды мәнді өзгерту кез-келген ағымдық (және болашақтағы) жаңа параметрді көрсетуге мәжбүр етеді.

Қосымша үлгілерді тақырыпқа екі жолмен қосуға болады. Инспектордың жоғарғы жағындағы + қойындысын бассаңыз, тақырыптың соңғы орнына жаңа үлгі қосылады. Сондай-ақ, алдын ала қарау аймағының төменгі жағында орналасқан Swatch қосу батырмасын басу арқылы жаңа үлгісін қосуға болады. Үлгілерді жою керек үлгідегі қойындыны таңдап, содан кейін үлгі атының оң жағында орналасқан Жою сілтемесін басу арқылы жоюға болады. Үлгінің жоғарғы жағындағы үлгіні жою қалған модельдердің атауын өзгертуге әкелетінін ескеріңіз.

13. Құралдар

Беттің жоғарғы жағында бірнеше батырмалар бар. Бұл батырмалар сізге бірнеше тапсырманы орындауға мүмкіндік береді, бірақ алдымен батырмалардың өзін мұқият қарап шығыңыз:

Сіз келесі батырмаларды байқайсыз: 1.1 (ағымдағы) нұсқасы мен 1.0.1 нұсқасы арасында өзгертуге, кері қайтару / қайта қосу және инспектор үшін ауыстырып қосқыш. Бұл ауыстырып қосқышты қосу алдын ала қарау аймағындағы кез-келген виджетті тексеруге мүмкіндік береді. Виджеттің үстінен апару сол элементті көк қораппен ерекшелейді. Элементті басу Inspector аймағындағы аккордеон мәзірінің сол элементке тән параметрлерді көрсету үшін кеңеюіне әкеледі.

Төрт қосымша түйме бар, олар сізге тақырыпты жүктеуге, импорттауға немесе бұрын жасалған тақырыпты жаңартуға, өз тақырыбыңызды басқалармен бөлісуге және анықтама түймесін береді.

14. Notekeeper үшін тақырып құру

Енді біз ThemeRoller интерфейсімен таныс болсақ, алғашқы тақырыпты қалай құрамыз? Біреуін абстрактілі етіп құрудың орнына, бұрын жасаған Notekeeper қолданбасы үшін қолданатын біреуін жасайық. Барлығын jQuery Mobile-мен жеткізілетін тақырыптардың бірін өзгертуден бастайық. Команда пайдаланушыларға әдепкі тақырыптарды жаңа тақырыптардың басталатын орны ретінде импорттауға мүмкіндік беру үшін жеткілікті мейірімділік танытты, сондықтан біз алдымен осы жерде жүреміз. Терезенің жоғарғы сол жағындағы Импорттау батырмасын басыңыз, сонда сіз бар тақырыптың мазмұнын қоюға мүмкіндік беретін өрісті аласыз:

Әдепкі тақырыпты импорттаңдар, әдепкі тақырыпты импорттаңдар, жоғары оң жақ бұрышта сілтемені басыңыз. Тексттер CSS-мен толтырылғаннан кейін Импорттау батырмасын басыңыз. Алдын ала қарау аймағы қайта жүктеліп, А-дан Е-ге дейінгі үлгілерді көрсетеді.

Біз өз күшімізді ақ түсті серияны өзгертуге жұмылдырамыз, өйткені ол біздің түпкі мақсатымызға жақын. Біз «А» үлгісін атау ретінде қолданғанымыз жөн, сондықтан басқа үлгілерді тек D ғана қалатындай етіп өшірейік. ThemeRoller модельдердің басқалары жойылғандықтан, олардың атын өзгертетінін ұмытпаңыз. Бұл дегеніміз, A үлгісін жойған кезде B, A, C D және т.с.с.

D болатын серия қазір A күйінде болғанша жүре беріңіз. Ақырында, B үлгісін жойыңыз (ол бұрын E үлгісі болған), бізде A Swatch ғана қалады:

Бұл серия өте жақсы көрінеді, бірақ ол өте жұмсақ. Тақырыпты жақсы жасылға ауыстырып, кішкене түс енгізейік. Кез-келген элемент үшін қандай мәндерді өзгерту керектігін анықтаудың қарапайым әдісі - инспекторды қолдану. Инспекторды жоғарғы жағында Қосу күйіне ауыстырыңыз, содан кейін А тақырыбының кез келген жерін нұқыңыз, егер сол жақта A қойындысы таңдалған болса және сіз Header / Footer панелі кеңейтілсе, сіз оны дұрыс түсінгеніңізді білесіз:

Түсті бірнеше тәсілдің бірімен өзгертуге болады. Түсті чипті жоғарыдан тікелей фонға сүйреуге болады. Сіз сонымен қатар түсті чипті енгізу өрісіне апара аласыз. Соңында мәнді қолмен енгізуге болады. Түс мәні бар өрісті басқан кезде сізге жылтыр түсті таңдағыш ұсынылатынына назар аударыңыз. Осы панельдегі енгізу өрістеріндегі мәндерді алдыңғы скриншотта көрсетілген мәндерге өзгертіңіз.

Жақсы көрінеді, бірақ қазір белсенді күйдегі көк түс біздің жасылмен қақтығысады. Инспектор құралын пайдаланып, қосу / өшіру қосқыш жолағының Қосу бөлімін бір рет басыңыз. Бұл жаһандық қойындыдағы белсенді күй панелінің кеңеюіне әкелуі керек. Біз көгілдір түсті жылы сұрға ауыстырамыз. Енді Global панелі келесі скриншотқа ұқсас болуы керек:

Жаңа тақырыпты ең ыстық көрінуіне жол бермейтін жалғыз нәрсе бар, жоғарыдағы абзацтағы көк мәтін сілтемесі. Біздің сенімді инспекторымызға оралып, А қойындысының ішіндегі Мазмұнның негізгі панелін кеңейтетін сілтемені тікелей басайық. Енді CSS-ті жақсы білетіндер үшін сілтеме түсін өзгерте алмайтындығыңызды білесіз, сонымен қатар, кірген: апару және белсенді күйлер. Мәселе мынада, бұл өзгертулерді енгізудің мүмкіндігі жоқ, бірақ сізде ThemeRoller бар. Қалған параметрлерді көрсету үшін Сілтеме түс енгізу өрісінің оң жағындағы + батырмасын басыңыз, содан кейін келесі скриншотта көрсетілгендей түстерді өзгертіңіз:

Міне, сол Инспекторлар аймағын зерттеу барысында тақырыпқа қосымша өзгерістер енгізуден тартынбаңыз. Өзіңізге ұнайтын нәрсені өзгертіңіз, бұл дәл қазір биттер мен байттар. Есіңізде болсын, сол уақытта қайтару мүмкіндігі жоқ. Егер сізге бірдеңе шынымен ұнаса, жоғалтпау үшін мәндерді жазып алуды немесе оны сол күйінде экспорттауды ойластырыңыз. Бұл туралы ...

15. Тақырыбыңызды экспорттау

Тақырыбымызды нақты экспортқа шығармас бұрын, бір айта кететін жайт бар. «Пайдалы» ақпараты бар парақты еске түсіресіз бе? Ұсыныс емес, талап болатын бір шығарма бар екен.

Біз тақырыптарды кем дегенде 3 модельмен (A-C) құруға кеңес береміз.

Біздің тақырып Notekeeper қосымшасында дұрыс қолданылуы үшін, біз В және С үлгілеріне бір үлгідегі сериямызды (А әрпін) көбейтуіміз керек, бұл оңай нәрсе. Инспектордың жоғарғы жағындағы A қойындысын таңдап, + қойындысын екі рет басыңыз. Көру керек үш бірдей үлгі, енді біз аяқтадық.

Тақырыбымызды аяқтағаннан кейін оны Notekeeper қосымшасында пайдалану үшін экспорттайтын боламыз. Бұл парақтың ортасында, интерфейстің жоғарғы жағында орналасқан «Тақырыпты жүктеу» батырмасын басудан басталатын қарапайым процесс. Сізге тақырыпты атауға мүмкіндік беретін қорап, тақырыпты қалай қолдануға болатындығы туралы ақпарат және Zip жүктеу деген батырма беріледі. Біздің тақырыпты Notekeeper деп атағаннан кейін, Zip жүктеу түймесін басыңыз, сонда сіз жүктеу папкасында дәмді кішкене үлгіні аласыз.

ZIP файлының мазмұнын шығарыңыз, сонда сіз келесі каталог құрылымын көресіз:

• index.html
• themes / Notekeeper.css (Сіздің тақырыптың қысылмаған нұсқасы) Notekeeper.min.css (Қысылған нұсқа. Мұны өндірісте қолданыңыз) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png белгішелері-36-white.png

Ағаштың жоғарғы жағындағы HTML файлында тақырыпты қалай жүзеге асыруға болатындығы туралы ақпарат, сонымен қатар тақырып жұмыс істейтінін растайтын бірнеше виджеттер бар. Барлық сілтемелер мысал файлына қатысты, сондықтан оны кез-келген шолғыш терезесіне апарып, нәтижелерін көре алуыңыз керек.

Тақырыптарды жүктеу және іске асыру туралы бірнеше ескертулер:

1. jQuery командасы сізге осы ZIP файлындағы батырмалардың белгішелерін себепсіз береді. Тақырып бұл суреттердің CSS файлына қатысты болуын талап етеді. Демек, сіз әдепкі тақырыптарды қолданбасаңыз, тақырыпты веб-сайтыңызға жүктеген кезде кескіндер қалтасын қосуыңыз керек немесе белгішелер көрінбейді.

2. Тақырыптың қысылмаған нұсқасына ілулі тұрыңыз. Өлшеміне байланысты оны өндірісте пайдаланғыңыз келмесе де, оны ThemeRoller ішінде өзгерткіңіз келсе, қажет болады. ThemeRoller осы жазу кезінде кішірейтілген CSS файлын импорттай алмайды.

Энди Мэтьюз 16 жылдан астам уақыт қолданбаларды әзірлеуші ​​болып табылады және UI / UX, графикалық дизайн және бағдарламалау дағдыларына ие. Ол спикер, ашық көзі бар жасаушы және ол Нашвиллде, ТН штатында отбасымен тұрады. Ол Twitter-де @commadelimited.

Раймонд Кэмден - Adobe-дің аға евангелисті. Оның жұмысы веб-стандарттарға, мобильді құрылғыларды әзірлеуге және ColdFusion-ға бағытталған. Ол жарияланған автор және конференциялар мен қолданушылар топтарында әртүрлі тақырыптарда баяндама жасайды. Оны @cfjedimaster сайтында қадағалаңыз.