INHOUDSOPGAWE:

Klerekasorganiseerder: 13 stappe
Klerekasorganiseerder: 13 stappe

Video: Klerekasorganiseerder: 13 stappe

Video: Klerekasorganiseerder: 13 stappe
Video: Организуй вместе со мной!🧺 Гардероб в прихожей | Простая уборка домашнего шкафа, идеи организации 2024, Junie
Anonim
Klerekas Organiseerder
Klerekas Organiseerder

Of dit nou gaan om klere koop of altyd gevra word om enige item te leen, daar is tye wat u wens dat u oral in u kas kan kyk om te sien of u iets soortgelyks het.

Dit is 'n eenstopwinkel en is uitgebreid vir baie ander doeleindes. My Wardrobe Organizer is 'n kombinasie van Google Sheets as 'n SQL -databasis, Google Scripts vir die hantering van die data en Google WebApp vir 'n aanlynportaal vir hierdie data. Die eindgebruiker kan al die items sien, vir iets spesifiek filter, items as uitgeleen merk, hul wasgoed bestuur en keer dat ma elke jaar dieselfde hemp vir Kersfees vir jou koop*.

(*Geen waarborg nie. Moeders koop wat hulle wil, of u dit nodig het of nie)

As u vinnig kyk na die webwerf -ontwerp in die prent hierbo, herken u miskien 'n bekende uitleg. Die klerekasorganiseerder is opgestel soos enige gewone kledingwebwerf. Hierdie koppelvlak is opgebreek deur afdelings en filters aan die kant, en maak kennis met funksionaliteit aan die informele gebruiker. EN dit is eenvoudig om te gebruik.

Stap 1: Stel u eie kopie op

Stel u eie kopie op
Stel u eie kopie op

Kom ons begin deur u eie kopie van hierdie projek te skep.

Google Drive

Klik op die bogenoemde skakel om u na my huidige weergawe van hierdie toepassing te neem.

U sal drie items in hierdie vouer sien: 'n Google -vorm, 'n Google -blad en 'n gids.

Klik met die rechtermuisknop op die Google -blad en klik op Maak 'n kopie.

Stel die ligging van hierdie kopie op u eie Drive.

Nadat u hierdie dokument gekopieer het, word die Google -vorm outomaties gegenereer in dieselfde gids waarin u die Google -blad geskuif het.

