Jquery ui fungerar inte. Ansluter jQuery UI. Ansluta jQuery UI-biblioteket till ett HTML-dokument

Fördelen med denna metod är att många webbplatser ansluter jQuery via Googles API, vilket innebär att det här biblioteket med stor sannolikhet redan finns i användarens webbläsarcache, och det kommer inte att laddas en andra gång alls.

jQuery ingår automatiskt i WordPress, så det finns inget behov av att manuellt inkludera bibliotek från andra versioner. Detta händer i mallen med hjälp av php-kod:

Detta kommer att resultera i en jQuery-anslutningssträng inuti HEAD-taggen.

I skrivande stund kommer jQuery v1.12.4 med WordPress Men som du kan se är versionen av biblioteket mycket annorlunda än den som ingår i exemplen ovan. Det är möjligt att ansluta den senaste versionen av biblioteket, men det finns risk för en konflikt.

För att undvika en konflikt, men ändå använda den version av biblioteket som behövs, måste du använda rätt sätt att inkludera jQuery i functions.php-filen:

Jag har inte skrivit något på bloggen på länge, och jag tog mig äntligen lite tid att prata om widgeten Autokomplettering, som ingick i jQuery UI, ett tillägg för jQuery JavaScript-biblioteket.

Autoslutför-widgeten hjälper till att organisera en lista med matchande värden när användaren fyller i ett inmatningsfält.

Först, låt oss besöka sidan på jQuery UI-webbplatsen för att få de filer vi behöver. Vi klickar på länken Avmarkera alla komponenter för att inte ladda ner onödiga saker och väljer sedan bara det vi behöver - kryssa i kryssrutan Autoslutför och se att kryssrutorna Core, Widget och Position är markerade tillsammans med den. Widgeten Autoslutförande beror på att dessa filer fungerar.

Dessutom finns det en rullgardinslista till höger där du kan välja ditt favoritdesigntema. Om allt är klart, klicka på knappen Ladda ner och hämta arkivet. Widgetens möjligheter kan bedömas på utvecklarens webbplats. Jag ska bara försöka förklara på ryska och på ett så enkelt språk som möjligt hur man får det hela att fungera.

Så först i HEAD-sektionen måste du ansluta flera filer som finns i arkivet.

Först inkluderade vi widgetstilfilen, sedan jQuery-biblioteksfilen. Den tredje inkluderade filen behövs för att implementera Autocomplete.

Widgeten Autoslutförande kräver inte komplex HTML-uppmärkning. Bara ett textinmatningsfält räcker, d.v.s. ett vanligt inmatningselement som har ett textvärde i sitt typattribut. Ytterligare markeringar kan läggas till för att utforma det enligt ditt valda tema.

Taggar:

Låt oss först titta på det enklaste fallet med att använda en widget - när lokal data används för att generera en lista med tips.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#taggar").autocomplete((källa: tillgängligaTaggar ));

En array med tips har förberetts i variabeln availableTags. Sedan valde vi inmatningselementet med dess identifierare och använde autocomplete-metoden, som omedelbart skickades ett objekt med inställningarna. För närvarande är detta ett objekt med en enda egenskap, source , som anger källan till data. I vårt fall är arrayen tillgängligaTags specificerad.

Faktum är att vi kan anpassa widgeten lite med hjälp av andra egenskaper för inställningsobjektet. Här är en lista över dessa egenskaper:

source – alternativet har inget standardvärde och måste definieras. Alternativvärdet kan vara en sträng, array eller funktion. I vilket fall som helst måste datakällan anges i detta alternativ.
minLength - standardvärdet är 1. Detta alternativ anger antalet tecken som måste anges i inmatningsfältet innan verktygstips aktiveras. Värdet 0 är användbart när du använder lokal data för listor med flera positioner. Detta värde bör ökas vid användning av förfrågningar till servern för att hämta data och vid användning av stora listor, där ett inmatat tecken kan motsvara flera tusen poster.
fördröjning – standardvärdet är 300. Det här alternativet anger antalet millisekunder som måste passera efter att du tryckt på nästa tangent för att begäran om att ta emot data ska aktiveras. Ett värde på noll är vettigt när du använder lokal data. När du använder serverfrågor kan ett nollvärde i detta alternativ orsaka allvarlig belastning
appendTo – standardvärde 'body'. Värdet på detta alternativ kan vara en jQuery-väljare. Bestämmer vilket element som listrutan med verktygstips ska läggas till.
inaktiverad – standardvärdet är falskt. Om den är inställd på sant, kommer widgetfunktionen för autoslutförande inte att vara tillgänglig vid initiering, men kan aktiveras senare, till exempel när något villkor är uppfyllt.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#tags").autocomplete((källa: tillgängligaTaggar, välj: function(event, ui) ( alert("Event: " + event.type + ",\nvalue: " + ui.item.value); ) ) ); ));

