unesco 's statistiske kontor, ved anvendelse af jquery - erhvervsgrenens widget fabrik,,,,, 4,,,,,,,,, 31,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i lang tid, og den eneste måde at skrive toldkontrol i jquery var at udvide, $. i, namespace.det fungerer godt for simpel widgets, men som de begynde at bygge mere stateful widgets, hurtigt bliver tunge.for at støtte opbygningen af widgets, jquery - team, der er indført widget - fabrikken, som fjerner de fleste af de boilerplate, der typisk er forbundet med forvaltningen af en dims.,,, widget - fabrik, der er en del af eu - erhvervsgrenen, jquery kerne, er en måde at forvalte livscyklus samt en dims.disse livscyklus aktiviteter omfatter:, at skabe og ødelægge en dims, dims muligheder at, "super" opkald i tilfælde subclassed widgets, meddelelser, lad os udforske denne api - grænseflade, som vi opbygger en enkelt kugle figur widget.,, kuglen figur dims, før vi bygge den her dims, vi forstår nogle af de elementer i den dims.kuglen figur er et begreb, der er indført ved stephen par som en ændring i søjlediagrammet.,, kortet består af en række barer og markører oven på hinanden til at angive relative resultater.der er en quantiative omfang viser, at den faktiske vifte af værdier.ved at stable den stænger og markører på denne måde, nærmere oplysninger kan gives, uden at det går ud over læsbarhed.legenden fortæller den slags oplysninger, vi planlægger, html for denne figur ligner så:, <!- figur container - > < div klasse = "figur kugle figur" > <!- en legende... > < div klasse = "legende" stil = "> < div klasse =" legende punkt "> < over klasse =" legende symbol - grøn "> < /span > < over klasse =" legenden etiket "> grønne linje < /span > < /div > < /div > <!- kort... > < div klasse = "figur beholder" stil = "bredde: 86%;" > <!-- Quantitative Scale --> <div class="tick-bar"> <div class="tick" style="left: 0%;"></div> <div class="tick-label" style="left: 0%;">0</div> <div class="tick" style="left: 25%;"></div> <div class="tick-label" style="left: 25%;">25</div> <div class="tick" style="left: 50%;"></div> <div class="tick-label" style="left: 50%;">50</div> <div class="tick" style="left: 75%;"></div> <div class="tick-label" style="left: 75%;">75</div> <div class="tick" style="left: 100%;"></div> <div class="tick-label" style="left: 100%;">100</div> </div> <!- barer... > < div klasse = "bar" stil = "tilbage: 0px; bredde: 75%;" bar indeks = "0" > < /div > < div klasse = "blå" stil = "tilbage: 0px; bredde: 50%," bar indeks = "1" > < /div > <!- markører - > < div klasse = "markør grønne" stil = "venstre: 80%;" - indeks = "0" > < /div > < div klasse = "markør røde" stil = "venstre: 50%" - indeks "1" > < /div > < /div > < /div >, vores dims, som vi kalder, jquery. bulletchart, vil skabe det dynamisk http: //fra de data, der er fremlagt.den endelige dims kan ses på 'side, som du kan downloade fra github.opfordringen til at skabe den dims skal se sådan her: $(. figur). bulletchart ({størrelse: 86, stænger: [(afsnit: "planlagte mål", værdi: 75, css: "} {afsnit:" faktiske mål ", værdi: 50, css: blå ')] - markører: [(afsnit: grønne linje, værdi: 80, css:" grønne "} {afsnit:" mindstebeløb, værdi: 50, css: "rød"}] flåter: [0, 25, 50, 75 og 100]}), de værdier i procenter.den mulighed, størrelse, kan bruges, når man vil have flere kugle var placeret ved siden af hinanden med relative størrelse.den mulighed, flåter, bruges til at få etiketter på skalaen.de mærker og barer er angivet som en række indvendinger literals med titel, værdi og css, egenskaber.,, opbygge den dims, men nu ved vi, at strukturen i den dims, lad os gå ned for at bygge det.en dims er skabt ved at kalde, $. widget() med navnet på den dims og et objekt, der indeholder en instans metoder.den nøjagtige api ligner:,, jquery. widget (navn [, base] prototype), for nu skal vi arbejde med navn og prototype argumenter.for bulletchart, vores grundlæggende widget stub ligner følgende: $. widget ('nt. bulletchart, {muligheder: {}, _create: funktion () {}, _destroy: funktion () {}, _setoption: funktion (centrale, værdi) {}}); det anbefales, at de altid namespace din dims navne.i dette tilfælde, vi bruger, nt. bulletchart ".alle de jquery ui widgets er under "-" namespace.selv om vi er namespacing den dims, opfordringen til at skabe en dims på et element omfatter ikke namespace.for at skabe en kugle figur, ville vi bare kalde, $('# elem'). bulletchart(),., f.eks. egenskaber er anført efter navnet på den dims.pr. konvention, alle private metoder til den dims er indledt med _ ".der er visse særlige egenskaber, som forventes af widget - fabrik.disse omfatter, valgmuligheder, _create,, _destroy, og _setoption,.,, optioner, der er misligholdelse muligheder for den dims, _create: widget fabrik kalder denne metode, første gang den dims er instantierede.det anvendes til at skabe den første dom og vedlægge alle omstændigheder vagter.,, _init,: efter opfordring til, _create, fabrikken opkald, _init,.det er normalt anvendes til at nulstille den dims til oprindelige tilstand.når en dims er skabt, at almindelig widget konstruktør, f.eks.: $. bulletchart(), også vil nulstille den dims.dette internt kræver, _init,.,, _setoption,: når man sætter en mulighed for den dims, med en opfordring, som f.eks.: $('# elem'). bulletchart ('option "," størrelse ", 100).senere vil vi se andre veje at optioner på widget.,, at den første dom, _create, vores bulletchart widget kommer til live i, _create metode.her er hvor vi bygge den grundlæggende struktur for kort.det, _create, funktion kan ses nedenfor.de vil bemærke, at der ikke er meget, der foregår her, udover at skabe maksimal beholder.det faktiske arbejde for at skabe den dom for stænger, markører og flåter sker i, _setoption metode.dette kan synes at være noget i modstrid med sund fornuft til at begynde med, men der er en god grund til det. _create: funktion () {. element. addclass ('bullet-chart); //figur beholder det. _container = $(< div klasse = "figur beholder" > < ///////div > '). appendto (. del). _setoptions ({"størrelse": this.options.size, flåter ": this.options.ticks,' stænger ': this.options.bars, markører: this.options.markers})}, konstatere, at de stænger markører og flåter kan også ændres, ved at fastlægge optioner på widget.hvis vi holdt den kode for dets opførelse i _create, vil vi gentage os selv ind, _setoption,.ved at flytte den kode, _setoption, og at påberåbe sig det fra _create, fjerner dobbeltarbejde og også koncentreret konstruktion. desuden den kode ovenfor viser dig en anden måde at muligheder på den dims.med det, _setoptions, metode (note flertal), kan de fastsætte dissemineret muligheder på én gang.internt, fabrikken vil gøre de enkelte opfordrer, _setoption, for hver af de muligheder.,, _setoption, metode, for kuglen figur, _setoption, metode er den workhorse.det beskæftiger sig med oprettelse af markører, stænger og flåter og eventuelle ændringer af disse egenskaber.det virker ved at fjerne alle eksisterende bestemmelser og genskabe det baseret på den nye værdi.,, _setoption, metode, modtager både mulighed nøgle og en værdi, som argument.nøglen er navnet på den mulighed, som svarer til en af nøglerne i standardløsninger.for eksempel, at ændre de stænger på den dims, du ville gøre følgende opfordring: $('# elem'). bulletchart ('option ',' stænger '[(afsnit: "nye markør, værdi: 50}]), _setoption, metode til bulletchart ligner således:, _setoption: funktion (centrale, værdi) (var - selv = det tidligere =. optioner [centrale], fnmap = {' stænger ': funktion () (createbars (værdi, selv)}, markører: funktion () (createmarkers (værdi, selv)}, flåter" - funktion () (createtickbar (værdi, selv)}, "størrelse": funktion () (self. element. finde (. figur beholder). css ('width, værdi +%);}}; //base. _super (centrale, værdi); hvis (nøgle i fnmap) (fnmap [centrale] () //- begivenhed. _triggeroptionchanged (centrale, tidligere, værdi);}}, her, skaber vi en simpel hash muligheden navn til den tilsvarende funktion.ved hjælp af denne hash, vi arbejder kun med brugbare muligheder og stiltiende ignorere ugyldig.der er to ting, der sker her: en opfordring til, _super(), og fyrer den mulighed, ændrede omstændigheder.vi vil se på dem senere i denne artikel. for hver af de muligheder, som ændrer den dom, som vi kalder en specifik hjælper metode.det hjælper metoder, createbars,, createmarkers, og createtickbar, er fastsat uden for den dims instans egenskaber.This is because they are the same for all widgets and need not be created individually for each widget instance.,//Creation functions function createTickBar(ticks, widget) { //Clear existing widget._container.find('.tick-bar').remove(); var tickBar = $('<div class="tick-bar"></div>'); $.each(ticks, function (idx, tick) { var t = $('<div class="tick"></div>') .css('left', tick + '%'); var tl = $('<div class="tick-label"></div>') .css('left', tick + '%') .text(tick); tickBar.append(t); tickBar.append(tl); }); widget._container.append(tickBar); } function createMarkers(markers, widget) { //Clear existing widget._container.find('.marker').remove(); $.each(markers, function (idx, m) { var marker = $('<div class="marker"></div>') .css({ left: m.value + '%' }) .addClass(m.css) .attr('marker-index', idx); widget._container.append(marker); }); } function createBars(bars, widget) { //Clear existing widget._container.find('.bar').remove(); $.each(bars, function (idx, bar) { var bar = $('<div class="bar"></div>') .css({ left: 0, width: '0%' }) .addClass(bar.css) .attr('bar-index', idx) .animate({ width: bar.value + '%' }); widget._container.append(bar); }); },All of the creation functions operate onprocentsatser.dette sikrer, at kortet tilbageførsler pænt, når du resize den indeholder element.de standardløsninger, uden nogen muligheder, der er fastsat i forbindelse med den dims, misligholder sine forpligtelser, vil komme til at spille en rolle.det er den rolle, de muligheder, ejendom.for bulletchart, vores standardløsninger, ligner det: $. widget ('nt. bulletchart, {muligheder: (//%: 0 - 100 størrelse: 100 //[(afsnit: "stikprøve bar, værdi: 75, css: '')], [...] /stænger: /[(titel:" stikprøve markør, værdi: 50, css: "')], [...] - markører: //flåter...% værdier flåter: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90 - 100]).}, vi starter med en størrelse på 100%, barer og markører og flåter anbringes hver 10%.med disse misligholdelser, vores kugle figur skal se ud:,, vi hidtil har set, hvordan man skaber den dims med, _create og ajourføring af _setoption,.der er en anden livscyklus metode, som vil blive kaldt, da du ødelægge en dims.det er det, _destroy metode.når du ringer, $('# elem'). bulletchart ('destroy), den dims fabrik internt kræver, _destroy, på din dims instans.den dims, er ansvarlig for at fjerne alt det, der er indført i den dom.dette kan omfatte undervisning og andre dom elementer, der blev tilføjet i, _create metode.det er også et godt sted at slippe alle omstændigheder hjælpere.det, _destroy, bør være præcis det modsatte af det, _create metode. for kuglen figur dims, _destroy, er ganske enkel:, _destroy: funktion () {. element. removeclass ('bullet-chart '); dette. element. empty();},,, subclassing, begivenheder og mere, vores bulletchart dims er næsten træk afsluttet bortset fra en sidste element:, legende.legenden er helt afgørende, da det vil give mere mening, at de markører og barer.i dette afsnit vil vi tilføje en legende næste på listen. i stedet for at tilføje dette træk ved direkte til bulletchart dims, vi vil skabe en underklasse, bulletchart2, vil det have legenden støtte.i den proces, vi vil også se på nogle af de interessante træk ved widget fabrik arv. med tilføjelse af en legende, widget - fabrik, støtter subclassing af en dims til mere specialiserede versioner.tidligere i den artikel, vi så api til $. widget(),, der havde tre argumenter:,, jquery. widget (navn [, base] prototype), det andet parameter, giver os mulighed for at vælge en basisklasse for vores widget.vores bulletchart2, dims, der underklasser bulletchart, vil have følgende underskrift: $. widget ('nt. bulletchart2, $. nt.bulletchart, {muligheder: (//show /skjule legende legende: sande}, //dette sikrer vi beholder de samme namespace som grundlag widgeteventprefix: $. nt.bulletchart.prototype.widgeteventprefix, _create: funktion () {...}, _destroy: function() {...}, _setoption: funktion (centrale, værdi) {...}}), der er nogle interessante ting at bemærke:, fortsætter vi med at namespace vores widget navn:, nt. bulletchart2,., widget fabrik automatisk bringer widget under $. nt, namespace.således som henvisning til vores tidligere dims, vi brugte $. nt. bulletchart,.på samme måde, hvis vi skulle anvendes en af de faste jquery ui widgets, ville vi henviser dem til $. ui.widget-name,,, widgeteventprefix, er en ny ejendom, som vi ikke har set før.vi vil få for, at når vi taler om begivenheder.resten af den instans egenskaber bør være bekendt.,, da vi er ved at tilføje mere dom elementer med legenden, bliver vi nødt til at beslutte, _create metode.det betyder også, at vi er nødt til at ordne det, _destroy, med henblik på at være symmetrisk. _create: funktion () (var - selv = det; dette. _legend = $(< div klasse = "legende" > < /div > '). appendto (dette. element).//kalder basen. _super(); dette. _setoption ('legend,. muligheder. legende)}, _destroy: function() {. element. finde ("legende"). empty();...denne. _super();}, her igen, ser vi det samme mønster som vores tidligere, _create metode.vi skaber en beholder til den legende, og så ringer jeg, _setoption, til at bygge resten af historien.da vi er overordnede, _create, er vi nødt til at sikre, at vi kalder basen, _create,.vi gør dette med opfordringen til, _super,.på samme måde, _destroy, betragter vi også opfordringen til, _super,.så du kan tænke over, hvordan den dims ved som super metode til at ringe med en simpel ukvalificeret, _super, besværgelse?kløgt for at ligge inde med den dims fabrik.når en dims er subclassed, fabrikken opretter, _super, reference forskelligt for hver af de instans funktioner.altså, når du ringer, _super, fra din instans metode, det altid understreger, at det er korrekt, _super metode. fald anmeldelser, da bulletchart støtter skiftende markører og barer, legenden skal være i harmoni med disse ændringer.desuden vil vi også støtte toggling synligheden af markører og barer ved at klikke på legenden poster.det er nyttigt, når du har flere markører og barer.ved at gemme dig et par af de elementer, du kan se de andre mere klart, at støtte synkronisering af legenden med ændringer af markører og stænger, bulletchart2, dims skal lytte til de forandringer, der sker på disse egenskaber.basen bulletchart allerede brande, en ændring, hvis hver gang, at dets muligheder.her er den tilsvarende snippet fra basen widget:, _setoption: funktion (centrale, værdi) (var - selv = det tidligere =. optioner [centrale]...//base. _super (centrale, værdi); hvis (nøgle i fnmap) (fnmap [centrale] () //- begivenhed. _triggeroptionchanged (centrale, tidligere, værdi)), _triggeroptionchanged: funktion (optionkey, previousvalue, currentvalue) (denne. _trigger ('setoption, (type "setoption '} {mulighed: optionkey, tidligere: previousvalue, nuværende: currentvalue})}, når muligheden er der, setoption, begivenhed er fyret.hvis data indeholder den tidligere og nye værdi for den mulighed, der blev ændret, ved at lytte til denne begivenhed i subclassed dims, du kan vide, hvornår de markører eller stænger.det, bulletchart2, dims tilslutter sig denne begivenhed i den, _create metode.at tilslutte sig widgets begivenheder er opnået med opfordring til, at denne. element. on(),., this.element, viser, at der jquery element, som den dims var instantierede.da tilfælde vil blive fyret på element, vores begivenhed abonnement skal ske på det. _create: funktion () (var - selv = det; dette. _legend = $(< div klasse = "legende" > < /div > '). appendto (. del).//anvendelse legende om ændringer af markører og stænger. element. ('bulletchart: setoption, funktion (omstændigheder data) (hvis (data.option = = = "mærker") (createlegend (data.current, self.options.bars, selv)} andre, hvis (data.option = = = 'stænger') (createlegend (self.options.markers, data.current, selv)}}); //kalder basen. _super(); dette. _setoption ('legend,. muligheder. legende)}, bestemmelse, hvis navn, der er anvendt for de tilsluttede:,'bulletchart: setoption ".som en politik, der lægger en begivenhed widget fabrik præfikset for begivenheder, fyret fra den dims.uden at dette præfiks hedder widget, men det kan let blive ændret med den, widgeteventprefix, ejendom.basen bulletchart widget ændringer til,'bulletchart: ". $. widget ('nt. bulletchart, {muligheder: {...}, widgeteventprefix: "bulletchart:"...}), er vi også nødt til at tilslutte sig,'click, arrangementer om legenden ting at skjule /viser de tilsvarende mærke /bar.vi gør dette med, _on metode.denne metode tager en hash i tilfælde underskrift på den kontaktperson funktion.den kontaktperson er sammenhæng (,), er korrekt, at den dims instans.en anden bekvemmelighed, _on, er, at den dims fabrik automatisk unbinds begivenhederne på ødelægge., _create: funktion () {...////////- klik på legenden poster. _on ({"klik. legende punkt: funktion (ref.) (var - elt = $(ref. currenttarget), punkt = elt. data ('chart-item), komitéen = [+ item.type + « - indeks + item.index +]";. element. finde (komitéen). fadetoggle(); elt. toggleclass ('fade)}}).}, mere drikkepenge, widget - fabrik med et par andre detaljer, som du skal være opmærksom på.den dims, refererer til, f.eks. hidtil har vi kun set en måde at kalde metoder på den dims.vi gjorde det, $('# elem). bulletchart ('method-name ").men det tillader kun, at offentlige metoder såsom "mulighed", "ødelægge", "om", "væk".hvis du ønsker at påberåbe sig disse metoder direkte på widget - instans, der er en måde at gøre det på.den dims fabrik, lægger den dims instans til, data(), genstand for element.du kan få den instans, som så:, var widget = $('# elem). data ('bulletchart) widget. destroy(); endvidere, hvis du ønsker at få fat i alle bulletchart widgets på den side, der også er komitéen for:, var allcharts = $(": nt bulletchart); visse særlige metoder, der er et par særlige metoder, som du skal være opmærksom på, at der bruges mindre hyppigt:, _getcreateeventdata(), og _getcreateoptions(),.førstnævnte, der anvendes til at fastgøre event data for "skaber" hændelse, der er fyret efter færdigbehandling af opfordringen til, _create,.,, _getcreateoptions, er for at knytte yderligere misligholdelse muligheder for den dims eller overordnede eksisterende.brugeren, hvis muligheder - muligheder tilbage efter denne metode, som på sin side tilsidesætter misligholdelse widget muligheder.,, smdrg., så er vi færdige.hvis du vil undersøge yderligere henvisninger nedenfor skal tjene dig godt.selvfølgelig, den bedste kilde til oplysninger, vil altid være kildekode, selv.jeg vil opfordre læser jquery.ui.widget kilde på github.,, jqueryui widget fabrik api, glider den dims fabrik.