Sisukord:

Riidekapi korraldaja: 13 sammu
Riidekapi korraldaja: 13 sammu

Video: Riidekapi korraldaja: 13 sammu

Video: Riidekapi korraldaja: 13 sammu
Video: 40 полезных автотоваров с Aliexpress, которые упростят жизнь любому автовладельцу #6 2024, November
Anonim
Riidekapi korraldaja
Riidekapi korraldaja

Olenemata sellest, kas ostate riideid või palute alati laenata mis tahes esemeid, on aeg, mil soovite oma kappi kõikjalt piiluda, et näha, kas teil on midagi sarnast. Riidekapi korraldaja teeb just seda ja veel!

See on ühest kohast lähtuv ja laiaulatuslik paljudel muudel eesmärkidel. Minu riidekapi korraldaja on kombinatsioon Google'i arvutustabelitest kui SQL -andmebaasist, andmete töötlemiseks mõeldud Google'i skriptidest ja nende andmete veebiportaali jaoks mõeldud Google WebAppist. Lõppkasutaja saab näha kõiki esemeid, filtreerida midagi konkreetset, märkida esemed laenuks, hallata oma pesu ja takistada emal ostmast teile jõuludeks igal aastal ühte särki*.

(*Garantii puudub. Emad ostavad seda, mida nad tahavad, olenemata sellest, kas seda vajate või mitte)

Kui heita kiire pilk ülaltoodud pildil olevale veebisaidi kujundusele, võib ära tunda tuttava paigutuse. Riidekapi korraldaja on üles seatud nagu iga tavaline rõivaste veebisait. See liides, mis on jaotatud üleval asuvate osakondade ja kõrval asuvate filtrite järgi, tutvustab juhukasutajale funktsionaalsust. JA seda on lihtne kasutada.

Samm: oma koopia seadistamine

Oma koopia seadistamine
Oma koopia seadistamine

Alustuseks loome sellest projektist oma koopia.

Google Drive

Selle rakenduse praeguse versiooni avamiseks klõpsake ülaltoodud linki.

Selles kaustas näete 3 üksust: Google'i vorm, Google'i leht ja kaust.

Paremklõpsake Google'i lehel ja klõpsake nuppu Tee koopia.

Määrake selle koopia asukohaks oma Drive.

Pärast selle dokumendi kopeerimist genereeritakse Google'i vorm automaatselt samasse kausta, kuhu teisaldasite Google'i lehe.

Kausta loomiseks (see on vajalik üksuste piltide üleslaadimiste kogumiseks) klõpsake kopeeritud Google'i vormil ja kuvatakse viip, mis palub teil üleslaadimiseks kausta asukoha taastada.

Teil on nüüd selle dokumendi koopia, millega saate ise töötada!

2. toiming: Google'i vormi ülevaade

Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade
Google'i vormi ülevaade

Nüüd, kui teil on selle rakenduse oma versioon, vaatame ringi.

Teie Google'i vorm on seadistatud mitut tüüpi üksuste vastuvõtmiseks. Särkidel, pükstel, kleididel ja kingadel on aga erinevad suurusepiirangud. Seetõttu täidetakse selle vormi teine jaotis selle osakonna alusel, kuhu te oma kauba esitate. Oma (meessoost artikli) mallis olen loonud 5 erinevat suuruskategooriat. (Naisteartiklite jaoks klõpsake siin, neid on palju rohkem).

Iga suuruse jaotise alla panin iga kogutava parameetri jaoks ainulaadse pealkirja. Me ei taha, et meie andmebaasis oleks mitu veergu nimega "Suurus" või me ei saaks kindlaks teha, millist tüüpi riideid see suurus puudutab.

Iga jaotise lõpus suunatakse kasutaja selle vormi viimasele osale: asukoht. Mina isiklikult otsustasin lisada asukoha, et määrata esemed keemilises puhastuses, pesumajas, nende asemel või need esemed, milles olen lasknud sõbral laenata. See võimaldab mul olla organiseeritud ja mitte kunagi tunda, et mul oleks kusagilt mõni riideese puudu.