Här lade vi till en select-egenskap, där vi definierade en funktion som kommer att anropas när användaren väljer ett värde från listan med verktygstips. funktionen tar två argument: det första är ett händelseobjekt, det andra är ett speciellt ui-objekt. Genom att organisera tillgången till egenskaperna för dessa objekt kan du få användbar information (vi visar den i varningsfönstret).

Detta är inte den enda händelsen som widgeten kan svara på - här är en komplett lista över dem, som visar namnet på egenskapen i objektet med inställningar, namnet på händelsen i event.type och beskrivningen av händelsen:

skapa händelse skapa automatiskt inträffar vid initialiseringsögonblicket.
sök – händelse autoslutför sökning inträffar innan begäran verkställs. Om funktionen som definieras i det här alternativet returnerar false, kommer begäran inte att skickas.
öppet – event autoslutförande öppnas inträffar i det ögonblick då listrutan med tips öppnas.
fokus – händelse autoslutför fokus inträffar när ett av tipslistans objekt får fokus.
välj – händelse autoslutför val inträffar när ett av tipslistans objekt väljs.
nära – händelse autoslutför stäng inträffar när listan med tips stängs. Händelsen inträffar oavsett om något av objekten valdes eller inte.
förändring – händelse automatisk komplettering inträffar efter att ett av listobjekten har valts. Händelsen inträffar alltid efter stängning.

Widgeten har också några metoder med vilka du kan utöka dess funktionalitet ytterligare.

Lägg till exempel till ett par knappar i HTML-uppmärkningen:

Sök "som" Stäng Taggar:

Och här är JS-koden:

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP", "Python","Ruby","Scala","Scheme"]; ("#tags").autocomplete(( source: availableTags, minLength: 0 )); $("#search").click(function())( $("#tags").autocomplete("sök", " som "); )); $("#close").click(function())( $("#tags").autocomplete("stäng"); )); ));

Nu, genom att klicka på knappen Sök efter "som" kan vi simulera användarens handlingar som om han hade skrivit in tecknen "som" i inmatningselementet. Genom att klicka på knappen Stäng stänger vi listan med tips, om den har öppnats tidigare.

Nedan finns beskrivningar av alla tillgängliga metoder:

destroy – .autocomplete('destroy') tar helt bort all funktionalitet i autokompletteringswidgeten. Returnerar element till deras förinitieringstillstånd.
disable – .autocomplete(‘disable’) inaktiverar tillfälligt all widgetfunktionalitet. Du kan aktivera det igen med enable-metoden.
enable – .autocomplete('enable') tillåter användning av all widgetfunktion om den tidigare inaktiverats med inaktiveringsmetoden.
option – .autocomplete('option', optionName, ) med den här metoden kan du ställa in värdet för alla widgetalternativ efter initialisering.
option – .autocomplete('option', optionName) med den här metoden kan du få värdet av alla widgetalternativ efter initialisering.
widget – .autocomplete('widget') Denna metod kan användas för att komma åt ett objekt som representerar ett element med Autocomplete-funktionalitet.
search – .autocomplete('search, ') Med den här metoden kan du öppna hela listan utan att skicka den andra parametern. Om du skickar en teckensträng i den andra parametern kommer en lista med lämpliga tips att öppnas.
close – .autocomplete('stäng') stänger verktygstipslistan om den tidigare har öppnats.