Om die gids te skep (dit is nodig om oplaai van die itemfoto's te versamel), klik op die gekopieerde Google -vorm en 'n boodskap verskyn waarin u gevra word om die lêergids vir oplaaie te herstel.

U het nou 'n afskrif van hierdie dokument om self aan te werk!

Stap 2: Google -vormoorsig

Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm
Oorsig van Google -vorm

Noudat u u eie weergawe van hierdie toepassing het, kom ons kyk rond.

U Google -vorm is ingestel om baie verskillende soorte items te aanvaar. Hemde, broeke, rokke en skoene het egter verskillende groottebeperkings. Daarom sal 'n ander gedeelte van hierdie vorm ingevul word, gebaseer op die afdeling waarin u u item indien. In my sjabloon (manlike artikel) het ek 5 verskillende grootte kategorieë geskep. (Vir damesartikels, klik hier, daar is nog vele meer).

Onder elke grootteafdeling het ek 'n unieke titel vir elke parameter wat ek gaan versamel, vasgestel. Ons wil nie meer kolomme in die databasis hê met die naam "Size" nie, anders kan ons nie bepaal watter tipe klere die grootte van toepassing is nie.

Aan die einde van elke afdeling word die gebruiker na die laaste gedeelte van hierdie vorm verwys: Ligging. Ek het persoonlik gekies om Location by te voeg om items by die droogskoonmakers, in die wasgoed, op hul plek of die items waarin ek 'n vriend laat leen, te bepaal. Dit laat my toe om georganiseerd te wees en voel nooit dat ek êrens 'n kledingstuk mis nie.

Soos ek van die begin af genoem het, kan hierdie projek op 'n miljoen verskillende maniere uitgebrei word. U kan dit gebruik vir voorraad, 'n meer presiese organisasiehulpmiddel of om streng klere te leen. Die velde en gedeeltes wat u kan byvoeg, is eindeloos, dus voel nie beperk tot wat in my vorm is nie. (Klik hier vir die damesartikels)

Voordat u 'n paar van u eie items gaan oplaai, gaan ons na die volgende stap om te verseker dat dit behoorlik ingedien word.

Stap 3: Google Scripts: (Server Code.gs) Kyk eers na die data en kode

Google Scripts: (Server Code.gs) Kyk eers na die data en kode
Google Scripts: (Server Code.gs) Kyk eers na die data en kode
Google Scripts: (Server Code.gs) Kyk eers na die data en kode
Google Scripts: (Server Code.gs) Kyk eers na die data en kode

As u in die Google Sheets -dokument klik, sien u baie gegewenskolomme (en 'n paar rye vir demonstrasie). Tydens die indiening van vorms word sommige gedeeltes oorgeslaan, dit blyk uit die ontbrekende data in sommige kolomme. Maar bykomende kolomme soos ID, standaardlokasie, wie en opgedateer is bygevoeg om die wysigings van hierdie items beter op te spoor.

'N ID -veld is geskep toe u die vorm ingedien het om 'n unieke identifiseerder toe te laat wanneer u hierdie databasis deurkruis. Om hierdie veld te skep, kyk ons na die Script Editor deur op Tools> Script Editor te klik.

As die Script Editor oop is, sien u 8 dokumente in die sidebar van hierdie nuwe venster. Hierdie dokumente help om die agterkantproses, front-end-skerms en front-end-funksies te beheer. Ons spring in elkeen (as u bybly), maar klik nou op Server Code.

In die Server Code.gs -lêer is daar baie funksies:

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

onSubmit (e) - Hierdie funksie word gekonfigureer as die eerste funksie wat uitgevoer word wanneer 'n Google -vorm ingedien word. U kan ander funksies in hierdie funksie plaas sodat baie verskillende prosesse kan plaasvind.

onOpen (e) - Hierdie funksie word genoem wanneer Google Blaaie oopgemaak word. Dit bevat 'n nuwe kieslysopsie om vinnige toegang tot die toepassingsskakels en aansigte moontlik te maak.

doGet ()- Hierdie funksie word tydens die oproep van die webprogram aangespreek. As 'n gebruiker na die gepubliseerde webprogram blaai, sal hierdie kode vir die bladsy vertel wat hy moet vertoon. In hierdie geval is dit die dokument Application.html.

include (fileName) - Hierdie funksie word binne -in HTML -bladsye gebruik om ander dokumente te lees en die inhoud daarvan in 'n behoorlike HTML -formaat binne 'n ander bladsy in te voeg. Ons gebruik dit vir ons CSS.html- en JS.html -lêers.

openApplication () en openLaundryApp () - Hierdie funksies bevat die kode om uit te voer wanneer 'n gebruiker op die spyskaarte knoppies klik wat by die Google Sheet -werkbalk gevoeg is.

changeValueOnSubmit (e) en setIDOnSubmit (e)- Dit is die funksies wat ons nou sal ondersoek. Hulle is verantwoordelik vir die opdatering van sekere velde met standaardwaardes wanneer die vorm aanvanklik ingedien word.

Stap 4: Aktiveer OnFormSubmit

Aktiveer OnFormSubmit
Aktiveer OnFormSubmit
Aktiveer OnFormSubmit
Aktiveer OnFormSubmit
Aktiveer OnFormSubmit
Aktiveer OnFormSubmit

Hierdie twee funksies, changeValueOnSubmit (e) en setIDOnSubmit (e), moet verbind word met die gebruikersaksie om 'n vorm in te dien. Om dit te kan doen, moet ons 'n sneller aktiveer.

Ons aktiveer die sneller deur op Redigeer> Huidige projek se snellers te klik. Dit maak die Google Developer Hub oop.

In die onderste regterkantste hoek van die snellerpaneelbord is 'n knoppie Voeg 'n sneller by. Klik hier.

Ons sal nou die funksie instel om te werk wanneer 'n vorm ingedien word. In ons geval het ek verskeie funksies (changeValueOnSubmit (e) en setIDOnSubmit (e)) wat ek binne -in 'n onSubmit () -funksie plaas, sodat ek slegs 1 sneller moet instel. Daarom sal ons onSubmit () kies en hierdie sneller stel om die vorm in te stuur.

Ons het nou 'n werkvorm wat 'n Google -blad met unieke identifiseerders sal vul en standaardwaardes stel.

U kan nou u eie items met die Google -vorm oplaai. (Dit is nie nodig om voort te gaan nie, aangesien daar reeds demo -waardes is). Ons duik nou in die gebruikerskoppelvlak.

Stap 5: Die opstel van die gebruikerskoppelvlak

Die opstel van die gebruikerskoppelvlak
Die opstel van die gebruikerskoppelvlak
Die opstel van die gebruikerskoppelvlak
Die opstel van die gebruikerskoppelvlak
Die opstel van die gebruikerskoppelvlak
Die opstel van die gebruikerskoppelvlak

WELKOM! Ons het uiteindelik die deel bereik waarvoor u gekom het, die gebruikerskoppelvlak !!!!

Met die eerste oogopslag is hier niks. Ons het nog nie gebel nie. Om die bladsy vinniger te laai, het ek besluit om nie die eerste bladsy met al u items te teister nie en u te laat klik op wat u vinniger wil sien. Aangesien dit die geval is, is daar geen items in die hoofinhoudsveld nie en geen filters in die sybalk nie. Kom ons klik op Alles om te sien wat in ons databasis is.

Ons het nou elke item in ons databasis in die hoofinhoudveld gelaai. U sal prente, ID -nommers, kleur, groottes en liggings sien. Die liggingsveld kan hier opgedateer word! As u besluit om die item uit te leen, kan u die opsie kies, maar u kan dit in u kas, opbergkas of wasgoed plaas.

En in ons sidebar het ons elke moontlike veld vir elke kledingstuk in ons nuwe navraag. Stel u voor dat daar 20 verskillende grootte -opsies op hierdie sidebar is; dit sou nie baie effektief wees nie, so laat ons ons soektog beperk deur op Accessories te klik.

Noudat ons bykomstighede gelaai het, kyk na die sybalk. Dit is aangepas na slegs 3 velde, aangesien dit die parameters is wat van toepassing is op elke item in hierdie navraag. Ek gaan 'n soort volgens kleur doen. Deur op die kleur te klik, verskyn 'n keuselys. Hier kan ek die gewenste kleur invoer en dit dan kies, of as ek my opsie dadelik sien, klik ek net daarop. Ek het Rooi gekies vir hierdie demonstrasie. Klik onder op hierdie sidebar op filter toepas, en die hoofinhoud word opgedateer om die items met die kleur rooi as hul kleurparameter te wys.

Ek het vroeër genoem dat hierdie databasis my help om my items uit te leen en in my wasgoed te bestuur. Om dit 'n bietjie makliker te maak, het ek die wasmodus in plaas daarvan om met die hand op elke aftrekplek op hierdie hoofblad te klik. Keer terug na die Google Sheet -bladsy en onder App View sien u die wasgoedmodus. Hierdie opsie trek 'n kleiner model op wat slegs items met die ligging van die wasgoed wys. Ek kan nou al hierdie items as standaard merk, wat dit op hul plekke sal plaas waar hulle gewoonlik gestoor word.

Stap 7: Projek voltooi

Projek voltooi!
Projek voltooi!

GELUK

Vir diegene wat net 'n werkende databasis wil hê om u items te bestuur, welkom by u aanlynorganiseerder. Vir die nuuskierige geeste wat belangstel in die kode agter hierdie aansoek. Hou vas terwyl ek dit afbreek.

*U is vry om die toetsitems uit te vee nadat u ten minste een van u eie items in die databasis ingevoer het. (Ek sal later verduidelik as u bybly).

Stap 8: Stap 1: die agterkantkode (bedienerkode.gs)

Stap 1: die agterkantkode (bedienerkode.gs)
Stap 1: die agterkantkode (bedienerkode.gs)
Stap 1: die agterkantkode (bedienerkode.gs)
Stap 1: die agterkantkode (bedienerkode.gs)

Vroeër het ons die Server Code.gs -lêer oopgemaak, en ek het 'n vinnige uiteensetting gegee van elk van die funksies, aangesien hulle doel was om elk van die items wat u pas opgestel het, te bedien, maar nou sal ons 'n paar funksies en hulpmiddels wat dit genoem word, uiteensit om van hierdie kode 'n sukses te maak.

1) Tafelkruising:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Form Responses 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

  • Hierdie kode is 'n basis vir die deurkruising van 'n Google -blad. Ek noem die blad by die naam eerder as nommer sodat die velle steeds behoorlik kan werk as die velle verwyder of herrangskik word.
  • In hierdie kode versamel ek net die reeks vir al die data in die tabel.

2) Ken 'n ID toe:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (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);

  • Ek het vroeër gevra dat die demo -waardes in die tabel gelaat word totdat die gebruiker ten minste een waarde vir hulself ingedien het. Dit is omdat die outomatiese ID -generator op die laaste waarde in die databasis staatmaak om te vul.
  • Ek haal die laaste 2de tot die laaste ry, want die laaste ry is ons nuwe waarde en die 1ste kolom vir die ID -waarde.
  • Ek genereer dan lukraak 'n getal tussen 5 en 15 en voeg dit by die laaste waarde. *
  • Uiteindelik plaas ek hierdie waarde in die ID -kolom van die laaste ry.
  • Vervolgens noem ons die funksie changeValueOnSubmit (e).

* Ek het 5-15 gekies om toekomstige etikettering en Google Home-integrasie moontlik te maak, sodat die getalle nie naby genoeg is om verwarring op hangers of kledingstukke of strepieskodes te veroorsaak nie.

3) URL -waarde verander:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Waar hou u hierdie kledingstuk?"]; var ColD = ColumnID _ ("Item Picture") +1; var ColLoc = ColumnID _ ("Standaard ligging")+1; DataChange = DataChange.toString (). vervang ("oop?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

  • As u 'n foto via 'n Google -vorm indien, is die URL wat in Google Blaaie ingevoeg is, 'n skakel na die werklike dokument. In ons geval, terwyl ons 'n HTML -bladsy skep, wil ons hê dat die skakel slegs die prentjie is.
  • Deur die "oop?" gedeelte van die URL na "uc? export = view &" het ons eerder 'n skakel na die prent geskep.
  • Ons sal hierdie nuwe waarde weer plaas in die ligging van die huidige itemfoto -skakel.
  • Ek stel ook die "Standaard ligging" en "Huidige ligging" van die item op dieselfde in die databasis. Dit sal help as ek my wasgoedmodus wil gebruik.
  • Ons sal daarop ingaan op die volgende bladsy, maar dit is ons eerste blik op die funksie ColumnID_ () wat ek geskep het.

    Hierdie funksie gebruik Kolomname om dit in die kolomgetal te vertaal, wat handig is vir Range -oproepe wat 'n kolumnommer eerder as naam vereis

4) SigbladApp.getUI ()

  • In die tweede prentjie kan u die gebruik van die SpreadsheetApp.getUI () sien soos dit gebruik is om 'n toevoeging tot die werkblad by die Google -blad te skep.
  • Die.getUI () -funksie help ook om 'n modale opspring te skep wat gebruik word vir die wasgoedmodus en as 'n vinnige skakel na die webwerf -koppelvlak.

5) HTMLService

  • Daar is twee tipes HTML -dienste wat in hierdie kode gebruik word: Sjabloon en HTMLOutput
  • Met die sjabloon kan kode binne die HTML -kode ingevoeg word, sodat inligting wat van 'n bediener afkomstig is, gevul kan word wanneer die bladsy opgeroep word.
  • HTML -uitset vertoon eenvoudige HTML -bladsye.
  • Ons het ook die metode met insluitend () waarmee ons verskeie HTML -lêers kan skep en in een HTML -lêer kan kombineer deur die inhoud van die lêer in 'n HTML -formaat eerder as 'n string terug te stuur.

Ek het 'n dokument aangeheg wat opgestel is soos Google App Scripts Documentation om die bronkode en funksionaliteit in Google Apps te verduidelik.

Stap 9: Stap 2: die agterkantkode Deel 2 (bedieneroproepe.gs)

Stap 2: die agterkantkode, deel 2 (bedieneroproepe.gs)
Stap 2: die agterkantkode, deel 2 (bedieneroproepe.gs)
Stap 2: die agterkantkode deel 2 (bedieneroproepe.gs)
Stap 2: die agterkantkode deel 2 (bedieneroproepe.gs)
Stap 2: die agterkantkode deel 2 (bedieneroproepe.gs)
Stap 2: die agterkantkode deel 2 (bedieneroproepe.gs)

Nou het ons die Server Calls.gs ingevoer. Hierdie funksies word hoofsaaklik in die HTML JavaScript gebruik, sodat hulle geskei is van kode wat hoofsaaklik gebruik word in die agterkant wat in Server Code.gs.

Foto 1) Globale veranderlikes:

Foto 2) haal items:

Prent 3) fetchItemsQry

Foto 4) filterItems

Foto 5) haal FiltersWithQry

Foto 6) ColumnID en CacheCalls

Daar is soveel om oor te praat met elkeen hiervan. En om die kode af te breek en te verduidelik wat aangaan, het ek 'n bietjie meer tikruimte nodig gehad. Aangeheg is 'n dokument vir die uiteensetting van die kode van ServerCalls.gs

Hierdie dokument is opgestel soos Google App Scripts Documentation en maak selfs skakels na soortgelyke voorwerpe.

Stap 10: Stap 3: die HTML -kode (Application.html)

Stap 3: die HTML -kode (Application.html)
Stap 3: die HTML -kode (Application.html)
Stap 3: die HTML -kode (Application.html)
Stap 3: die HTML -kode (Application.html)
Stap 3: die HTML -kode (Application.html)
Stap 3: die HTML -kode (Application.html)

HTML -kode word baie ongelukkig in 'n Instructable -dialoogkassie. Volg dus die foto's hierbo.

1) In die kop van die Application.html -bladsy vestig ons 'n titel en noem ons CSS.html -bladsy om gelaai te word.

*Aangesien ons 'n HTML -bladsy is, kan ons meer kode by hierdie dokument voeg sonder om die huidige skerm deurmekaar te maak deur gebruik te maak van die voorheen genoem include (pageName) metode wat in Server Code.gs gevind is

Die hoofkassie word ook op hierdie foto aangetref. U kan die kop hier verander en "[Your Name]'s Wardrobe" of wat u ook al sou wou hê u hierdie bladsy wil herken, invoer.

2) Net onder die kop is ons boonste navigasiebalk.

Hierdie navigasiebalk bevat alle artikelsoorte soos op die artikelblad in ons Google Blaaie gelys.

'N Inlynfunksie word opgeroep om 'n verskeidenheid van hierdie items te gaan haal. Dan word 'n lus uitgevoer om elkeen van hierdie opsies in te sluit as 'n spyskaartknoppie, kompleet met 'n aksiekode, sodat as 'n gebruiker op die spyskaartknoppie klik, die onderskeie items in die liggaamsgebied verskyn.

3) Die hoofliggaam.

Daar is 4 gedeeltes in hierdie deel. 'N Teksuitset, die sybalkfilter, die hoofliggaambeelde en die JS bevat.

Met die teksuitvoer kan die gebruiker 'n vinnige teksbeskouing sien vir watter tipe items hy tans kyk, in plaas van te verwys na die kieslysopsie wat hulle gekies het.

Die sybalkfilter bevat die vele filter wat beskikbaar is vir die tipe item wat 'n gebruiker gekies het. Hierdie filters weerspieël al die beskikbare opsies vir hierdie kategorie, asook hoeveel items onder die kategoriewaarde val. Hierdie sidebar is gevul met JavaScript -kode (wat vervolgens bespreek sal word).

Die hoofliggaam is tans leeg, maar net soos die filters, word dit ook gevul met itemblokkies wat die item -ID, kleur, grootte en ligging bevat, met 'n prentjie ingesluit sodra die gebruiker 'n kategorie kies en die JavaScript -kode hierdie gebied vul.

Laastens die insluit (JS), kom ons kyk hierna na die volgende stap.

Stap 11: Stap 4: die JavaScript -kode (JS.html)

Stap 4: die JavaScript -kode (JS.html)
Stap 4: die JavaScript -kode (JS.html)

As u gedink het dat die bedienerkode 'n swaar afdeling is, kry u dit baie.

Hier kombineer ons ons HTML en SeverCode met gebruikersinteraksies. Elke item waarop geklik word, moet hier verwerk word om die regte data te kry en dit in 'n leesbare formaat terug te gee. Kom ons kyk na ons eerste oproepe:

Die skrif noem: Ek gebruik drie verskillende biblioteke vir hierdie projek; jquery, bootstrap en 'n spesiale byvoeging vir bootstrap-kies. Hierdie biblioteke maak voorsiening vir die opmaak van voorwerpe en makliker oproepe na die elemente binne die HTML -kode.

My volgende belangrike JavaScript -reël is hieronder:

$ (dokument).keypress (funksie (gebeurtenis) {if (event.which == '13') {event.preventDefault (); }});

Hier skakel ek die enter -sleutel uit om enige van die vorms te aktiveer. Soos in hierdie geval, word slegs aan een webbladsy aan Google Web Apps toegeken. 'N Enter -pers sal data by die HTML -adres voeg en die gebruiker probeer herlei. Deur dit uit te skakel, laat u u JavaScript -kode toe om al die werk te doen.

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

funksie updateDBlocation (id, waarde) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, waarde); }

Hier is twee funksies wat bel na die Server Code.gs -lêer. Die lyn:

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

het baie werkende dele, maar die skelet is afkomstig van 'google.script.run', wat die HTML -bladsy vertel dat die volgende funksie op die bediener is.

  • Die laaste bietjie van hierdie kode is die funksie om uit te voer. In hierdie voorbeeld ServerRemoveFilter ()
  • Deur 'n withSuccessHandler () by te voeg, weet die HTML -bladsy nou wat om te doen met die gegewens wat teruggestuur word, en dit is om die funksie met die hakie uit te voer.
  • Dieselfde geld vir die withFailureHandler ()

Noudat ons die oproep van die bedienerkode afgebreek het, laat ons vinnig kyk na wat gebeur as hierdie bedieneroproep slaag en misluk.

funksie allGood (e) {console.log ("Sukses op bediener"); } funksie onFailure (fout) {$ ("#message-box"). html ("

Kan tans nie kledingstukke gaan haal nie. FOUT: " + error.message +"

");} funksie FailDBUpdate (fout) {$ ("#message-box "). html ("

U het nie toegang om die ligging te verander nie. FOUT: " + error.message +"

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

Ek het 'n baie eenvoudige konsole -logboek gemaak om sukses aan te dui wanneer die liggingsfunksie uitgevoer word, wat u as allGood () kan sien.

By die hantering van die foute lewer hierdie twee funksies die foutboodskap op wat die gebruiker kan sien deur 'n jQuery-oproep na die HTML-voorwerp te gebruik met 'n ID van 'message-box'.

Kom ons gaan nou na die gretige werk

Stap 12: Stap 5: die JavaScript-kode-klikaksies (JS.html)

Stap 5: die JavaScript-kode-klikaksies (JS.html)
Stap 5: die JavaScript-kode-klikaksies (JS.html)
Stap 5: die JavaScript-kode-klikaksies (JS.html)
Stap 5: die JavaScript-kode-klikaksies (JS.html)
Stap 5: die JavaScript-kode-klikaksies (JS.html)
Stap 5: die JavaScript-kode-klikaksies (JS.html)

Die boonste menubalk het opsies vir elke tipe artikel. Die funksie waarop hulle klik, is:

funksie filterTipe (artikel, id) {$ ("ul.navbar-nav li.active"). removeClass ("aktief"); $ ("#currentArticle"). html ("// HTML -KODE HIER");

updateSideBar = waar;

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

Ons kan in hierdie kode sien dat ons 'n google.script.run het wat na die bediener roep om inligting op te haal. Die suksesfunksie vir hierdie oproep is updateItems ().

PRENT 1 (met die swaar HTML -kode in hierdie funksie, is dit moeilik om die kode streng te kopieer, sonder om 'n gemors in hierdie boks te voorkom)

In die updateItems () -kode gebeur daar baie dinge. Weereens moet ons deur die voorwerp wat aan ons teruggestuur is, deurkruis en elke item by ons hoofbladsy voeg.

Die HTML -kode word as Arrays bygevoeg om die kode op te breek en dit makliker te maak om te lees en te sien waar itemData ingevoeg word.

In die kringloop van elke item verwyder ek velde wat ek nie in die beskrywing wil sien nie, soos standaard, tydstempel en prent -URL. Ek verwyder prentjie -URL uit die beskrywing omdat dit in plaas daarvan as die href by 'n merker gevoeg word. Sodra hierdie inligting saamgestel is, word dit na die hoofliggaam gestuur met behulp van die jQuery.append () -funksie.

Nadat al die items op die bladsy gevoeg is, word hierdie navraag met items weer na die bedienerkode gestuur om die filteropsies soos in prent 2 te sorteer en terug te stuur.

PRENT 2 (opdatering van die sybalk)

Baie soortgelyk aan die updateItems () -funksie, het ons weer 'n reeks HTML -kode en 'n lus vir al die filteropsies. Die enigste merkbare verandering is die jQuery.selectpicker ('verfris'). Hierdie funksie kom uit die skrifbiblioteek wat ons in die laaste stap ingesluit het. Dit stel die programmeerder in staat om 'n eenvoudige HTML te skryf en die biblioteek te laat opdateer om soekbare funksie sowel as die CSS -kode in te sluit.

PRENT 3 (filter met die sybalk)

Laastens het ons die updateFilter (formData) funksie. Dit word gebruik wanneer 'n vorm vanaf die sybalk ingedien word. Ons begin met die gebruik van 'n jQuery -funksie.serializeArray () dit lees die HTML -kode van die element wat in ons geval 'n vorm gedefinieer word, en gee die waardes in 'n string terug wat na die bediener gestuur moet word. En ons begin die proses weer vanaf prent 1.

Stap 13: Die einde …. Uiteindelik

Die einde…. Uiteindelik
Die einde…. Uiteindelik
Die einde…. Uiteindelik
Die einde…. Uiteindelik

Wel daar het jy dit; 'n volledige en deeglike verduideliking om u te help om u eie aanlyn klerekas op te stel, of om die funksies wat in my Google Scripts geskep is, te gebruik om u eie projek uit te brei.

Dit was 'n reis om hierdie projek te kodeer (en deur hierdie instruksies te dokumenteer), maar ek het die proses geniet en hoop dat u die produk sal geniet. Ek hoor graag van almal wat aanpassings maak, terwyl Michael Jordan sê: "Die plafon is die dak" en ek stem saam dat hierdie aansoek geen perke het nie.

Aanbeveel: