Imizekelo yeendawo zokunxibelelana ezineethebhu kunye nendlela yokuzakha

Ikhaya » Python » Imizekelo yeendawo zokunxibelelana ezineethebhu kunye nendlela yokuzakha

Ii-interfaces zeTabbed zezinye zeendlela zokuzulazula eziqheleke kakhulu kwisoftware yanamhlanje, ukusuka kwii-apps zeselfowuni kunye needeshibhodi zewebhu ukuya kwizixhobo zophuhliso ezintsonkothileyo. Zivumela abasebenzisi ukuba batsibe phakathi kwamacandelo okanye amaxwebhu ahlukeneyo ngaphakathi kwefestile enye, zigcina amava ecocekile, ekhawuleza ukuskena kwaye kulula ukuwafunda. Xa zenziwe ngobuchule, iithebhu zinciphisa kakhulu ukuxinana kwaye zenze kucace ukuba loluphi umxholo olubonakalayo okwangoku.

Emva kwaloo mqolo ulula weeleyibhile kukho izigqibo ezininzi zoyilo kunye neendlela zobugcisa.: iithebhu ezizinzileyo okanye ezinokuskrolwa, uyilo lwe icon kuphela, iinkqubo zethebhu ezifakwe kwii-page builders, iifestile zethebhu zesitayile soxwebhu kwiProgressive Web Apps, okanye ii-widget zethebhu ezenziwe ngokwezifiso ezakhiwe ngee-frameworks ezifana neBootstrap okanye iXajax. Kule khokelo siza kuhamba ngeendlela ezahlukeneyo imizekelo yojongano olunethebhu kunye neendlela zokuphumeza, ukudibanisa zonke izimvo ezivela kwi-Android, i-web UI, ii-PWA manifests kunye nezisombululo zakudala ze-PHP + Ajax.

Ujongano lweTabbed kwi-Android eneTabLayout kunye neViewPager

Kwi-Android, ibhloko ephambili yokwakha ukuhamba ngeethebhu kwi-Material Design yiwijethi yeTabLayout, idla ngokudityaniswa neViewPager (okanye iViewPager2 kwiiprojekthi ezintsha). Iqela le-Google loYilo lwezinto lichaza iithebhu ngokulula kakhulu: zenza kube lula ukuhlola nokutshintsha phakathi kweembono ezahlukeneyo ngaphakathi komsebenzi ofanayo.

I-TabLayout icwangcisa iithebhu ngokuthe tye kwaye iveza iindlela ezimbini eziphambili zokusebenza: ezisisigxina nezinokuskrolwaKwimo emiselweyo, yonke ithebhu ibonakala ngaxeshanye kwaye ububanzi obufumanekayo bahlulwe phakathi kwabo. Le yipateni esetyenziswa kwiiapps ezifana neWhatsApp, apho iindawo ezimbalwa ezahlukeneyo zihlala zicofa kanye kwaye iithebhu zizalisa umqolo wonke.

Iithebhu ezinokuskrolwa ziyasetyenziswa xa inani lamacandelo okanye ubude beelebhile budlula ububanzi besikriniKolu qwalaselo, umsebenzisi unokuswayipha ngokuthe tye kwibar yethebhu ukuze afumane ezinye iindlela. I-app ye-Google News & Weather yireferensi elungileyo ye-TabLayout eskrolwayo, apho iindidi zomxholo zikhula ngaphezu koko isikrini esinye sinokukugcina ngokukhululeka.

Ithebhu nganye kwiTabLayout idla ngokuma kwiFragment eboniswe ngaphakathi kwiViewPagerXa umsebenzisi ecofa kwithebhu, iTabLayout ihlaziya imeko yayo ekhethiweyo kwaye iViewPager iya kwiqhekeza elihambelanayo. Ngokufanayo, xa umsebenzisi eswayipha phakathi kwamaphepha, isalathisi sethebhu esikhethiweyo siyahamba ukuze silandelele iqhekeza elibonakalayo ngoku. Olu qhagamshelo oluqinileyo ludla ngokuxhunywa ngentambo setupWithViewPager(), edala ngokuzenzekelayo iithebhu kwaye iqhagamshela abaphulaphuli kwimicimbi yokuskrola nokucofa.

Iithebhu zezinto ezibonakalayo zinokubonisa umbhalo, ii-icon okanye indibaniselwano yazo zombiniEzinye ii-apps, ezifana ne-Twitter kwi-Android, zixhomekeke kakhulu kwii-icon ezibonwayo endaweni yeelebhile, nto leyo egcina indawo kwaye inokuskena ngokukhawuleza xa abasebenzisi beqonda intsingiselo yesimboli ngasinye. I-TabLayout ixhasa zonke ezi ndlela, nokuba zichazwe kwi-XML okanye zimiselwe ngokwenkqubo.