Nagu ma algusest peale mainisin, saab seda projekti laiendada miljonil erineval viisil. Saate seda kasutada inventuuri jaoks, täpsemaks korraldusvahendiks või riiete rangeks laenamiseks. Välju ja jaotisi, mida saate lisada, on lõputult, nii et ärge piirduge sellega, mis on minu vormis. (Naiste artiklite saamiseks klõpsake siin)

Enne mõne enda üksuse üleslaadimist liigume järgmise sammu juurde, et tagada nõuetekohane esitamine.

3. samm: Google'i skriptid: (Server Code.gs) Esmalt vaadake andmeid ja koodi

Google Scripts: (Server Code.gs) Esmalt vaadake andmeid ja koodi
Google Scripts: (Server Code.gs) Esmalt vaadake andmeid ja koodi
Google Scripts: (Server Code.gs) Esmalt vaadake andmeid ja koodi
Google Scripts: (Server Code.gs) Esmalt vaadake andmeid ja koodi

Google'i arvutustabelite dokumendile klõpsates näete palju andmete veerge (ja mõned read, mis jäetakse tutvustamiseks). Vormi esitamise ajal jäetakse mõned jaotised vahele, see ilmneb mõnede veergude puuduvate andmete põhjal. Kuid nende üksuste muudatuste paremaks jälgimiseks on lisatud täiendavaid veerge, nagu ID, Vaikimisi asukoht, Kes ja Värskendatud.

Vormi esitamisel on loodud ID -väli, mis võimaldab selle andmebaasi läbimisel kordumatut identifikaatorit. Selle välja loomiseks vaatame Script Editori, klõpsates Tools> Script Editor.

Kui skriptiredaktor on avatud, märkate selle uue akna külgribal 8 dokumenti. Need dokumendid aitavad juhtida taustaprotsessi, esipaneeli ekraane ja kasutajaliidese funktsioone. Me hüppame igasse (kui jääte ringi), kuid klõpsame praegu serveri koodil.

Failis Server Code.gs on palju funktsioone:

