Мазмун
- 01. Барлар (.ui-bar-?)
- 02. Мазмундук блоктор (.ui-body-?)
- 03. Баскычтар жана тизмелерди көрүү (.ui-btn-?)
- 04. Аралаштыруу жана дал келүү үлгүлөрү
- 05. Жалпы сайттын активдүү абалы
- 06. Демейки сүрөтчөлөр
- 07. Ыңгайлаштырылган теманы түзүү жана колдонуу
- 08. ThemeRoller деген эмне?
- 09. ThemeRoller колдонуу
- 10. Алдын ала кароо
- 11. Түстөр
- 12. Inspector
- 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-body-?)
Мазмун блоктору жалпысынан абзац тексти пайда болушу күтүлүп жаткан аймактарга карата колдонулат. Анын түсү ага каршы коюлган тексттин түсү менен максималдуу окулушун камсыз кылат:
03. Баскычтар жана тизмелерди көрүү (.ui-btn-?)
Баскычтар жана тизмелерди көрүү jQuery Мобилдик китепканасынын эң маанилүү элементтеринин бири болуп саналат жана команда аларды туура жолго салып, убакытты сарптаганына ишенсеңиз болот. .Ui-btn префикси өйдө, ылдый, учуу жана активдүү абал стилдерин камтыйт:
04. Аралаштыруу жана дал келүү үлгүлөрү
JQuery Mobile-догу темалардын бири - бул баланын элементтери, эгерде башкача белгиленбесе, ата-энесинен тукум кууп өтүшү. Бул дегенибиз, эгерде сиз маалымат топтомунун атрибуту жок баскычты баш же колонтитул тилкесинин ичине койсоңуз, анда ал баскыч ата-энеси менен бирдей теманы колдонот. Жаман э?
Ошондой эле, бир моделди, ал эми бир элементтин баласын дагы бир серияны колдонуп, бир элементти жайгаштыруу толук алгылыктуу, ал тургай сунушталат. Бул элементтин өзгөчөлөнүп турушуна же колдонмонун башка бөлүгүнө дал келүүсүнө жардам берет же иштеп чыгуучу каалаган жүйөөлөрдү жаратат. Бул мүмкүн, жана андан да оңой нерсе. Жөн гана баш тилкенин ичине кнопканы (же башка элементти) коюп, ага өзүнүн маалымат темасы атрибутун дайындаңыз:
05. Жалпы сайттын активдүү абалы
jQuery Mobile ошондой эле бардык элементтер үчүн глобалдык активдүү абалды колдонот. Бул жигердүү абал баскычтар, форма элементтери, навигация жана башка нерселер үчүн колдонулат, учурда бир нерсе тандалып алынгандыгын көрсөтүү керек. Бул түс маанисин өзгөртүүнүн бирден-бир жолу - аны CSS аркылуу орнотуу (же жокко чыгаруу).Активдүү абал үчүн CSS классы .ui-btn-active деп ылайыктуу деп аталган:
06. Демейки сүрөтчөлөр
JQuery Mobile топтомуна иштеп чыгуучулар үчүн көптөгөн керектөөлөрдү камтыган 18 сүрөтчө киргизилген. Сөлөкөттөр топтому тунук түстө ак түстө, ал jQuery Mobile жарым-жартылай тунук кара тегерекченин үстүнө капталып, бардык үлгүлөргө карама-каршы келет. Сөлөкөт кошуу үчүн, керектүү сүрөтчөнүн аталышы менен маалымат-сөлөкөт атрибутун көрсөтүңүз:
jQuery Mobile дагы data-iconpos = "[жогорку, оң, төмөнкү, сол]" атрибутун колдонуп, баскычтын жогору, оң, ылдый же сол тарабына сөлөкөттөрдү жайгаштыруу мүмкүнчүлүгүн камсыз кылат, ал эми сол жак - демейки жайгаштыруу. Ошондой эле, иштеп чыгуучулар сөлөкөттү текстсиз эле, data-iconpos = "notext" көрсөтүү менен көрсөтө алышат:
Ыңгайлаштырылган иконаларды жайгаштырууга болот жана ушул бөлүмдө кийинчерээк баяндалат.
07. Ыңгайлаштырылган теманы түзүү жана колдонуу
Теманын темасы jQuery Mobile канчалык күчтүү экендигин буга чейин талкуулаганбыз. Жөнөкөй жана жарашыктуу стили менен бай мобилдик веб-сайтты иштеп чыгуу маанилүү эмес. Сиздин тиркемеңизди же вебсайтыңызды чындап эле уникалдуу кылуу үчүн колдонула турган үлгүлөрдүн жеке китепканасын түзүү мүмкүнчүлүгү андан да күчтүү. Өз темаңызды иштеп чыгууга төмөнкү эки жолдун бири менен кайрылсаңыз болот:
- Учурдагы jQuery Mobile CSS файлын жүктөп алып, ачып, көңүлүңүзгө жараша түзөтүңүз.
- 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 жүктөлгөндө биринчи кезекте жылмакай көрүнгөн экран, андан кийин пайдалуу Баштоо экраны көрүнөт:
Баштоо экранында бир нече пайдалуу кеңештер бар, андыктан Get Rolling баскычын чыкылдатуудан мурун аны карап көрүңүз:
Экрандын экраны чыкпай калгандан кийин, сизге негизги интерфейс сунушталат:
ThemeRoller төрт негизги тармакка бөлүнөт: Алдын ала кароо, Түс, Инспектор жана Куралдар. Алардын ар бири биз карап чыгышыбыз керек болгон маанилүү функцияларды камтыйт. Алдын ала көрүү бөлүмүнөн баштайбыз.
10. Алдын ала кароо
Учурдагы теманы жүктөп жатканыңыз болбосо, алдын ала көрүү аймагы ар кандай виджеттерге толгон үч толук, бирдей жана интерактивдүү jQuery Mobile баракчаларын көрсөтөт:
Чычканыңызды алардын үстүнө жылдырсаңыз, ар бир барак иштей тургандыгын көрө аласыз. Ар бир барактын баш жагында анын сырткы көрүнүшүн көзөмөлдөгөн кат көрсөтүлгөн.
11. Түстөр
Барактын жогору жагында сиз эки түстүү микросхемаларды, ошондой эле эки слайдердин башкаруу элементтерин жана күйгүзүү баскычын көрө аласыз. Андан ары оң жакта дагы он түстүү микросхемаларды көрө аласыз, алар бош болушу керек. Булар жакында колдонулган түстөргө арналган жана сиз түстү тандап алганга чейин бош болот:
Түстөр чиптеринин астында Lightness жана Saturation деген эки жылдыргыч бар. Жеңилдик слайдери түс түстөрүнүн катарларынын ачык жана күңүрт тонун жөнгө салат, ал эми каныккандыгы түстөрдү көбүрөөк же азыраак жандуу кылат. Биригип, колдонуучу каалаган түсүн болжолдоп билиши керек. Кулерден түстөрдү колдонуу үчүн Adobe Kuler үлгүлөрү деп белгиленген тексттик шилтемени чыкылдатыңыз.
Түс чиптеринин ар бирин алдын ала көрүү аймагындагы каалаган элементке сүйрөп барса болот. Бул серия топтомун иштеп чыгууну өтө жеңилдетет. JQuery Mobile стилдеринин көпчүлүгү бири-бирине дал келгендигин эске алыңыз, мисалы, барактын жогору жагындагы баш тилке тизме башынын стилиндегидей стилди алат. Түстөрдү каалагандай тууралап, ар бир чипти барактын элементине сүйрөп барыңыз. Ар бир барактын өзүнүн үлгүсү экендигин унутпаңыз, ошондуктан түстөрдү аралаштырып тандап алууда этият болуңуз.
12. Inspector
Интерфейстин сол жагында эки бөлүккө бөлүнгөн инспекторлор панели жайгашкан. Үстүңкү бөлүгүндө иштеп чыгуучуларга темасын жүктөп алууга, бар теманы импорттоого жана алардын темасына шилтеме менен бөлүшүүгө мүмкүнчүлүк берген баскычтар бар. Бул китепти сатып албаган адамдар үчүн Жардам шилтемеси бар:
Төмөнкү бөлүмдө Global, A, B, C жана + белгилери коюлган бир катар өтмөктөр камтылган. Бул өтмөктөрдүн ар бири аккордеон панелин камтыйт, анда баардык үлгүлөргө тиешелүү Глобалдык табулатурадан тышкары, жеке үлгү үчүн бардык баалуулуктар камтылган.
Глобалдык өтмөгүн тандап, андан соң Активдүү абалды чыкылдатыңыз, аккордеон панели кеңейип, бүткүл темаңыз боюнча жигердүү абалга орнотууларды көрсөтөт. Параметрлерге тексттин түсү, көлөкө, фон жана чек ара кирет. Глобалдык маанини өзгөртүү учурдагы (жана келечектеги) жаңы шартты чагылдырып турат.
Кошумча үлгүлөрдү темага эки жол менен кошсо болот. Инспектордун жогору жагындагы + өтмөгүн чыкылдатуу менен, темаңыздагы акыркы орунга жаңы үлгү кошулат. Алдын ала көрүү аймагынын төмөн жагында жайгашкан Swatch кошуу баскычын чыкылдатып, жаңы үлгү кошсоңуз болот. Сунуштарды алып салууну каалаган үлгүдөгү табулатураны тандап, андан кийин Swatch аталышынын оң жагында жайгашкан Delete шилтемесин басуу менен жок кылса болот. Штабелдин жогору жагындагы үлгү өчүрүлсө, калган үлгүлөрдүн аталышы өзгөрүлөрүн эске алыңыз.
13. Куралдар
Барактын эң жогору жагында бир катар баскычтар бар. Бул баскычтар ар кандай тапшырмаларды аткарууга мүмкүндүк берет, аларды бир аздан кийин жасайбыз, бирок алгач баскычтардын өзүн жакшылап карап чыгыңыз:
Сиз төмөнкү баскычтарды байкайсыз: 1.1 (учурдагы) Нускасы менен 1.0.1 Нускасы ортосунда алмаштырууга мүмкүнчүлүк берген которгуч, артка кайтаруу / кайталоо жана инспектор үчүн которуштуруу баскычы. Бул күйгүзгүчтү күйгүзсөңүз, алдын ала көрүү аймагындагы бардык виджеттерди текшерүүгө болот. Виджеттин үстүндө жылдырганда, ал элемент көк түс менен белгиленет. Элементти чыкылдатуу менен, инспектор аймагындагы аккордеон менюсу ошол элементтин өзгөчөлүктөрүн көрсөтүү үчүн кеңейет.
Темаңызды жүктөп алууга, мурун түзүлгөн теманы импорттоого же жаңыртууга, темаңызды башкалар менен бөлүшүүгө жана жардам берүү баскычына кошумча төрт баскыч бар.
14. Notekeeper үчүн тема түзүү
Эми ThemeRoller интерфейси менен таанышып калсак, алдыга жылып, биринчи темабызды жаратсак кандай болот? Абстрактуу түрдө куруунун ордуна, келгиле, биз мурун курган Notekeeper колдонмосу үчүн колдоно турган нерсени жараталы. Жөн гана jQuery Mobile менен жеткирилген учурдагы темалардын бирин өзгөртүү менен баштайлы. Команда колдонуучуларга демейки темаларды жаңы темалардын башталышы катары импорттоого мүмкүнчүлүк берүүчү боорукердик менен мамиле кылышты, андыктан биз биринчи кезекте ушул жакка жөнөйбүз. Терезенин сол жагындагы Импорттоо баскычын чыкылдатып, сизде бар теманын мазмунун чаптоого мүмкүнчүлүк берген кутуча пайда болот:
Демейки теманы импорттоо, демейки теманы импорттоо деп аталган жогорку оң бурчтагы шилтемени чыкылдатып. Тексттер CSS менен толтурулгандан кийин, Импортту чыкылдатыңыз. Алдын ала көрүү аймагы кайрадан жүктөлүп, А дан Е ге чейинки үлгүлөр көрсөтүлөт.
Ак күчтү өзгөртүүгө болгон күч-аракетибизди жумшайбыз, D, анткени бул биздин акыркы максатыбызга эң жакын. Swatch A аталышы катары колдонууну туура көргөндүктөн, D нускасы гана калган бойдон башка үлгүлөрүн жок кылалы. ThemeRoller сериялардын аталыштарын башкалар жок кылынгандыктан, алардын атын өзгөрткөнүн унутпаңыз. Бул дегенибиз, A Swatch өчүргөндө, B A болуп калат, C D болуп калат ж.б.
D болгон серия эми A абалына келгенге чейин жүрө бериңиз. Акырында, B Swatch (мурунку Swatch E болгон) жок кылыңыз, ошондо бизде A Swatch гана калат:
Бул серия жакшы көрүнөт, бирок бир аз жумшак. Келгиле, башты жагымдуу жашыл түскө өзгөртүп, бир аз боёп алалы. Кайсы бир элемент үчүн кандай маанилерди өзгөртүү керектигин аныктоонун эң жөнөкөй жолу - инспекторду колдонуу. Жогору жактагы инспекторду Күйгүзүп, А темасынын башындагы каалаган жерди чыкылдатып, сол жакта А табулатура тандалып калса, аны туура түшүнгөнүңүздү билесиз жана Header / Footer панели кеңейет:
Түстү бир нече жолдун бири менен өзгөртө аласыз. Түстүү чипти жогору жактан түз эле фонго сүйрөсөңүз болот. Ошондой эле түстүү чипти киргизүү талаасына сүйрөп барсаңыз болот. Акыры, сиз маанини кол менен киргизе аласыз. Түстөрдүн маанисин камтыган талааны чыкылдатканыңызда, сизге жылтыр түс тандагыч берилген. Бул панелдеги киргизүү талааларындагы баалуулуктарды мурунку скриншотто көрсөтүлгөн көрсөткүчтөргө өзгөртүңүз.
Жакшы көрүнөт, бирок азыр теманын жигердүү абалы көк биздин жашыл менен кагылышат. Текшерүүчү куралды колдонуп, Күйгүзүү / Өчүрүү күйгүзүү тилкесинин Кыймыл бөлүгүн бир жолу чыкылдатыңыз. Бул Глобалдык өтмөктөгү активдүү абал панелинин кеңейишине алып келиши керек. Көк түстү жакшы жылуу бозго алмаштырабыз. Эми Global панели төмөнкү скриншотко окшош болушу керек:
Жаңы темабыздын эң ысык болушуна жол бербеген бир гана нерсе бар, жогору жагындагы абзацтагы көк тексттин шилтемеси. Ишенимдүү инспекторубузга кайрылып, А өтмөгүндөгү Мазмун тулкусу панелин кеңейте турган шилтемени чыкылдатып көрөлү. Эми, CSS менен тааныш болгондор үчүн, шилтеменин түсүн жөн эле hover, баргандар: hover жана активдүү абалды өзгөртпөстөн өзгөртө албастыгыңызды билесиз. Көйгөй ошол өзгөрүүлөрдү жасоого мүмкүнчүлүктөрдүн жоктугунда, бирок ThemeRoller сиз камтылган. Калган параметрлерди көрсөтүү үчүн Шилтеменин түсү киргизилген талаанын оң жагындагы + баскычын чыкылдатып, андан кийин төмөнкү скриншотто көрсөтүлгөндөй түстөрдү өзгөртүңүз:
Жана ошол. Текшерүүчү аймакты изилдеп жатып, темаңызга кошумча өзгөртүүлөрдү киргизгенден тартынбаңыз. Өзүңүзгө жаккан нерсени өзгөртүңүз, ал азыр бит жана байт. Ошол убакта артка кайтаруу мүмкүнчүлүгү жок экендигин унутпаңыз. Эгер сизге бир нерсе чын эле жагып жатса, анда баалуулуктарды жоготпош үчүн жазып коюңуз же аны ушул бойдон экспорттоп көрүңүз. Кеп ...
15. Темаңызды экспорттоо
Чындыгында биздин теманы экспорттоодон мурун бир нерсени белгилей кетүү керек. "Пайдалуу" маалымат камтылган баракчаны эсиңиздеби? Сунуш эмес, талап болгон бир даана бар экен.
Темаларды кеминде 3 үлгү (A-C) менен курууну сунуштайбыз.
Биздин тема биздин Notekeeper колдонмосуна туура келиши үчүн, биз В жана С үлгүлөрүнө бир гана үлгүбүздү (А тамгасын) көчүрүшүбүз керек, бактыга жараша, бул оңой эле нерсе. Инспектордун жогору жагындагы А кошумча барагын тандап, андан кийин + өтмөгүн эки жолу чыкылдатыңыз. Көрүшүңүз керек үч окшош үлгү, эми биз бүттүк.
Эми темабызды бүтүрүп, аны 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 дарегинен ээрчиңиз.