Ukudala ujongano olusisiseko lwe-Android olunethebhu inyathelo ngenyathelo

Ukwakha i-UI elula efakwe kwi-tab ukusuka ekuqaleni kwi-Android Studio, uhlala uqala ngomsebenzi ongenanto, idla ngokubizwa ngokuba yinto efana MainActivity, uze emva koko ungenise iziqwenga ezintathu ezibalulekileyo: iziqwenga ezimbalwa, iTabLayout kwi-XML yoyilo lwakho, kunye neViewPager elawulwa yi-adapter ye-pager.

Ibhloko yokuqala yokwakha iseti encinci yeeklasi zeFragment, enye kwithebhu nganyeUmzekelo, ungachaza FragmentOne, FragmentTwo kwaye FragmentThree, nganye inyusa uyilo lwayo lweXML (umzekelo, fragment_one.xmlIkhowudi yesiqwenga ngasinye ilula: vuthela umbono, bopha naziphi na iiwijethi kwaye unikeze umxholo ofanelekileyo kuloo thebhu.

Okulandelayo wongeza iTabLayout kunye neViewPager kulwakhiwo lwakho lomsebenzi ophambili, e activity_main.xml ubhengeza TabLayout into ene-ID efana tab_layout kunye a ViewPager ngaphantsi kwayo. Ngeempawu ezifana app:tabMode kwaye app:tabGravity Ulawula ukuba iithebhu zilungisiwe okanye ziyashukunyiswa, kwaye nokuba ziyasolulwa na ukuze zizalise ububanzi obufumanekayo. tabMode="fixed" kwaye tabGravity="fill" iza kusasaza zonke iithebhu ngokulinganayo kwibar, nto leyo ebonakala ngakumbi kwizikrini ezibanzi ezifana neetablethi.

Iithebhu zokuhombisa zihlala zenziwa ngereferensi yesitayile esenziwe ngokwezifiso kwiTabLayoutNgokusebenzisa isitayile esifana @style/CustomTabLayout, ungazichaza izinto ezinje ngombala wesalathisi (tabIndicatorColor), ubude besalathisi (tabIndicatorHeight) kunye nemibala yombhalo yeemeko ezikhethiweyo nezingakhethwanga (tabTextColor kwaye tabSelectedTextColorEzi mpawu zifanayo zingasetwa ngokwenkqubo ngeendlela ezinje setSelectedTabIndicatorColor() or setTabTextColors(), kodwa ukubeka uyilo kwindawo enye kwi-XML kwenza kube lula ukugcina inkangeleko ifana.

Emva kokuchaza ulwakhiwo, uncamathisela iadaptha yepeja elawula ukuba yeyiphi iFragment ebonakala kwithebhu nganye.Ukuphunyezwa okuqhelekileyo kuyakhula FragmentPagerAdapter (okanye FragmentStatePagerAdapter okanye entsha FragmentStateAdapter yeViewPager2) kwaye igqitha iindlela ezintathu: getItem() ukubonelela ngesiqwenga sendawo ethile, getCount() ukuxela inani lamaphepha akhoyo, kunye getPageTitle() ukuhambisa umbhalo welebheli kwithebhu nganye. Xa ithebhu yokuqala, enesihloko esithi “Item 1 yethebhu”, ikhethiwe, getItem() uya kubuya FragmentOne, edibanisa ilebheli nomxholo wayo.

Zonke izinto ziyadibana kumsebenzi onCreate() indlelaApho uthatha iireferensi kwiTabLayout kunye neViewPager ukusuka activity_main.xml, yakha iadaptha yakho ngeFragmentManager uze uyibeke kwiViewPager. Ubizo oluya tabLayout.setupWithViewPager(viewPager) igqiba ukufakelwa kweentambo, idala iithebhu zongeniso ngalunye kwiadaptha kwaye ivumelanisa ukusebenzisana kwabasebenzisi. Ukuswayipha phakathi kwamaphepha kuhlaziya ithebhu ekhethiweyo, kwaye ukucofa iithebhu kuskrola ipager ukuya kwiqhekeza lasekunene.

Ukuba ufuna ulawulo olucokisekileyo kwizenzo zomsebenzisi, ungancamathisela OnTabSelectedListenerLo mphulaphuli utyhila iindlela ezintathu zokubiza kwakhona: onTabSelected() xa ithebhu ikhethwa, onTabUnselected() xa ilahlekelwa yingqwalasela, kwaye onTabReselected() xa umsebenzisi ecofa ithebhu esele iyasebenza. Ezi hook zilungele ukulayisha idatha eyongezelelweyo kuphela xa ithebhu ijongwa ngokwenene okanye ukuze kuqaliswe ii-animations ezincinci xa ugxininiso lutshintsha.

Iithebhu eziskrolwayo xa zithelekiswa nezilungisiweyo kunye nokusebenzisa ii-icon endaweni yombhalo

Uyilo lwezinto ezibonakalayo lwahlula ngokucacileyo phakathi kweethebhu ezisisigxina kunye neethebhu ezinokuskrolwa, kwaye nganye ineemeko ezifanelekileyo zokusetyenziswa. Iithebhu ezilungisiweyo ziyacetyiswa xa unenani elilinganiselweyo leelebheli ezimfutshane abasebenzisi abanokufuna ukuzithelekisa ecaleni kwelinye. Zilungele ukuhambahamba kokuqala kwizikrini zokuchukumisa, apho ukucaca kunye nozinzo kubaluleke ngaphezu kokufaka ikhathalogu enkulu yamaphepha.

Iithebhu eziskrolwayo ziyakhanya xa iileyibhile zinde okanye udinga iithebhu ezingaphezu kwezineUkuba uzama ukufaka amagama amade kwiTabLayout esisigxina, i-Android iza kuqala ukusonga iilebhile kwimigca emininzi okanye ide izinqumle, nto leyo engabonakali nje ingcolile kodwa ikwayonakalisa ukusetyenziswa kwayo. Xa imo yokuskrola ivuliwe, umsebenzisi unokuslayida kakuhle umcu wethebhu ekhohlo nasekunene, kwaye ilebhile nganye ifumana indawo eyaneleyo yokuba ifundeke.

Ukutshintsha phakathi kwezi ndlela kungenziwa nokuba kukwi-XML nge app:tabMode okanye ngokwenkqubo kunye setTabMode(). Ukupasa TabLayout.MODE_FIXED ivelisa iithebhu ezizinzileyo, ngelixa TabLayout.MODE_SCROLLABLE yenza uluhlu olunokuskrolwa ngokuthe tye. Kubalulekile ukukhumbula ukuba ukuba ulindele iindidi ezingaphezu kwezine, izikhokelo zicebisa ngamandla ukuba uthambekele kulungiselelo olunokuskrolwa.

Olunye utshintsho olunamandla kukusebenzisa ii-icon endaweni yesicatshulwa kwiileyibhile zethebhuNgokubiza getTabAt(index) kwimeko yeTabLayout uze ubize setIcon(), unika into enokutsalwa kwithebhu ethile. Oku kuvula indawo yeebar zethebhu ezincinci kakhulu, ingakumbi xa ii-icon ziqondwa ngokubanzi. Ukuba usatshintsha getPageTitle() Kwi-adaptha yakho, ungadibanisa umbhalo kunye nee-icon; ukuba uyayishiya loo nto yokugqithisa, ugqibela unee-icon-only tabs.

Ukuziphatha kwethebhu nako kuyalungiselelwa kakhulu ngaphandle kokuchukumisa i-XMLUngenza iithebhu ngokucacileyo nge newTab(), endaweni yokuthembela setupWithViewPager(), kwaye ungatshintsha imo yethebhu ngokukhawuleza, uphendule kukhetho ngabaphulaphuli okanye ufake iimbono zethebhu ezenziwe ngokwezifiso ukuba ufuna uyilo oluntsonkothileyo kuneleyibhile kunye ne icon elula.

Ukusebenzisa iitemplate ze-Android Studio ukwenza imisebenzi eneethebhu

Ukubhala ujongano olunethebhu ukusuka ekuqaleni kulungile ekuqondeni indlela yonke into ehambelana ngayo, kodwa i-Android Studio inokukwenzela useto olusebenzayo ngemizuzwanaI-IDE ithumela ngeetemplate zeepateni eziqhelekileyo, kuquka "uMsebenzi weTabbed" ofumaneka kwiJava nakwiKotlin.

Xa uqala iprojekthi entsha, emva kokukhetha igama lesicelo kunye nezixhobo ekujoliswe kuzo, ungakhetha "Umsebenzi oThebhiweyo" kuluhlu lwemisebenziKwibhokisi yokugqibela yoqwalaselo kukho ukhetho lokukhetha isitayile sokuzulazula, esifana ne-“Action Bar Tabs (eneViewPager)”. Wakuba uqinisekisile, i-Android Studio ivelisa umsebenzi ngeTabLayout, iViewPager kunye neziqwenga zemizekelo ezidityanisiweyo ukuze ukwazi ukubaleka nokuhlola ngoko nangoko.

Ezi templates ezakhelwe ngaphakathi ziluncedo kakhulu kwiiprototypes kunye neeapps ezilulaBamisela ikhowudi ye-boilerplate, uyilo lwemizekelo kunye ne-wiring logic ukuze ukwazi ukugxila kwimixholo yokwenyani kunye nokuziphatha okuthile. Kwiiprojekthi ezikhoyo, ungongeza uhlobo olufanayo lomsebenzi kwimenyu yeFayile ngokufaka "uMsebenzi weTabbed" omtsha kwaye ulandele amanyathelo afanayo.

Kwii-apps ezinomdla ngakumbi ezine-navigation enzima okanye ulwimi olubonakalayo olulungiselelwe wena, iitemplate zomntu wesithathu zinokukhawulezisa izinto ngakumbiIimarike ezifana ne-Envato zibonelela ngeetemplate ze-app ze-Android ezakhiwe kwangaphambili eziquka ii-interfaces ezintsonkothileyo kunye neepateni zoYilo lweMpahla eziphuma ebhokisini. Ezi zixhobo ziluncedo ngakumbi xa ufuna ukugxila kwimisebenzi eyahlukileyo endaweni yokuphinda udale ukuzulazula okuqhelekileyo ukusuka ekuqaleni.

Iithebhu ezifakwe kwi-Elementor zezakhiwo zewebhu eziphambili

Kwiwebhu, abakhi bephepha abanjengoElementor bazisa ingcamango yojongano lwethebhu kwimisebenzi yoyilo yokutsala nokulahlaEnye indlela eguquguqukayo ngakumbi ziithebhu ezifakwe ngaphakathi kwezinye iithebhu, ezikuvumela ukuba uqokelele umxholo onxulumeneyo kwiindlela ezicwangciswe ngokunzulu kodwa ezincinci ngaphandle kokuliphazamisa iphepha.

Inyathelo lokuqala elifanelekileyo xa uyila iithebhu ezifakwe kwiindawana kukuchaza ulwimi olubonakalayo oluhambelanayoUmzekelo, ithebhu ingadibanisa umfanekiso weqhawe, isihloko esishwankathela indawo okanye isicwangciso, inkcazo emfutshane yombhalo kunye neqhosha. Nje ukuba eso sakhiwo simiselwe, ungatshintsha uyilo lokwenyani ngethebhu nganye - mhlawumbi ibhloko enye ethe nkqo kwenye, ulungiselelo lweekholamu ezimbini kwenye, kunye nolwakhiwo lwemigca emithathu kweyesithathu - ngelixa ugcina izinto ezifanayo ukuze ujongano luhlale luhambelana.

Iithebhu ezifakwe kwi-Elementor zikuvumela ukuba ulahle nayiphi na iwijethi oyithandayo, kungekhona nje umbhalo ocacileyo. Ungazifaka iitheyibhile zamaxabiso ukubonisa izicwangciso zenyanga, zesiqingatha sonyaka nezeminyaka ngaphakathi kweetheyibhile ezahlukeneyo, okanye uzidibanise neegridi zeluphu ukuze ucofe ngokuguquguqukayo iiposti zebhlog, iimveliso okanye izinto zepotifoliyo ngokweendidi. Ngokudibanisa iindidi neetheyibhile, iindwendwe zinokucofa ngokukhawuleza kwizinto ezibalulekileyo kubo ngaphandle kokushiya iphepha langoku.

Iithebhu zikwayindlela enamandla yokukhokela abasebenzisi kwiinkqubo okanye amabaliUmzekelo omnye kukusebenzisa iithebhu ezine okanye ngaphezulu njengamanyathelo kwindlela yokuseta: ithebhu nganye inokubonisa uphawu, inombolo yenyathelo kunye nelebheli emfutshane kumcu wethebhu, ngelixa umxholo wephaneli unesicatshulwa kunye nemifanekiso eyahlukileyo yeso sigaba. Yongeza imiphumo yentshukumo okanye ii-animations ezifihlakeleyo kwimifanekiso kunye nezinto kwaye ungenza amava akhokelwayo, amabali anomdla ngakumbi kunephepha elide elingashukumiyo.

Ukuze ufumane iideshibhodi eziphucukileyo kunye nemibono yesitayile solawulo, abayili ngamanye amaxesha baya kwinqanaba elinye nzulu baze basebenzise iithebhu ezifakwe ngaphakathi kwiithebhu ezifakwe ngaphakathiKhawuthelekelele ikholamu ethe nkqo yeethebhu phantsi kwicala lasekhohlo isebenza njengeecandelo eziphambili, nganye iqulethe iseti ethe tye yeethebhu zesibini zeembono ezincinci. Nge-CSS encinci eyenziwe ngokwezifiso - umzekelo, ukusebenzisa i-CSS ID yethebhu nganye ukujikeleza iileyibhile kunye nokucinezela ukuhamba ngokuthe nkqo - ungakha iiphaneli zolawulo zethebhu ezisebenzayo kakhulu ngokupheleleyo ngeekhonteyina ze-Elementor kunye neegridi ze-loop.

Eyona nto ibalulekileyo kukuba iithebhu ezifakwe kwii-nest zibonelela ngamathuba angapheliyo okuhlela umxholoNokuba ulungiselela utyelelo lwezinto ezibalulekileyo, ukhetho lwamaxabiso, iipotifoliyo okanye iideshibhodi zohlalutyo, indibaniselwano yolwimi loyilo oluhambelanayo kunye noyilo oluguquguqukayo kukuvumela ukuba upakishe ulwazi oluninzi kwindawo esenokubonakala ilula ukuyihlola.

Imo yesicelo esifakwe kwiTab kwiProgressive Web Apps

Ii-interfaces zeTabbed azihlali nje ngaphakathi kumaphepha ewebhu; zinokuchazwa ngendlela iiProgressive Web Apps ezisebenza ngayo njengeewindows ezizimeleyo.Kwi-ChromeOS, "imo yesicelo sethebhu" ekhethekileyo ivumela i-PWA ukuba ibonise umcu wethebhu wesitayile soxwebhu, ofana noko ubuya kulindela kumhleli wemveli okanye kwi-IDE.

Ii-PWA zixhasa iindlela ezahlukeneyo zokubonisa ezilawulwa nge display ilungu kwi-app yewebhu. Izinketho zibandakanya fullscreen, standalone, minimal-ui kwaye browser, kwaye iibrowsers zibuyela umva ngekhonkco elichaziweyo ukuba imo ethile ayixhaswanga. Ukuze kubekho ulawulo olucokisekileyo kukho display_override ipropathi, evumela abaphuhlisi ukuba bacacise iodolo yokubuyela umva eyenziwe ngokwezifiso.

Imo yesicelo esitsha esifakwe iithebhu igcwalisa isikhewu sangaphambili ngokubonelela nge-interface yoxwebhu olufakwe iithebhu (TDI) eyakhelwe ngaphakathi kwii-PWAsEndaweni yokwenza iithebhu zibe yi-fake ngaphakathi kwiphepha nge-HTML kunye neJavaScript eyenzelwe wena, usetyenziso lunokucela inkqubo ukuba ibambe amaxwebhu amaninzi okanye iimbono kwiithebhu zokwenyani eziphezulu ngaphakathi kwefestile ye-PWA ekhethekileyo. Oku kwahlukile kwi display: browser, evula nje usetyenziso kwithebhu yesikhangeli esiqhelekileyo ene-UI epheleleyo yesikhangeli.

Iimeko eziqhelekileyo zokusetyenziswa kwale ndlela ziquka ii-apps zokuvelisa, izixhobo zonxibelelwano kunye namava okufunda. Umhleli wekhowudi i-PWA unokuvula iifayile ezininzi kwiithebhu ezahlukeneyo, umthengi wencoko unokubonelela ngethebhu ngegumbi okanye itshaneli, kwaye usetyenziso lokufunda lunokuvula amakhonkco enqaku kwiithebhu zezicelo ezintsha, zonke zihlala zicocekile ngaphakathi kwefestile enye endaweni yokudibanisa isikhangeli ngokubanzi.

Kukho umahluko obalulekileyo phakathi kwale ndlela yethebhu eyakhelwe ngaphakathi kunye nee-UI zethebhu ezenziwe ngokwezifiso ezenziwe ngabaphuhlisiIithebhu zenqanaba lenkqubo zinokuphatha amaxwebhu amaninzi ngobuchule, zizuze ekuhlukanisweni kwezixhobo kwaye zidibane nzulu neempawu zesikhangeli ezifana nembali yokuhambahamba, "Khuphela ikhonkco leli phepha", ukuphosa kwithebhu yangoku okanye ukuvula uxwebhu olusebenzayo kwifestile yesikhangeli eqhelekileyo. Ukuba ulingisa iithebhu ezikwiphepha, ezo zakhono zisebenza kwigobolondo langaphandle, kungekhona kwimbonakalo nganye engaphantsi.

Indlela yokumisela imo yesicelo esineethebhu ze-PWA

Ukuvula imo ye-tabbed ye-PWA kuqala kwi-manifest, ngokuseta imo efanelekileyo display_override IkhonkcoUqwalaselo oluncinci lunokucacisa "display": "standalone" kwaye "display_override": , oko kuthetha ukuba isikhangeli kufuneka sikhethe ifestile ye-app eneethebhu ukuba kunokwenzeka kwaye kungenjalo sibuyele kwifestile eqhelekileyo ezimeleyo.

Ngaphandle koko, i tab_strip ilungu likuvumela ukuba wenze ngokwezifiso indlela yokuziphatha kwibar yethebhu yesiceloLe nto ingachaza iipropathi ezimbini ezingaphantsi ezikhethiweyo: home_tab kwaye new_tab_buttonUkuba awufaki tab_strip ngokupheleleyo, isikhangeli siza kubonelela ngokuziphatha okuzenzakalelayo sisebenzisa i-URL yokuqala yesicelo njengesiseko sokudala iithebhu ezintsha.

Ingcamango yethebhu yasekhaya ibaluleke kakhuluYithebhu ephiniweyo ekufuneka ihlale ikhona nanini na xa ifestile ye-app ivuliwe, kwaye akufuneki ihambe isuka kwindawo yayo echaziweyo. Naziphi na iikhonkco ezicofwe ngaphakathi kweli thebhu lasekhaya kulindeleke ukuba zivuleke kwiithebhu ezintsha ze-app endaweni yoko. Uyilungiselela nge home_tab.scope_patterns, oluluhlu lweepateni ze-URL (ezidla ngokuba ngamagama alula afana "/" or "/index.html") ngokumalunga ne-URL ye-manifest.

The new_tab_button inqaku lichaza indlela eziphatha ngayo iindleko ze-UI "zethebhu entsha"Ine-single url ilungu elichaza ukuba leliphi iphepha eliza kuvulwa xa umsebenzisi ecofa iqhosha, ngesiqhelo into engaphakathi kobubanzi be-app efana "/create"Ukuba loo URL ikwindawo yethebhu yasekhaya, i-app ayizukutyhila ulawulo "lwethebhu entsha" eyahlukileyo kwaphela, kuba kucingelwa ukuba ukuzulazula kwenzeka kwimbono yasekhaya.

Umzekelo we-manifest odibanisa ifestile ye-app enethebhu ungabonakala ngolu hlobo (ngokwembono): ichaza igama, start_url, display isethelwe standalone, display_override equlethe "tabbed", i home_tab osibonakude sakhe sigubungela / kwaye /index.html, Kunye new_tab_button iqwalaselwe nge "/create" I-URL. Ngaloo setingi, abasebenzisi bafumana ithebhu yasekhaya eqhubekayo kunye nokukwazi ukuvula amaxwebhu ongezelelweyo ngokucofa kube kanye.

Ii-apps zinokubona ukuba zisebenza kwimodi ye-tabbed ngexesha lokusebenza. Sebenzisa i display-mode uphawu lwemidiya, ungabhala ibhloko yeCSS efana @media (display-mode: tabbed) ukulungisa izitayile, okanye ukusebenzisa window.matchMedia('(display-mode: tabbed)').matches kwiJavaScript ukujonga ukuba imo yesicelo esifakwe kwithebhu iyasebenza na kwaye ulungise indlela yokuziphatha ye-UI ngokufanelekileyo.

Okokugqibela, kukho intsebenziswano enomdla ne-Launch Handler APIXa i-PWA enethebhu isetiwe "client_mode": "navigate-new" Kwisimo sayo sokuqalisa, ukuqaliswa kwe-app kunokujoliswa kwiithebhu ezintsha ngaphakathi kwefestile ye-app ekhoyo endaweni yokuvelisa iifestile ezininzi. Oku kugcina indawo yokusebenza yomsebenzisi icocekile kwaye kuqinisa ingcamango yendawo yesicelo enye, egxile kwithebhu.

Ukwakha ukuzulazula okwenziwe ngokwezifiso nge-PHP, i-Ajax kunye ne-Xajax

Kudala ngaphambi kokuba ii-PWA zibe neethebhu zenqanaba lenkqubo, abaphuhlisi bewebhu bebesenza izinto zabo zokukhangela iithebhu besebenzisa i-HTML, i-CSS, iJavaScript kunye nekhowudi esecaleni kweseva.Enye indlela eqhelekileyo isebenzisa i-PHP kunye nesakhelo seXajax ukulayisha umxholo wethebhu ngokungangqamananga kunye nokuhlaziya iphepha ngaphandle kokulayisha kwakhona ngokupheleleyo.

Ulwakhiwo lwe-HTML kumzekelo onjalo lucacile kakhuluIsisongeli <div> iphethe iklasi efana pestanas kwaye ngaphakathi kuyo <ul> iqulethwe <li> izinto zethebhu nganye. Into nganye yoluhlu ine-ID eyahlukileyo (efana pestana0, pestana1, pestana2) kunye neklasi yeCSS ebonisa ukuba iyasebenza okanye ayisebenzi. Iithegi ze-anchor ngaphakathi kwezi zinto ziluhlu zibiza umsebenzi weJavaScript owenziwe yiXajax, umzekelo. javascript:void(xajax_cambia_contenido(0)), idlulisela isalathisi sethebhu kwiseva.

Ngaphantsi koluhlu lwethebhu kukho isikhongozeli esizinikeleyo somxholo womzimba wethebhu, rhoqo a <div> enesazisi esifana cuerpopestanasXa umsebenzisi ecofa nakweyiphi na ithebhu, umnxeba we-Ajax ulanda iqhekeza le-HTML elihambelanayo aze alifake kule ndawo yomxholo. Iphepha ngokwalo aliphindi lilayishe kwakhona; yi-HTML yangaphakathi kuphela yesikhongozeli somxholo esitshintshayo.

I-CSS idlala indima ephambili ekwenzeni iithebhu zibukeke kwaye zivakale zisebenzisanaIiklasi ezimbini ezibalulekileyo zinokuchazwa: enye yeethebhu ezingasebenziyo (umzekelo li.pestanainactiva) kunye nenye yethebhu ekhethiweyo (efana li.pestanaseleccionada). Umahluko wesitayile – umbala wangasemva, imida, iindlela zefonti – unika umsebenzisi impendulo ecacileyo malunga nokuba yeyiphi ithebhu esebenzayo. Imithetho eyongezelelweyo inyanzelisa imibala ethile yekhonkco okanye isuse umhombiso wombhalo ukuze iileyibhile zihambelane nobuntu obubonakalayo obufunekayo.

Kwicala leseva, umsebenzi we-PHP ofana cambia_contenido() iququzelela impenduloIfumana i-tab index njengeparameter, yakha i- xajaxResponse object kwaye ijonge umxholo ohambelanayo kuluhlu lweentambo ze-PHP. Emva koko isebenzisa addAssign() ukuhlaziya iphepha: umnxeba omnye useta innerHTML of cuerpopestanas kumbhalo okhethiweyo, omnye utshintsha className yethebhu ecofiweyo kwisitayile "esikhethiweyo", kwaye iluphu iphinda isete iithebhu eziseleyo kwiklasi "engasebenziyo".

Le patheni iguquguquka malunga nokuba umxholo uvela phiEndaweni yokusebenzisa imitya yesicatshulwa eneenkcukacha eziqinileyo kuluhlu, ungaqokelela i-HTML kwiitemplate, utsale iirekhodi kwisiseko sedatha okanye ubhale iifom kunye neewijethi ezisebenzisanayo ngendlela eguquguqukayo. Icala lomthengi alikhathali; lifumana nje uphawu oluhlaziyiweyo ukuze luboniswe kumzimba wethebhu xa umsebenzisi etshintsha iithebhu.

Ukuqalisa kwenziwa ngesicatshulwa esincinci seJavaScriptNgokubiza xajax_cambia_contenido(0) on window.onload, iphepha likhetha ngokuzenzekelayo ithebhu yokuqala kwaye lilayishe umxholo wayo kwangoko nje ukuba i-DOM ilungile. Ngale ndlela, akufuneki ucinezele umxholo womzimba kwi-HTML yokuqala - inkqubo yethebhu iqhutywa ngokupheleleyo yi-Ajax kwasekuqaleni.

Ukuyila ii-tab bar zeselula ngeendlela ezilungileyo

Kwiselula, ibar yethebhu esezantsi yenye yezona zinto zibalulekileyo zokuzulazula, kwaye ifanelwe yingqwalasela ebukhaliI-tab bar exineneyo okanye engahambelaniyo inokuphazamisa abasebenzisi ngokukhawuleza, ingakumbi kwizikrini ezincinci apho i-pixel nganye ibalwa khona.

Esinye sezikhokelo zokuqala kukukhawulela inani lezinto kwibar yethebhu. Jonga ii-icon ezine okanye ezintlanu ubuninzi; ukutyhala ngaphaya koko kunciphisa iithagethi zokuchukumisa kunye neelebhile ukuya kwinqanaba apho kunzima ukuzichukumisa ngokuchanekileyo kwaye kunzima ukuzitolika. Ukuba ufuna ngokwenene ezinye iindlela zokukhangela, cinga ngeemenyu zesibini okanye ezinye iipateni ezifana needrowa.

Ukukhetha i icon kubaluleke ngokulinganayo. I icon nganye kufuneka ibonise ngokucacileyo injongo ephambili yecandelo layo kwaye ibonakale kwangoko. Iileyibhile zombhalo zingasetyenziswa kancinci ukucacisa intsingiselo, kodwa ukuba ii icon zakho zikhethwe kakuhle kwaye zihambelana nemigaqo yeqonga, abasebenzisi baya kuzifunda ngokukhawuleza kwaye baxhomekeke kwimifanekiso kuphela.

Isalathisi sesimo kufuneka singabi nantsingiseloSebenzisa utshintsho lombala, imilo okanye ubungakanani ukuze uqaqambise ithebhu esebenzayo – umzekelo, i-accent enemibala, uhlobo lwe icon olugcweleyo xa kuthelekiswa nomgca, okanye i-subtle size bump. Oku kwenza kucace ukuba loluphi ucandelo umsebenzisi alubukelayo ngoku. Kwangaxeshanye, ngokuqhelekileyo kububulumko ukuphepha iibheji zesaziso okanye ii-number counters ngqo kwi-tab bar, njengoko zinokudala ingxolo ebonakalayo rhoqo kwaye ziphazamise ukuhambahamba.

Ukubeka kunye nokunyamezela kubaluleke kakhulu. Ibar yethebhu kufuneka ihlale ezantsi kwesikrini, ibonakale rhoqo kwaye ifikeleleke ngobhontsi kuzo zombini iindlela zokubonisa umfanekiso kunye nemeko yendawo. Musa ukuyifihla emva kwebhodi yezitshixo, iincoko okanye amaqhosha esenzo ajikelezayo, kwaye uphephe ukuyigquma ngezinye izinto ezinokuthintela ukucofa. Ukugcina ibha izinzile kwakha inkumbulo yemisipha kwaye kugcina ukuhamba kuqikelelwa.

Ukusebenzisa i-Bootstrap, i-Bootbox.js kunye neFont Awesome kwii-UI zewebhu zethebhu

Kwiiprojekthi zewebhu zemveli, iiframeworks ezifana neBootstrap 3 zibonelela ngezinto zethebhu ezingaphandle kwebhokisi ezinokulungiswa kwaye zandiswe ngokulula; bona Uyenza njani iwebhusayithi ukusuka ekuqaleniEsi sixhobo sinye sibonelela ngamaqhosha, iidropdowns, iiphaneli kunye neemodals, okwenza kube lula ukuhlanganisa ii-interfaces ezidibeneyo apho iithebhu zihambelana ngokwemvelo noyilo lonke.

Izinto ze-Bootstrap zokuzulazula ziquka uphawu olusele lwenziwe kunye neeklasi zokwenza imicu yethebhu ethe tyeNgokudibanisa iiklasi ze-nav eziqhelekileyo kunye nezo zikhethekileyo kwithebhu, ungatshintsha phakathi kweepaneli zomxholo ngeJavaScript encinci. Ekubeni zonke izinto zabelana ngenkqubo efanayo yesitayile seBootstrap, iithebhu zakho ziya kuhambelana ngokuzenzekelayo nenkangeleko yeemenyu, iipaneli kunye neefom kuyo yonke indawo.

Ukuze baphathe izilumkiso kunye nokuqinisekiswa ngendlela ehambelana nenkangeleko yeBootstrap, abaphuhlisi abaninzi baxhomekeke kwiBootbox.jsLe layibrari incinci isonga iimodals zesitayile seBootstrap ngee-API zeJavaScript ezilula, ukuze ukwazi ukubonisa iincoko zokuqinisekisa okanye izilumkiso xa abasebenzisi betshintsha iithebhu, bezama ukuvala iimbono ezingagcinwanga okanye bebangela izenzo ezinokubangela umonakalo - konke oku ngaphandle kokwaphula ukuhambelana okubonakalayo okusekwe yisakhelo seCSS.

I-Iconography idla ngokuqhutywa yiFont AwesomeLe seti yeempawu ezininzi idibana kakuhle neBootstrap, ikunika ikhathalogu enkulu yeempawu onokuzisebenzisa ngaphakathi kweelebheli zethebhu okanye kwiindawo zomxholo. Nokuba ufuna ii-icon eziqhelekileyo zasekhaya, useto, imiyalezo kunye neefayile okanye ii-glyphs ezikhethekileyo, iFont Awesome inceda ukunxibelelana ngentsingiselo ngaphandle kokufuna ukuyila imifanekiso eyenzelwe wena ngalo lonke ixesha.

Ngokudibanisa izinto zesakhiwo seBootstrap, iimodal zeBootbox.js kunye nee icon zeFont Awesome, ungakha ii-interfaces ezityebileyo zethebhu ezivakala zicocekile kwaye zihambelana. Iithebhu, izilumkiso kunye nee-icon zonke zabelana ngolwimi loyilo olufanayo, okwenza amava omsebenzisi abonakale enenjongo kunokuba ahlanganiswe ngezinto ezingangqinelaniyo.

Kuyo yonke i-Android, iwebhu, ii-PWA kunye neewebhusayithi eziqhutywa yi-PHP, ii-interfaces ezifakwe kwiithebhu zihlala ziyindlela ethembekileyo yokucwangcisa iimbono ezininzi okanye amaxwebhu kwisakhelo esinye.Nokuba ukhetha iTabLayout yeMaterial Design eneViewPager, iithebhu ezifakwe kwiElementor, imo yesicelo setab yeChromeOS yee-PWA, okanye izisombululo ezenziwe ngokwezifiso usebenzisa iXajax kunye neBootstrap, injongo ephambili iyafana: gcina ukuzulazula kulula, umxholo ufumaneka kwaye utshintsho lomxholo lucacile.