onSubmit (e), onOpen (), doGet (), include (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - see funktsioon konfigureeritakse esimese funktsioonina, mis käivitatakse Google'i vormi esitamisel. Selle funktsiooni sisse saate paigutada muid funktsioone, et võimaldada paljude erinevate protsesside toimumist.

onOpen (e) - seda funktsiooni kutsutakse esile Google'i arvutustabelite avamisel. See täidab uue menüüvaliku, mis võimaldab kiiret juurdepääsu rakenduste linkidele ja vaadetele.

doGet ()- seda funktsiooni kutsutakse veebirakenduse aadressikõnes. Kui kasutaja sirvib avaldatud veebirakendust, ütleb see kood sellele lehele, mida kuvada. Sel juhul on see dokument Application.html.

include (failinimi) - seda funktsiooni kasutatakse HTML -lehtede sees, et lugeda teist dokumenti ja sisestada nende sisu teisele lehele sobivasse HTML -vormingusse. Me kasutame seda oma CSS.html ja JS.html failide jaoks.

openApplication () ja openLaundryApp () - need funktsioonid sisaldavad koodi, mida tuleb käivitada, kui kasutaja klõpsab Google'i lehe tööriistaribale lisatud menüünuppudel.

changeValueOnSubmit (e) ja setIDOnSubmit (e)- need on funktsioonid, mida me praegu uurime. Nad vastutavad vormi esialgsel esitamisel teatud väljade värskendamise eest vaikimisi.

Samm: lubage OnFormSubmit

OnFormSubmit lubamine
OnFormSubmit lubamine
OnFormSubmit lubamine
OnFormSubmit lubamine
OnFormSubmit lubamine
OnFormSubmit lubamine

Need kaks funktsiooni - changeValueOnSubmit (e) ja setIDOnSubmit (e) - peavad olema seotud vormi esitamise kasutajatoiminguga. Selleks peame lubama käivitaja.

Lubame päästiku, klõpsates nuppu Redigeeri> Praeguse projekti käivitajad. See avab Google'i arendajakeskuse.

Päästiku armatuurlaua paremas alanurgas on nupp Lisa päästik. Kliki siia.

Nüüd seadistame funktsiooni, mis käivitub vormi esitamisel. Meie puhul on mul mitu funktsiooni (changeValueOnSubmit (e) ja setIDOnSubmit (e)), mille panen funktsiooni onSubmit () sisse, nii et pean seadistama ainult 1 päästiku. Seepärast valime onSubmit () ja seadistame selle käivitaja vormi Esita käivitamiseks.

Meil on nüüd töövorm, mis täidab Google'i lehe unikaalsete identifikaatoritega ja määrab vaikeväärtused.

Nüüd saate oma üksusi Google'i vormi abil üles laadida. (Seda pole vaja jätkata, kuna demoväärtused on juba olemas). Nüüd sukeldume kasutajaliidesesse.

Samm: kasutajaliidese seadistamine

Kasutajaliidese seadistamine
Kasutajaliidese seadistamine
Kasutajaliidese seadistamine
Kasutajaliidese seadistamine
Kasutajaliidese seadistamine
Kasutajaliidese seadistamine

TERE TULEMAST! Oleme lõpuks jõudnud selle osani, mille pärast tulite, kasutajaliideseni !!!!

Esmapilgul pole siin midagi. Me pole veel helistanud. Lehe kiiremaks laadimiseks otsustasin mitte katkestada esimest lehte KÕIKI teie üksustega ja lubada teil klõpsata sellel, mida soovite kiiremini näha. Kuna see nii on, pole põhisisuväljal üksusi ega külgribal filtreid. Klõpsake nuppu Kõik, et näha, mis on meie andmebaasis.

Oleme nüüd iga andmebaasi üksuse põhisisu väljale laadinud. Näete pilte, ID -numbreid, värve, suurusi ja asukohti. Asukohavälja saab värskendada siin! Kui otsustate eseme laenata, saate selle valiku valida, võite selle paigutada kappi, kummutisse või pesupesemisse.

Ja meie külgribal on meie uue päringu iga rõivaeseme jaoks kõik võimalikud väljad. Kujutage vaid ette, et sellel külgribal on 20 erinevat suurusevalikut, see poleks eriti tõhus, seega kitsendame otsingut, klõpsates valikul Aksessuaarid.

Nüüd, kui oleme lisaseadmed laadinud, vaadake külgriba. See on kohandatud ainult 3 väljale, kuna need parameetrid kehtivad selle päringu iga üksuse kohta. Hakkan sorteerima värvi järgi. Värvi klõpsates ilmub rippmenüü. Siin saan kas soovitud värvi sisestada ja seejärel selle valida või kui näen oma valikut kohe, siis lihtsalt klõpsan sellel. Valisin selle demonstratsiooni jaoks punase. Klõpsake selle külgriba allosas nuppu Rakenda filter ja põhisisu värskendatakse, näidates teile üksusi, mille värviparameetriks on määratud punane värv.

Ma varem mainisin, et see andmebaas aitab mul hallata oma esemeid laenul ja pesupesemises. Selle lihtsustamiseks lõin selle avalehe igale rippmenüüle käsitsi klõpsamise asemel pesurežiimi. Naaske Google'i lehe lehele ja rakendusvaate all näete pesupesemisrežiimi. See valik avab väiksema modaali, mis näitab ainult pesu asukohaga esemeid. Võin nüüd kõik need üksused vaikimisi märkida, mis asetab need tagasi oma asukohta, kuhu nad tavaliselt salvestatakse.

Samm: projekt on lõpule viidud

Projekt valmis!
Projekt valmis!

PALJU ÕNNE

Neile, kes soovivad teie esemete haldamiseks lihtsalt toimivat andmebaasi, tere tulemast oma veebikorraldajasse. Neile uudishimulikele, kes on huvitatud selle rakenduse taga olevast koodist. Püsige ringi, kui ma selle lagunen.

*Te võite vabalt testüksused kustutada pärast seda, kui olete vähemalt ühe oma üksuse andmebaasi sisestanud. (Kui seletate, selgitan hiljem).

8. samm: 1. samm: tagakülg (serverikood.gs)

1. samm: tagakülg (serverikood.gs)
1. samm: tagakülg (serverikood.gs)
1. samm: tagakülg (serverikood.gs)
1. samm: tagakülg (serverikood.gs)

Varem avasime faili Server Code.gs ja andsin kõik funktsioonid kiiresti alla, kuna nende eesmärk oli teenida kõiki äsja seadistatud üksusi, kuid nüüd lagundame need mõned funktsioonid ja utiliidid, mida nimetatakse selle koodi edukaks muutmiseks.

1) Laua läbimine:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Vormi vastused 1"); var vahemik = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = vahemik.getLastRow ();

  • See kood on aluseks Google'i arvutustabeli läbimiseks. Ma kutsun lehte pigem nime kui numbri järgi, nii et kui lehed kustutatakse või funktsioonide järgi ümber korraldatakse, saaksid need ikkagi korralikult töötada.
  • Selles koodis kogun kõigi tabelis olevate andmete vahemikku.

2) ID määramine:

var LastID = vahemik.getCell (ridaNum-1, 1); var CellValue = arv (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

  • Palusin varem demoväärtused tabelisse jätta, kuni kasutaja on vähemalt ühe väärtuse enda jaoks esitanud. Selle põhjuseks on asjaolu, et automaatse ID generaator tugineb andmebaasi viimasele väärtusele.
  • Toon viimase 2. kuni viimase rea, kuna viimane rida on meie uus väärtus ja ID -väärtuse 1. veerg.
  • Seejärel genereerin juhuslikult arvu vahemikus 5 kuni 15 ja lisan selle viimasele väärtusele. *
  • Lõpuks panen selle väärtuse viimase rea ID veergu.
  • Järgmisena kutsume funktsiooni changeValueOnSubmit (e).

* Valisin 5-15, et võimaldada tulevikus märgistamist ja Google Home'i integreerimist, et numbrid ei oleks piisavalt lähedal, et tekitada segadust riidepuudel, riiete siltidel või vöötkoodidel.

3) URL -i väärtuse muutmine:

var DataChange = e.namedValues ["Üksuse pilt"]; var DefaultLocation = e.namedValues ["Kus sa seda riideeset hoiad?"]; var ColD = Veeru ID _ ("Kauba pilt") +1; var ColLoc = Veeru ID _ ("Vaikimisi asukoht")+1; DataChange = DataChange.toString (). asendada ("avatud?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

  • Kui esitate foto Google'i vormi kaudu, on Google'i arvutustabelitesse lisatud URL link dokumendile. Meie puhul, kui loome HTML -i lehte, tahame, et link oleks ainult pilt.
  • Muutes "avatud?" osa URL -ist "uc? export = view &", oleme selle asemel loonud pildile lingi.
  • Asetame selle uue väärtuse uuesti praeguse üksuse pildi lingi asukohta.
  • Samuti määran andmebaasis üksuse "Vaikimisi asukoht" ja "Praegune asukoht" sama asja. See aitab, kui proovite kasutada oma pesupesemisrežiimi.
  • Me sukeldume sellele järgmisel lehel, kuid see on meie esimene pilk minu loodud funktsioonile ColumnID_ ().

    See funktsioon kasutab veerunimesid selle teisendamiseks veergude täisarvuks, mis on kasulik vahemikukutsumiseks, mis nõuab veeru numbrit, mitte nime

4] SpreadsheetApp.getUI ()

  • Teisel pildil näete rakenduse SpreadsheetApp.getUI () kasutamist sellisena, nagu seda kasutati tööriistariba menüü lisamiseks Google'i lehele.
  • Funktsioon.getUI () aitab luua ka modaalse hüpikakna, mida kasutatakse pesupesemisrežiimis ja kiirlingina veebisaidi liidesele.

