Jquery ui oortjies fx opsies

Oortjies in jQuery UI 1.7 Die UI oortjies widget gebruik word om sigbaarheid oor 'n stel van verskillende elemente wissel, elke element bevat inhoud wat kan verkry word deur te kliek op die opskrif wat verskyn as 'n tab individu. Die oortjies gestruktureer sodat hulle in lyn langs mekaar, terwyl die inhoud artikels word lae bo-op mekaar, met slegs die boonste een sigbare. Kliek op 'n blad sal die blad na vore te bring en bring sy verwante paneel inhoud aan die bokant van die stapel. Slegs een inhoud paneel kan oop wees op 'n slag. Die volgende kiekie toon die verskillende komponente van 'n stel van UI oortjies: 'n Basiese blad implementering Die struktuur van die onderliggende HTML-elemente, waarop oortjies is gebaseer, is stewig en widgets vereis dat 'n sekere aantal elemente vir hulle te werk. Die oortjies moet geskep word uit 'n lys element (bestel of ongeordende) en elke lysitem moet 'n ltagt element bevat. Elke skakel sal nodig hê om 'n ooreenstemmende element met 'n bepaalde ID wat dit is wat verband hou met die skakels href kenmerk het. Wel verduidelik die presiese struktuur van hierdie elemente na ons eerste voorbeeld. In 'n nuwe lêer in jou teks editor, skep die volgende bladsy: Slaan die kode soos tabs1 in jou jqueryui werk gids. Kom ons hersien wat gebruik is. Die volgende hulpbronne script en CSS is nodig vir die blad standaard widget Instantiëring: 'n blad widget bestaan ​​uit verskeie standaard HTML-elemente wat in 'n spesifieke manier (hierdie kan óf gekodeer in die bladsy, of dinamies toegevoeg of kan 'n mengsel van beide wees afhangende van die vereistes van jou implementering). 'N buitehouer element, wat die oortjies metode is 'n beroep op 'n Lys element (ltulgt of ltolgt) 'n ltagt element vir elke blad 'n element van die inhoud van elke blad Die eerste twee elemente binne die buitehouer maak die klikbare blad opskrifte, wat gebruik om die inhoud gedeelte wat verband hou met die blad te wys. Elke blad moet sluit 'n lys item met die skakel. Die href kenmerk van die skakel moet ingestel word as 'n fragment identifiseerder, voorafgegaan deur. Dit moet ooreenstem met die ID-kenmerk van die element wat die inhoud afdeling, waarmee dit verband hou vorm. Die inhoud afdelings van elke blad is geskep deur die elemente. Die id kenmerk vereis en sal geteiken word deur sy ooreenstemmende element. Weve gebruik elemente in hierdie voorbeeld as die inhoud panele vir elke blad, maar ander elemente, soos elemente kan ook gebruik word. Die elemente tot dusver, saam met die vereiste eienskappe bespreek, is die minimum wat vereis word van die onderliggende markup. We skakel na 'n paar hulpbronne ltscriptgt uit die biblioteek aan die onderkant van die ltbodygt voor sy sluiting tag. Laai skrifte laaste, nadat style en bladsy elemente is 'n bewese tegniek vir die verbetering van prestasie. Na die eerste skakel na jQuery, skakel ons by die ui. core. js lêer wat nodig is deur al die komponente (behalwe die effekte, wat hul eie kern lêer). Ons het toe verwys na die komponente bron lêer wat in hierdie geval is ui. tabs. js. Na die drie vereiste script lêers van die biblioteek, kan ons wend ons tot ons persoonlike LT scriptgt element waarin ons die kode wat die oortjies skep voeg. Ons gebruik net die (funksie ()) kortpad na ons kode uit te voer wanneer die dokument is gereed. Ons het toe bel die oortjies () widget metode op die jQuery voorwerp, wat ons oortjies houer element (die ltulgt met 'n ID van myTabs).As ons hierdie lêer uit te voer in 'n leser, moet ons die oortjies sien as hulle verskyn in die eerste kiekie van hierdie artikel (sonder die notas natuurlik). Blad aangevra klasse gebruik van Firebug vir Firefox (of 'n ander generiese DOM Explorer) ons kan sien dat 'n verskeidenheid van klasname word by die verskillende onderliggende HTML elemente wat die oortjies widget is geskep uit, soos in die volgende kiekie: Kom hersien hierdie kortliks. Om die buitehouer Dit divgt die volgende klas name bygevoeg: Toegepaste geronde hoeke aan die onderkant kante van die inhoud panele Al hierdie klasse word by die onderliggende elemente outomaties deur die biblioteek, moet ons dit nie vir hulle met die hand te voeg wanneer kodering die bladsy . As hierdie tabelle illustreer, die aangevra verskaf die volledige stel van beide strukturele CSS style wat bepaal hoe die oortjies funksie en tema-spesifieke style wat bepaal hoe die oortjies verskyn, maar nie hoe hulle funksioneer. Ons kan maklik sien watter keurders goed moet ignoreer as ons wil die voorkoms van die dingesie, en dit is wat goed doen in die volgende artikel aanpas. Die toepassing van 'n persoonlike tema na die oortjies In die volgende voorbeeld kan ons sien hoe om die oortjies basiese voorkoms te verander. Ons kan enige reëls suiwer gebruik vir uitstalling met ons eie styl reëls vir 'n vinnige en maklike aanpassing sonder om die reëls met betrekking tot die blad funksie of struktuur oorheers. In 'n nuwe lêer in jou teks editor, skep die volgende baie klein style. Dit is al wat ons nodig het. Stoor die lêer as tabsTheme. css in jou gids CSS. As jy die klasname met die tafels op die vorige bladsye vergelyk sal jy sien dat die tema-spesifieke style is oorheersende. Omdat die tema lêer is oorheersende, moet ons voldoen aan of hoër die spesifisiteit van die keurders in theme. css. Dit is die rede waarom ons teiken verskeie keurders soms. In hierdie voorbeeld ignoreer ons 'n paar van die reëls in ui. tabs. css. Ons moet die ID selector van ons houer element gebruik saam met die selector van ui. theme. css (.ui-widget-inhoud) ten einde die dubbele klas selector. ui-oortjies. ui-oortjies-paneel klop. Moenie vergeet om te skakel na die nuwe style van die LT headgt van die onderliggende HTML-lêer, en maak seker dat die persoonlike style ons nou net gemaak het verskyn ná die ui. tabs. css lêer: Die reëls wat ons probeer om te ignoreer sal nie geneutraliseer word deur ons tema lêer as die style is nie gekoppel aan in die korrekte volgorde. Slaan die veranderde lêer as tabs2 in die gids jqueryui en sien dit in 'n leser. Dit moet lyk soos die volgende kiekie: Ons nuwe tema isnt dramaties verskil van die standaard gladheid. Ons kan egter sy verskyning aanpas om ons eie behoeftes en voorkeure te pas deur die toevoeging van 'n paar ekstra style. Konfigureerbare opsies Elkeen van die verskillende komponente in die biblioteek het 'n reeks van verskillende opsies wat bepaal watter eienskappe van die widget is aangeskakel is by verstek. 'N voorwerp letterlike kan oorgedra word in die oortjies widget metode om hierdie opsies te stel. Die beskikbare opsies om nie-standaard gedrag instel by die gebruik van die tabs widget word in die volgende tabel: 'n string spesifiseer die elemente wat gebruik word wanneer die skep van nuwe oortjies dinamies. Let daarop dat beide 'n ltagt en 'n ltspangt tag word geskep wanneer nuwe oortjies bygevoeg deur die widget. Die en dele van die string word intern gebruik deur die widget en vervang met die werklike waardes van die widget. 'n blad kies van Kom ons kyk na hoe hierdie konfigureerbare eienskappe gebruik kan word. Byvoorbeeld, kan die widget instel sodat die tweede blad vertoon wanneer die bladsy laai. Verwyder die LT linkgt vir tabsTheme. css in die LT headgt en verander die finale Dit scriptgt element sodat dit lyk soos volg: Stoor as tabs3. Die verskillende oortjies en hul verwante inhoud panele is verteenwoordig deur 'n numeriese indeks begin by nul, baie soos 'n standaard JavaScript skikking. Spesifisering 'n ander blad oop te maak by verstek is so maklik soos die verskaffing van die indeks nommer as die waarde vir die gekose eiendom. Wanneer die bladsy laai, moet die tweede blad word gekies. Weve oorgeskakel na die verstek gladheid tema, sodat ons kan fokus op hoe die eienskappe werk. Saam met die verandering van wat blad gekies kan ons ook bepaal dat geen oortjies aanvanklik gekies moet word deur die verskaffing van nul as die waarde vir hierdie eiendom. Dit sal veroorsaak dat die widget te verskyn soos volg op bladsy laai: Versper n blad Wil jy dalk 'n spesifieke blad te wees afgeskakel totdat 'n sekere toestand voldoen. Dit is maklik bereik word deur die manipulering van die eiendom gestremde van die oortjies. Verander die konfigurasie voorwerp in tabs3 hierdie: Stoor as tabs4 in jou gids jqueryui. In hierdie voorbeeld, ons verwyder die gekose eiendom en voeg die indeks van die tweede blad om die gestremde skikking. Ons kan die indekse van ander oortjies te voeg tot hierdie reeks so goed, geskei deur 'n komma, om verskeie afdelings te skakel by verstek. Wanneer die bladsy in 'n leser gelaai, die tweede blad het die klas naam UI-widget-gestremde toegepas word, en sal haal die gestremde style van ui. theme. css. Dit sal nie reageer op die muis interaksie op enige manier soos in die volgende kiekie: effekte oorgang Ons kan maklik aantreklike oorgang effekte met behulp van die eiendom fx voeg. Hierdie vertoon wanneer oortjies is oop en toe. Hierdie eiendom is ingestel met 'n ander voorwerp letterlike (of 'n skikking) in ons opset voorwerp, wat een of meer effekte in staat stel. Kom vervaag effek in staat te stel met behulp van die volgende verstellings voorwerp: Slaan hierdie lêer as tabs5 in jou gids jqueryui. Die fx voorwerp wat ons geskep het twee eiendomme. Die eerste eiendom is die animasie. Om vervaag gebruik, ons spesifiseer ondeursigtigheid as dit is wat aangepas. Ons wil hoogte spesifiseer as die naam eiendom plaas om die opening van animasie gebruik. Reguliere die ondeursigtigheid eenvoudig omkeer sy huidige omgewing. As dit is tans sigbaar is, is dit gemaak onsigbare en andersom. Die tweede eiendom, duur. spesifiseer die spoed waarteen die animasie plaasvind. Die waardes vir hierdie eiendom is stadig. normale (verstek waarde), of 'n vinnige. Ons kan ook 'n heelgetal verteenwoordig die aantal millisekondes die animasie moet hardloop vir die lewering. Wanneer ons die lêer uit te voer kan ons sien dat die blad inhoud stadig vervaag as 'n blad sluit en vervaag in wanneer 'n nuwe blad oop. Beide animasie tydens 'n enkele blad interaksie. Om net die animasie wys een maal gedoen toe 'n blad sluit byvoorbeeld, sou ons die fx voorwerp in 'n verskeidenheid moet nes. Verander die konfigurasie voorwerp in tabs5 sodat dit lyk soos volg: Die sluitingsdatum effek van die oomblik oop paneel inhoud is vervat in 'n voorwerp in die eerste item van die skikking, en die opening animasie van die nuwe blad is die tweede. Deur die spesifiseer van nul as die tweede item in die skikking ons die opening van animasies afskakel wanneer 'n nuwe blad gekies. Ons kan ook spesifiseer verskillende animasies en spoed vir die opening en sluiting van animasies deur die byvoeging van 'n ander voorwerp as die tweede reeks item in plaas van nul. Stoor dit as tabs6 en sien die resultate in 'n leser. Opvoubare oortjies by verstek wanneer die aktiewe blad word gebruik, gebeur daar niks. Maar ons kan dit verander sodat die tans oop paneel inhoud sluit wanneer sy blad opskrif gekies. Verander die konfigurasie voorwerp in tabs6 sodat dit lyk soos volg: Slaan hierdie weergawe as tabs7. Hierdie opsie laat al die inhoud panele word gesluit, baie soos wanneer ons nul verskaf om die gekose eiendom vroeër op. Kliek op 'n blad gedeaktiveer sal die blad kies en wys sy verwante paneel inhoud. Kliek op die blad weer dieselfde sal dit sluit, krimp die widget af sodat net die kop en oortjies vertoon). Die standaard implementering van die widget Hoe die aangevra teikens blad widgets Hoe om persoonlike style van toepassing op 'n stel van oortjies oortjies met behulp van hul opsies Ingeboude oorgang effekte vir inhoud paneel veranderinge As instel: Opsomming In hierdie artikel, het ons die volgende onderwerpe bespreek jy hierdie artikel wat jy dalk belangstel om die lig te gelees het: youve lees 'n uittreksel uit: Nuwe Popular Posts Ons verstaan ​​jou tyd is belangrik. Uniek onder die groot uitgewers, ons soek om te ontwikkel en te publiseer die groot verskeidenheid van leer en inligting produkte op elke tegnologie. Elke Packt produk lewer 'n spesifieke leerbaan, breedweg gedefinieer deur die tipe reeks. Hierdie gestruktureerde benadering maak dit moontlik om die pad wat die beste by jou kennisvlak, leerstyl en taak doelwitte te kies. Leer as 'n nuwe gebruiker, hierdie stap-vir-stap handleiding gidse sal jy al die praktiese vaardighede wat nodig is om bevoegde en doeltreffende geword gee. Beginners Gids Friendly, informele tutoriale wat 'n praktiese inleiding met behulp van voorbeelde, aktiwiteite, en uitdagings bied. Essentials n vinnige, gekonsentreerde inleidings wat die vinnigste manier om die instrument om te werk in die werklike wêreld sit. Kookboek N versameling van praktiese selfstandige resepte wat alle gebruikers van die tegnologie nuttig vir die bou van meer kragtige en betroubare stelsels sal vind. Bloudrukke lei jou deur die mees algemene vorme van projek sal jy ontmoeting, gee jou end-tot-end leiding te gee oor hoe om jou spesifieke oplossing vinnig en betroubaar te bou. Bemeestering Neem jou vaardighede na die volgende vlak met 'n gevorderde handleidings wat jy vertroue by die gereedskap mees kragtige funksies te bemeester sal gee. Begin Toeganklik vir lesers goedkeuring van die onderwerp, hierdie titels trek tog die instrument of tegnologie, sodat jy 'n effektiewe user. Tabs Widget Tabs kan word is oor die algemeen gebruik word om inhoud in verskeie afdelings wat kan omgeruil om ruimte te bespaar breek, baie soos 'n trekklavier . Die inhoud van elke blad paneel kan gedefinieer word in 'n bladsy of via Ajax gelaai kan word beide hanteer outomaties gebaseer op die href van die anker wat verband hou met die blad. By verstek oortjies geaktiveer op klik, maar die gebeure kan verander word na hover deur die opsie gebeurtenis. Bykomende notas: Hierdie widget vereis 'n paar funksionele CSS, anders is dit wonapost werk. As jy 'n persoonlike tema te bou, gebruik die widgetaposs spesifieke CSS-lêer as 'n beginpunt. Opsies ajaxOptionsxA0 Bykomende Ajax opsies om te oorweeg wanneer die laai blad inhoud (sien jQuery. ajax ()). cachexA0 Of na inhoud afgeleë oortjies kas, bv laai net een keer of met elke klik. Cached inhoud word lui gelaai, bv eens en slegs een keer vir die eerste klik. Let daarop dat om te verhoed dat die werklike Ajax versoeke van wat die kas deur die leser wat jy nodig het om 'n ekstra kas voorsien: valse vlag in die opsie ajaxOptions. collapsiblexA0 Wanneer gestel is. die aktiewe venster toegemaak kan word. cookiexA0 Bewaar die nuutste gekies blad in 'n koekie. Die koekie word dan gebruik om die aanvanklik gekose blad vas te stel of die geselekteerde opsie nie word gedefinieer. Vereis dat die koekie plugin, wat ook kan gevind word in die ontwikkeling-bondel-eksterne gids van die aflaai bouer. Die doel moet die sleutel / waarde pare van die vorm van die koekie plugin verwag as opsies. Voorbeeld:. Sedert jQuery UI 1.7 Dit is ook moontlik om die naam koekie gebruik via die naam eiendom te definieer. disabledxA0 Watter oortjies is afgeskakel. Verskeie vorme ondersteun: Boolean. Aktiveer of deaktiveer alle oortjies. Skikking. 'N skikking met die nul-gebaseerde indekse van die oortjies wat gevolg moet word afgeskakel, bv 0, 2 sou die eerste en derde blad te skakel. eventxA0 Die tipe gebeurtenis wat die oortjies moet reageer op om die blad te aktiveer. Om te aktiveer op hover, gebruik quotmouseoverquot. fxxA0 Aktiveer animasie vir hidniga de toon blad panele. Verskeie vorme ondersteun: voorwerp. Sleutel / waarde pare van eiendomme te animeer en opsionele duur, bv . Skikking. Animasie instellings in die vorm hideSettings, showSettings. idPrefixxA0 As die blad afgeleë, sy anker element dit is, het geen titel kenmerk om 'n ID van 'n ID / fragment identifiseerder is gemaak op grond van hierdie voorvoegsel en 'n unieke ID byvoorbeeld quotui-oortjies-54quot genereer. panelTemplatexA0 HTML sjabloon waaruit 'n nuwe blad paneel is geskep in die geval van die toevoeging van 'n blad met die metode byvoeging () of wanneer die skep van 'n paneel vir 'n blad afgeleë op die vlieg. selectedxA0 Die nul-gebaseerde indeks van die paneel wat gekies word (oop). Instelling gekies om -1 sal val al die panele. Dit vereis die opvoubare opsie om waar te wees. spinnerxA0 Die HTML-inhoud te wys in 'n blad titel terwyl afgeleë inhoud laai. Stel hierdie opsie om 'n leë string om die draaibouler gedrag deaktiveer. 'N span element moet teenwoordig wees in die anker tag van die titel wees vir die draaier inhoud sigbaar wees. tabTemplatexA0 HTML sjabloon waaruit 'n nuwe blad geskep en bygevoeg. Die plekhouers en vervang met die URL en blad etiket wat geslaag as argumente om die metode byvoeging (). Metodes aborteer () gee terug: jQuery (net plugin) beëindig alle aktiewe blad Ajax versoeke en animasies. Hierdie metode aanvaar geen arguments. Tabs Widget Sleutelbord interaksie Wanneer daar gefokus op 'n blad, die volgende belangrike opdragte is beskikbaar: UP / links. Beweeg fokus op die vorige blad. As op die eerste blad, beweeg fokus om laaste blad. Aktiveer gefokus blad na 'n kort vertraging. DOWN / regs. Beweeg fokus op die volgende blad. As verlede blad, beweeg fokus om eerste blad. Aktiveer gefokus blad na 'n kort vertraging. Ctrl UP / links. Beweeg fokus op die vorige blad. As op die eerste blad, beweeg fokus om laaste blad. Die blad gefokus moet met die hand geaktiveer. Ctrl DOWN / regs. Beweeg fokus op die volgende blad. As verlede blad, beweeg fokus om eerste blad. Die blad gefokus moet met die hand geaktiveer. HOME. Beweeg fokus op die eerste blad. Aktiveer gefokus blad na 'n kort vertraging. EINDE. Beweeg fokus op die laaste blad. Aktiveer gefokus blad na 'n kort vertraging. Ctrl HOME. Beweeg fokus op die eerste blad. Die blad gefokus moet met die hand geaktiveer. Ctrl EINDE. Beweeg fokus op die laaste blad. Die blad gefokus moet met die hand geaktiveer. SPACE. Aktiveer paneel wat verband hou met gefokusde blad. Enter. Aktiveer of paneel wat verband hou met gefokusde blad wissel. ALT / OPSIE bladsy begin. Beweeg fokus op die vorige blad en onmiddellik te aktiveer. ALT / OPSIE Page Down. Beweeg fokus op die volgende blad en onmiddellik te aktiveer. Wanneer daar gefokus op 'n paneel, die volgende belangrike opdragte is beskikbaar: ctrl UP. Beweeg fokus om geassosieer blad. ALT / OPSIE bladsy begin. Beweeg fokus op die vorige blad en onmiddellik te aktiveer. ALT / OPSIE Page Down. Beweeg fokus op die volgende blad en onmiddellik te aktiveer. Thematiek Die oortjies widget gebruik die jQuery UI aangevra om sy blik styl en voel. As oortjies spesifieke stilering is nodig, kan die volgende CSS klas name gebruik word vir oorheers of as sleutels vir die opsie-klasse: ui-oortjies. Die buitehouer van die oortjies. Hierdie element sal addisioneel 'n klas van UI-oortjies-opvoubare wanneer die opvoubare opsie is ingestel. ui-oortjies-nav. Die lys van oortjies. ui-oortjies-blad. Een van die items in die lys van tabs. The aktiewe item sal die ui-oortjies-aktiewe klas. Enige lys item waarvan die gepaardgaande inhoud laai via 'n Ajax oproep sal die ui-oortjies aflaai klas. ui-oortjies-anker. Die ankers gebruik om panele te skakel. ui-oortjies-paneel. Die panele wat verband hou met die oortjies. Slegs die paneel wie se ooreenstemmende blad aktief sal sigbaar wees. Afhanklikhede addisionele notas: Hierdie widget vereis 'n paar funksionele CSS, anders is dit wonapost werk. As jy 'n persoonlike tema te bou, gebruik die widgetaposs spesifieke CSS-lêer as 'n beginpunt. Opsies activexA0 Watter paneel is tans oop. Verskeie vorme ondersteun: Boolean. Die opstel van aktiewe vals sal val al die panele. Dit vereis die opvoubare opsie om waar te wees. Heelgetal . Die nul-gebaseerde indeks van die paneel wat aktief is (oop). 'N negatiewe waarde kies panele gaan agteruit van die laaste paneel. Kode voorbeelde: Inisialiseer die oortjies met die aktiewe opsie gespesifiseer: Tabs API Herontwerp voort te gaan met die API herontwerp. Ons het 'n paar veranderinge beplan vir die oortjies widget. Ons weet dat API veranderinge soos hierdie is nie sonder koste vir ons gebruikers, sodat we8217d graag duidelik maak dat behalwe waar spesifiek aangedui, sal jQuery UI oortjies in 1.9 die 1,8 API ondersteun, asook, en die afgekeur API sal nie verwyder word totdat jQuery UI 2.0. API Herontwerp Verwyder rotasie. Die draai metode sal verwyder word as dit nie baie algemeen en was nog altyd geïmplementeer as 'n ingeboude uitbreiding in elk geval. Dit sal eintlik nie wankel nie, nie net afgekeur in 1.9, aangesien dit nog altyd bestaan ​​het as 'n uitbreiding. Christopher McCulloh het 'n verbeterde rotasie uitbreiding gebaseer op die oorspronklike kode. Opknapping Ajax oortjies Die ajaxOptions en kas opsies word verwyder ten gunste van 'n nuwe gebeurtenis: beforeload. Die beforeload geleentheid sal 'n jqXHR voorwerp en die doel instellings wat sal deurgegee word aan jQuery. ajax () ontvang. ajaxOptions vervang deur die wysiging van die instellings geslaag om beforeload en caching geïmplementeer kan word deur te bel event. preventDefault () om die Ajax oproep te voorkom en te spring reguit na vertoon op die blad. Ons sal ook die behoud van die href kenmerk onveranderde en die stoor van die ID-paneel in die aria-kontroles toe te skryf. Die aria-kontroles kenmerk sal ingestel word vir alle oortjies, ongeag of hulle plaaslike of afgeleë. Dit sal die behoefte aan die url metode, wat ook verwyder word verwyder. Dit sal moontlik wees om vooraf definieer 'n waarde in die aria-kontroles waarde vir afgeleë oortjies, die verwydering van die behoefte om die plek in die titel kenmerk (wat ook verwyder word) spesifiseer. Die Staak metode sal verwyder word aangesien die jqXHR voorwerp direk toeganklik sal wees en jy kan dus die Ajax oproep direk staak. Nog 'n voordeel van die beforeload geval is wanneer dit saam met die bestaande vrag geval, kan jy persoonlike laai funksies te skep as sulks ons die opsie draaier te verwyder. Gekies teen aktiewe Ten einde konsekwentheid binne die jQuery UI suite verbeter, kies / gekeur word nie, herdoop te aktiveer / aktiewe oor die raad. Wat beteken dit vir oortjies is dat die gekose opsie sal hernoem word om aktief. die kies gebeurtenis sal hernoem om beforeactivate. en die show geleentheid sal herdoop te aktiveer. Die beforeactivate en aktiveer opsies sluit verwysings na die blad en inhoud paneel vir die ou en nuwe oortjies, soortgelyk aan trekklavier. Daarbenewens sal die kies metode verwyder ten gunste van die oprigting van die aktiewe opsie. Laastens sal die deselectable opsie verwyder in 1.9, aangesien dit is afgekeur in 1.8. Verwyder template Alle opsies wat verband hou met template word verwyder. Die template in oortjies is 'n eenmalige implementering en skep 'n teenstrydigheid met die res van jQuery UI. Hierdie verandering sluit die verwydering van die idPrefix. tabTemplate. en panelTemplate opsies. Voeg en te verwyder oortjies Die byvoeg en verwyder metodes sal verwyder word ten gunste van 'n nuwe verfris metode. Dit is in ooreenstemming met hoe nuwe plugins opgedateer na inisialisering. hierdie metodes verwydering beteken ook dat die voeg en te verwyder gebeure word verwyder. Aktiveer of te deaktiveer oortjies Oortjies sal behoorlik ondersteun aanskakel individuele tabs of die hele blad stel. 'N Titel gebruik kan word om die hele stel skakel of 'n reeks van indekse kan voorsien word om individuele oortjies te skakel. Daarbenewens sal die staat en afskakel gebeure verwyder word vir konsekwentheid met ander widgets. Verwyder lengte metode Die lengte metode sal verwyder word as dit baie doel doesn8217t dien en kan maklik bereken deur die tel van die aantal lys items. Verwyder koekie opsie Die opsie koekie sal verwyder word as koekie ondersteuning is nie die kern van die prop. Kruis-bladsy staatsbestuur moet maklik wees, maar nie 'n ingeboude wees. Ontwerp veranderinge steeds in vloed Daar is 'n paar dinge wat ons nog haven8217t ten volle uitgewerk. Ons beplan om die vervanging van die fx opsie met show en verberg opsies vir konsekwentheid met ander widgets, maar is nog steeds besig om deur middel van 'n oop kwessie van hoe om effekte oor plugins ondersteun. Ons wil ook graag die vrag metode te verwyder, maar ons moet seker maak dat dit gebou kan word as 'n uitbreiding. Totdat ons in die nuwe implementering, won8217t ons weet of dit moontlik indien it8217s nie, die las metode sal in die prop bly. Terugvoer We8217d graag jou terugvoer oor hierdie veranderinge te hoor. Ons wil seker maak dat ons aan te spreek enige probleme die gemeenskap kan hê voordat ons finaliseer en hierdie veranderinge te implementeer. Indien u enige terugvoer, post dit op die verwante forum post. Dankie. Kommentaar is closed. Tabs - Inleiding tot jQuery UI - Deel 2 Web Developer kursusse Duur. 18 minute Opsomming. In hierdie video, gaan ons voort ons bespreking van jQuery UI. In die vorige video, ek jou gewys het hoe om af te laai jQuery UI en stel die skrifte behoorlik om jou funksies om te werk. Hier is ons die voortsetting van ons gesprek oor oortjies. Gewoonlik wanneer jy leer om 'n jQuery UI widget, is daar drie items wat jy nodig het om te leer: opsies, gebeure, en metodes. Ek sal gaan oor elkeen van hulle en wys jou die sintaksis nodig. Daar is baie opsies wat jy kan verander na 'n blad. Byvoorbeeld: gestremdes, opvoubare, gebeurtenis, en fx. Vir die metodes en gebeure, sal ek jou wys voorbeelde vir die skep, kies, ad verwyder. Metodiek van die ontwikkeling van byvoorbeeld. Goeie kodering standaard en vereenvoudigde ontwerp om die belangrike punte te illustreer. Tegnologie wat gebruik word. jQuery UI en Visual Studio 2010 Sleutelwoord: jQuery UI, Visual Studio 2010, funksie, blad, gestremdes, opvoubare, gebeurtenis, fx, waarskuwing, skep, kies. Transcript: Welkom terug, almal. Dit is Ayad Boudiab. Ek is 'n Senior Application Developer, en ons is die voortsetting van ons kursus oor jQuery UI. In die vorige video, het ons deur die stappe. Ek het begin deur 'n voorbeeld van die laai van 'n blad, en dan het ek terug om te verduidelik aan mekaar wat ons nodig het om jQuery UI kry saam met ons lêers, ons projekte, of wat jy het. In die video, verduidelik ek vir julle wat ek nodig het so ver as die skrifte, byvoorbeeld, die jQuery en die jQuery UI, en ek het julle ook die rede waarom ons die CSS nodig het en hoe ons CSS van die jQuery UI webwerf kan bou met behulp van die ThemeRoller, en ek gelaai n blad. So tot op daardie punt, ek het die dollar teken pond hier om die spesifieke element genoem Tabs, wat hier is af te kry, en dan het ek oortjies funksie op dit. Nou, as jy hier scroll down, sal jy agterkom dat ek 'n div met ID oortjies, on-geordende lyste, en elkeen van daardie lys items is die verwysing na die div onder. Deur hierdie eenvoudig dat, kan ek laai dit, en nou het ek 'n blad met behulp van die tema wat ek gekies het, en ek kan wissel tussen die tabs op my skerm. Nou kan neem wat 'n stap verder en bespreek meer besonderhede oor die oortjies. Wat funksie hoef oortjies voorsiening te maak vir my Na alles, moet daar 'n paar opsies om voorsiening te maak vir my om dinge te draai op en af. Daar moet 'n paar gebeure wat kan veroorsaak, byvoorbeeld, wanneer die blad geskep of wanneer 'n spesifieke blad gekies. Ook, watter metodes kan ek noem, byvoorbeeld, kan ek 'n blad te verwyder, sodat hierdie funksies word verskaf aan ons, en jy kan hulle almal te vind in die jQuery UI dokumentasie, maar hulle is aan ons voorsien, en ons sal deur hulle in hierdie video en kyk hoe ons kan werk met hulle. Dus laat blaai hier vir 'n tweede en laat kyk na die oortjies. Nou is daar 'n paar opsies wat ek kan gee aan die blad funksionaliteit. Diegene opsies word binne krullerige draadjies. So ek maak oop en toe krullerige draadjies, en ek bied opsies om die oortjies. Byvoorbeeld, by verstek, die blad is aangeskakel. Natuurlik, ek was in staat om te klik op die oortjies en gaan deur hulle soos ek jou vroeër gewys. Maar ek het 'n opsie om te skakel 'n blad. Dus laat sien wat ons hier kan doen. Skakel, waar is. Ek het die oortjies afgeskakel. Regs kliek, sien in die leser. Nou is dit afgeskakel. Dit wys my al drie tabs gelyktydig, en ek kan nie op hulle. Niks gebeur. Alhoewel, as jy kyk hier in die URL, sal jy kennis toe ek die eerste klik op, kry ek die klas een, toe ek op die tweede, klas twee, en die derde een, klas drie. Maar niks gebeur, reg Al die oortjies word vertoon, en ek is nie in staat om oor te skakel tussen hulle. Dit is omdat die oortjies is afgeskakel. Dis een van die opsies wat ek kan voorsiening te maak vir die oortjies. Wat ander opsies kan ek voorsien ek kan die betrokke blad opvoubare maak. So kan ek so iets opvoubare ware sê. Regs kliek en sien in die leser. Ek kan wissel deur die oortjies, maar die oortjies moet in so 'n geval opvoubare. Wanneer die oortjies gelaai, sien jy niks anders. Ek kan wissel tussen een blad en die volgende. Maar kan sê Im kliek op die derde. Klik op die derde weer, en weer, nou sien jy dat 'n spesifieke blad is opvoubare. So dis ook een van die opsies wat ek kan gee aan die oortjies. Kom ons neem die opsie opvoubare en hou dit na die manier waarop dit was. Regskliek op dit en sien in die leser. Jy sal sien dat wanneer Im oor hulle beweeg, sien ek 'n paar van die CSS verander. Maar ek klik op die tweede na die tweede blad laai, ek klik op die derde tot die derde blad, en dieselfde ding op die eerste laai. So deur te kliek, Im laai van 'n spesifieke blad. Nou is die vraag wat opsie wat ek kan gee om die betrokke blad opdaag nie deur te kliek op dit, maar deur beweeg word oor dit. Dus laat sien hoe ons dit kan doen. Gaan terug na die oortjies, Ek het die opsies wat hier verskaf word binne die krullerige draadjies, en dan kan ek sê die geleentheid wat ek nodig het in hierdie geval is, en die naam gebeurtenis word deur string, kan jy dubbel kodes gebruik in JavaScript, maar sy konsekwent te bly met enkele kodes. So indien Im belangstel in hierdie geval is mouse over, want die wyserhanggeleentheid my sal toelaat om Beweeg oor 'n spesifieke blad in plaas van te klik. Dus laat regs kliek op dit en voorskou in die leser. Jy sal sien dat Ek is nie te klik, Im net skakel my muis oor die oortjies, en hulle is oor te skakel van die een na die ander. Dis die mouse over Indien kry geaktiveer in plaas van die kliek gebeurtenis om 'n spesifieke blad oop te maak. So dis die mouse over opsie wat ek vir daardie spesifieke blad kan hê. Nou, watter ander funksies moet ek ek kan sommige animasie voeg vir die wegkruip en vertoning van die blad panele. Waar is dit weer beskikbaar, Im op soek deur die dokumentasie wat my voorsien al hierdie funksies. So ek het die rugsteun en ek het om te gaan deur middel van die dokumentasie en uit te vind wat die beskikbare funksies is vir 'n spesifieke widget, in hierdie geval die blad, en probeer om te werk met hierdie funksie om te sien wat ek kan doen met dit. Byvoorbeeld, een van die opsies is die FX opsie. Dit FX opsie sal my help sommige animasie. Dus laat sien hoe dis gaan gebeur. Nou is die FX opsie is 'n bietjie betrokke. In hierdie geval toe ek sê vir die oop en toe krullerige draadjies verskaf, en ek gee FX, nou ek moet die opsies wat beskikbaar is vir FX bied. So ek het 'n kolon in daar te vestig, en ook nie 'n oop en toe krullerige brace. Wat is die opsies wat ek het daar byvoorbeeld ek het die ondeursigtigheid, dis een van die opsies wat ek kan hê, en ek het dit aan omgeschakeld. So wissel die ondeursigtigheid. Ook die hoogte, ek wil dat om te wissel. Ook, die breedte, ek wil dat omgeschakeld. Toe ek die FX met sy opsies, en dan het ek die FX as 'n opsie in die oortjies. Kom ons gaan voort en laai dit, sien in die leser, en youll kennisgewing wanneer ek op 'n spesifieke blad, hoe dis gebeur in terme van Reguliere die ondeursigtigheid jy sien die ondeursigtigheid word omgeschakeld En ook, die breedte en die hoogte word omgeschakeld. Nou kan teruggaan en neem dit 'n stap verder. Vir die FX in hierdie geval, kan jy hierdie opsie verwyder. Vir die FX, ek wil 'n skikking van twee dinge te verskaf - 'n stel van funksies vir wegkruip en een stel van die funksies vir die vertoon. So ek hierdie voorsien binne die vierkantige hakies, sy 'n skikking immers reg so ek het 'n stel van opsies, komma, 'n ander stel van opsies. Nou, die eerste stel van opsies is vir wegkruip, en die tweede stel opsies is vir die vertoon. So weer, nou kan ek my opsies bied. Gaan terug na die ondeursigtigheid. Ek wil ondeursigtigheid te wissel. Dan wil ek die duur om te stadig wees. Dis vir die eerste stel. So vir die eerste een, wat wegkruip, ek verskaf die ondeursigtigheid te wissel en die duur stadig te wees.