I allmänhet vet vi nu hur man konfigurerar och hanterar widgeten, men hittills har vi uteslutande använt lokal data för att generera en lista med tips. Det är lämpligt för att utforska möjligheter, men osannolikt för riktigt arbete. I verkligt arbete kommer du förmodligen att behöva generera tips från data lagrad på din egen server, och kanske inte alls på egen hand

Källalternativet, som, låt mig påminna dig, är obligatoriskt och definierar datakällan, kan också acceptera en rad som innehåller webbadressen till vilken begäran ska skickas. Och i källkod kan du definiera din egen funktion som gör det du behöver. Detta är kanske den mest flexibla metoden som vi kommer att analysera. Låt oss försöka få lite data från geonames.org-servern i form av en lista med tips

Jag kommer att tillhandahålla en fullt fungerande kod och försöka förklara hur och vad som fungerar.

exempel-17-8-4 .ui-autocomplete-loading ( bakgrund: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") höger mitt no-repeat; ) #city ( width: 25em; ) #log ( höjd: 200px; bredd: 600px; overflow: auto; ) $(function() ( $("#city").autocomplete((källa: function(request,response) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: ( featureClass: "P", stil: "full", maxRows: 12, name_startsWith: request.term ) , framgång: function(data) ( response($.map(data.geonames, function(item) ( return ( label: item.name + ", " + item.countryName, value: item.name + " (" + item) .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, välj: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Inget valt!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ) ; )); Stad:
Stöds av geonames.org

Först tittar vi på HTML-uppmärkningen. I det första div-elementet är vi bara intresserade av input-elementet med id city . Här kommer vi att skriva in initialbokstäverna (på latin) för den ort som vi vill få information om. Vi använder div-elementet med identifierarloggen för att mata in den mottagna informationen i den.

Om vi ​​tittar på JavaScript-koden kommer vi att se att inställningsobjektet innehåller tre egenskaper - den nödvändiga källegenskapen, samt egenskaperna minLength och select.
Vi tar bara hänsyn till källegenskapen, där du kan skriva din egen funktion. Denna funktion tar två argument. Det första argumentet är request, ett objekt som innehåller en enda egenskap, term, som lagrar strängen som användaren anger i inmatningsfältet. Det andra argumentet är respons - en funktion med vilken det mottagna svaret kommer att behandlas.

Inuti funktionen som definieras i källegenskapen har vi nästan obegränsad handlingsfrihet. Och därför, utan vidare, skriver vi där en ajax-förfrågan till webbadressen http://ws.geonames.org/searchJSON, i alternativet dataType anger vi att vi förväntar oss att få data i JSON-format i svaret. I dataalternativet definierar vi ett objekt med begäran parametrar som kommer att skickas till den angivna url ( varför parametrarna är exakt så här - du måste titta på API-dokumentationen på geonames.org-servern). I den sista parametern skickar vi request.term – vad användaren skrev in.

I nästa alternativ av ajax-förfrågan - framgångsalternativet, kallar vi svarsbearbetningsfunktionen svar . I argumentet som vi skickar till den här funktionen kan vi behandla data som tas emot i serversvaret på vilket sätt vi vill. Vi använder metoden $.map för att tillämpa någon funktion på varje element i objektet som skickas i det första argumentet. Inuti funktionen kan vi komma åt egenskaperna för objektet - item.countryName, item.lng, item.lat ( varför egenskaperna är som de är - se API-dokumentationen som tillhandahålls av webbtjänsten). Funktionen vi skrev, för varje element, returnerar ett objekt som innehåller två egenskaper som vi definierat själva med den mottagna datan. Från den resulterande uppsättningen av sådana objekt konstrueras en lista med tips.

I allmänhet, något sånt här... Sammanfattningsvis en stor mänsklig begäran - i kommentarerna, snälla, kan du berömma eller skälla i princip. Om du vill ställa en teknisk fråga, ställ den på

Mer information om ämnet

Åtgärda problem med starthanteraren med hjälp av kommandoraden

Åtgärda problem med starthanteraren med hjälp av kommandoraden

Min telefon blev stulen - vad ska jag göra?

Min telefon blev stulen - vad ska jag göra?

Bootstrap - Skapa ett bildgalleri

Hur man automatiskt uppdaterar en sida i Yandex-webbläsaren Uppdatera automatiskt i Opera