5) HTMLService

  • Selles koodis kasutatakse kahte tüüpi HTML -teenuseid: mall ja HTMLOutput
  • Mall võimaldab HTML -koodi sisse sisestada koodi, nii et lehelt helistades saab serverist pärinevat teavet täita.
  • HTML -väljund kuvab lihtsaid HTML -lehti.
  • Meil on ka meetod include (), mis võimaldab meil luua mitu HTML -faili ja ühendada need üheks malliks HTML -failina, tagastades faili sisu mitte HTML -vormingus kui stringina.

Lisasin dokumendi, mis on koostatud nagu Google App Scripts Documentation, et tutvuda lähtekoodi ja funktsionaalsuse selgitamisega Google Appsis.

9. samm: 2. samm: tagavarakoodi 2. osa (serverikutsed.gs)

2. samm: tagavarakoodi 2. osa (serverikutsed.gs)
2. samm: tagavarakoodi 2. osa (serverikutsed.gs)
2. samm: tagavarakoodi 2. osa (serverikutsed.gs)
2. samm: tagavarakoodi 2. osa (serverikutsed.gs)
2. etapp: tagavarakoodi 2. osa (serverikutsed.gs)
2. etapp: tagavarakoodi 2. osa (serverikutsed.gs)

Nüüd oleme sisestanud serveri kõned. Neid funktsioone kasutatakse peamiselt HTML -i JavaScriptis, nii et need on eraldatud koodist, mida kasutatakse peamiselt serveri Code.gs -i tagaosas.

Pilt 1) Globaalsed muutujad:

Pilt 2) üksuste toomine:

Pilt 3) fetchItemsQry

Pilt 4) filterElemendid

Pilt 5) fetchFiltersWithQry

Pilt 6) ColumnID ja CacheCalls

Igaühega on nii palju rääkida. Ja koodi lõhkumiseks ja toimuva selgitamiseks vajasin natuke rohkem trükkimisruumi. Lisatud on dokument ServerCalls.gs koodijaotuse kohta

See dokument on seadistatud nagu Google'i rakendusskriptide dokumentatsioon ja teeb isegi linke sarnastele objektidele.

10. samm: 3. samm: HTML -kood (Application.html)

3. toiming: HTML -kood (Application.html)
3. toiming: HTML -kood (Application.html)
3. toiming: HTML -kood (Application.html)
3. toiming: HTML -kood (Application.html)
3. toiming: HTML -kood (Application.html)
3. toiming: HTML -kood (Application.html)

HTML -kood muutub Instructable'i dialoogiboksis väga õnnetuks. Nii et palun järgige ülaltoodud pilte.

1) Lehe Application.html päises loome pealkirja ja helistame oma CSS.html lehe laadimiseks.

*Olles malli HTML -leht, saame sellele dokumendile lisada rohkem koodi ilma praegust ekraani segamata, kasutades eelnevalt mainitud meetodit include (pageName), mis on leitud serverikoodist.gs

Sellel pildil on ka peamine päisekast. Siin saate muuta päist ja sisestada "[Teie nimi] riidekapp" või mis iganes muu, mida soovite selle lehe ära tunda.

2) Päise all on meie ülemine navigeerimisriba.

See navigeerimisriba sisaldab kõiki artiklitüüpe, mis on loetletud meie Google'i arvutustabelite artiklite lehel.

Nende üksuste massiivi toomiseks kutsutakse sisse tekstfunktsioon. Seejärel käivitatakse tsükkel, mis hõlmab kõiki neid suvandeid menüünupuna koos tegevuskoodiga, nii et kui kasutaja klõpsab menüünupul, kuvatakse vastavad üksused kehapiirkonnas.

3) Põhiosa.

Selles osas on 4 portsjonit. Tekstiväljund, külgriba filter, põhiosa pildid ja JS sisaldab.

Tekstiväljund võimaldab kasutajal näha kiiret tekstivaadet selle kohta, millist tüüpi objekte nad parajasti vaatavad, selle asemel, et viidata valitud menüüvalikule.

Külgriba filter sisaldab palju filtreid, mis on saadaval kasutaja valitud üksuse tüübi jaoks. Need filtrid kajastavad kõiki selle kategooria jaoks saadaolevaid valikuid ja ka seda, kui palju üksusi selle kategooria väärtuse alla kuulub. Sellel külgribal on JavaScripti kood (mida arutatakse järgnevalt).

Põhiosa on praegu tühi, kuid sarnaselt filtritega täidetakse see ka üksuste kastidega, mis kirjeldavad üksuse ID -d, värvi, suurust ja asukohta koos pildiga, kui kasutaja on kategooria valinud ja JavaScripti kood selle ala täidab.

Lõpuks kaasab (JS), vaatame seda järgmisel sammul.

11. samm: 4. samm: JavaScripti kood (JS.html)

4. samm: JavaScripti kood (JS.html)
4. samm: JavaScripti kood (JS.html)

Kui arvasite, et serverikood on raske osa, laadige see üles.

Siin ühendame oma HTML -i ja SeverCode'i kasutaja interaktsioonidega. Kõik klõpsatud üksused tuleb siin töödelda, et saada õiged andmed ja tagastada need loetavas vormingus. Vaatame siis meie esimesi kõnesid:

Skript kutsub: kasutan selle projekti jaoks 3 erinevat raamatukogu; jquery, bootstrap ja spetsiaalne bootstrap-select lisandmoodul. Need teegid võimaldavad vormindada objekte ja hõlbustada helistamist HTML -koodi elementidele.

Minu järgmine oluline JavaScripti rida on allpool:

$ (dokument). keypress (funktsioon (sündmus) {if (event.which == '13') {event.preventDefault (); }});

Siin keelan sisestusklahvi mis tahes vormide käivitamisel. Nagu sel juhul, määratakse Google'i veebirakendustele ainult nende ühe lehe aadress. Sisestusklahv lisab andmed HTML -aadressile ja proovib kasutajat ümber suunata. Selle keelamisega lubate JavaScripti koodil kogu töö teha.

function removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

funktsiooni updateDBlocation (id, väärtus) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, väärtus); }

Siin on kaks funktsiooni, mis helistavad failile Server Code.gs. Rida:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

sellel on palju töötavat osa, kuid skelett on juurdunud failist "google.script.run", mis ütleb HTML -lehele, et järgmine funktsioon on serveris.

  • Selle koodi viimane bitt on käivitatav funktsioon. Selles näites ServerRemoveFilter ()
  • Kui lisate koos withSuccessHandler (), teab HTML -leht nüüd, mida tagastatavate andmetega peale hakata, ja käivitab funktsiooni sulgudega.
  • Sama kehtib ka withFailureHandler () kohta

Nüüd, kui oleme serverikoodi kõne jaotanud, vaatame kiirelt, mis juhtub, kui need serverikõned õnnestuvad ja ebaõnnestuvad.

function allGood (e) {console.log ("Edu serveris"); } funktsioon onFailure (viga) {$ ("#message-box"). html ("

Praegu ei saa rõivaesemeid tuua. VIGA: " + error.message +"

");} funktsioon FailDBUpdate (viga) {$ ("#message-box "). html ("

Teil pole juurdepääsu asukoha muutmiseks. VIGA: " + error.message +"

"); $ (". location-selects "). prop ('keelatud', 'keelatud');}

Lõin väga lihtsa konsooli logi, mis näitab edu asukohafunktsiooni käivitamisel, mida näete allGood ().

Vigade käsitlemisel väljastavad need kaks funktsiooni veateate, kus kasutaja saab näha, kasutades jQuery-kõnet HTML-objektile, mille ID on "sõnumikast".

Nüüd asume rumala töö juurde

12. samm: 5. samm: JavaScripti koodiklikkide toimingud (JS.html)

5. toiming: JavaScripti koodiklikkide toimingud (JS.html)
5. toiming: JavaScripti koodiklikkide toimingud (JS.html)
5. toiming: JavaScripti koodiklikkide toimingud (JS.html)
5. toiming: JavaScripti koodiklikkide toimingud (JS.html)
5. toiming: JavaScripti koodiklikkide toimingud (JS.html)
5. toiming: JavaScripti koodiklikkide toimingud (JS.html)

Ülemises menüüribas on valikuid iga artiklitüübi jaoks. Funktsioon, mida nad klõpsamisel käivitavad, on järgmine:

funktsiooni filterTüüp (artikkel, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktiivne"); $ ("#currentArticle"). html ("// HTML -KOOD SIIN");

updateSideBar = tõsi;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Artiklid", artikkel); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktiivne"); $ ("#myNavbar"). removeClass ("in"); }

Selles koodis näeme, et meil on google.script.run, mis kutsub serverit teavet hankima. Selle kõne edukas funktsioon on updateItems ().

PILT 1 (selle funktsiooni raske HTML -koodiga on raske koodi rangelt kopeerida, ilma et sellesse kasti ilmuks)

Koodis updateItems () juhtub palju asju. Taaskord peame läbima meile tagastatud objekti ja lisama iga üksuse oma põhilehele.

HTML -kood lisatakse massiividena, et kood lõhkuda ja hõlpsamini lugeda ning näha, kuhu itemData sisestatakse.

Iga üksuse silmusest eemaldan väljad, mida ma kirjelduses näha ei taha, näiteks vaikimisi, ajatempel ja pildi URL. Eemaldan pildi URL -i kirjeldusest, kuna see lisatakse selle asemel märgendile hrefina. Kui see teave on kokku pandud, saadetakse see jQuery.append () funktsiooni abil põhiosasse.

Kui kõik üksused on lehele lisatud, saadetakse see üksuste päring uuesti serverikoodi, et sortida ja tagastada filtrivalikud, nagu on näidatud pildil 2.

PILT 2 (külgriba värskendamine)

Funktsiooniga updateItems () väga sarnane, meil on taas HTML -koodimassiivid ja silmus kõigi filtrivalikute jaoks. Ainus märgatav muutus on jQuery.selectpicker ('refresh'). See funktsioon pärineb viimases etapis kaasatud skriptiteegist. See võimaldab programmeerijal kirjutada lihtsa valitud HTML -i ja lasta raamatukogul seda värskendada, et see hõlmaks otsitavat funktsiooni ja CSS -koodi.

PILT 3 (filtreerimine külgriba abil)

Lõpuks on meil funktsioon updateFilter (formData). Seda kasutatakse siis, kui vorm esitatakse külgribalt. Alustuseks kasutame funktsiooni jQuery.serializeArray (), mis loeb meie puhul vormi määratletud elemendi HTML -koodi ja tagastab serverisse saadetava stringi väärtused. Ja alustame protsessi uuesti pildilt 1.

Samm 13: lõpp… Lõpuks

Lõpp …. lõpuks
Lõpp …. lõpuks
Lõpp …. lõpuks
Lõpp …. lõpuks

Noh, teil on see; täielik ja põhjalik selgitus, mis aitab teil seadistada oma veebikapi või kasutada minu Google'i skriptides loodud funktsioone oma projekti laiendamiseks.

See on olnud selle projekti kodeerimine (ja selle juhendi kaudu dokumenteerimine), kuid mulle on see protsess meeldinud ja loodan, et teile meeldib toode. Tahaksin kuulda kõiki, kes teevad kohandusi, nagu Michael Jordan ütleb: "Lagi on katus" ja olen nõus, et sellel rakendusel pole piire.

Soovitan: