Kā izveidot saliekamus paneļus, izmantojot jQuery programmā Dreamweaver

JQuery UI akordeona logrīks programmā Dreamweaver ļauj viegli pievienot saliekamus paneļus, kurus vietnes apmeklētāji var atvērt un aizvērt, neatsvaidzinot tīmekļa lapu. Šī jQuery funkcija ļauj labāk izmantot lapas vietu, pārlūkprogrammas logā parādot vairāk informācijas mazākā vietā.

Šajā dabas vietnē varat redzēt, kā akordeona saliekamajos paneļos ir katra dziedātāja vārds, fotoattēls un dzīvotnes preferences. Rezultāts ir tāds, ka vienā lapā varat viegli redzēt visu putnu vārdus. Lai skatītu jebkura putna aprakstu, lietotājam ir jānoklikšķina tikai uz cilnes paneļa augšdaļā (kur parādās putna nosaukums), un panelis tiek atvērts uzreiz.

Oranži vainagotās stīgas foto un apraksts ir atvērts, kamēr pārējie lapā ir aizvērti. JQuery skaistums ir tāds, ka lapa nav atkārtoti jāielādē, lai paneļi tiktu atvērti vai aizvērti. Vienreiz noklikšķiniet uz cilnes, un uzreiz tiks atvērts panelis. Noklikšķiniet uz citas cilnes, un šis panelis tiks atvērts, aizverot iepriekš atvērto paneli.

Saliekamos paneļus var izmantot, lai parādītu tekstu un attēlus, kā arī multivides failus, piemēram, audio, video un Flash failus.

Lai skatītu akordeona paneli (vai daudzas citas papildu funkcijas programmā Dreamweaver), kā tas būs redzams tīmekļa pārlūkprogrammā, Dreamweaver darbvietas augšējā kreisajā stūrī ir jānoklikšķina uz pogas Tiešais skats.

Kad esat izveidojis akordeona paneļu kopu ar jQuery UI izvēlni programmā Dreamweaver, varat mainīt vairākus paneļa iestatījumus, izmantojot īpašumu inspektoru, kā parādīts tālāk sniegtajos norādījumos.

Lai izveidotu akordeona paneļu komplektu, veiciet šīs darbības:

Novietojiet kursoru uz lapas, kur vēlaties parādīt akordeona paneļus.

Izvēlieties Ievietot → jQuery UI → Akordeons vai noklikšķiniet uz vienuma Akordeons jQuery UI ievietošanas panelī.

Lapā tiek parādīta jQuery UI saliekamā akordeona paneļu grupa ar trim paneļiem.

Katra paneļa augšdaļā atlasiet vārdu Sadaļa un aizstājiet to ar tekstu, kuru vēlaties rādīt paneļa cilnes apgabalā.

Pēc noklusējuma teksts cilnes apgabalā ir vienkāršs teksts, taču to var mainīt, mainot atbilstošo CSS kārtulu vai formatējot tekstu, izmantojot HTML tagus, piemēram, virsrakstu tagus.

Katra paneļa galvenajā apgabalā atlasiet vārdu Saturs un ievadiet jebkuru tekstu vai attēlu, ko vēlaties parādīt.

Jūs varat ielīmēt tekstu panelī tāpat kā jūs ielīmētu tekstu jebkurā citā lapas vietā. Līdzīgi attēlus ievietojat paneļos tāpat kā jebkur citur lapā: novietojiet kursoru panelī, izvēlieties Ievietot → Attēls → Attēls un atlasiet GIF, JPEG vai PNG failu, kuru vēlaties parādīt. Varat arī atlasīt Photoshop failu, ja attēlu optimizēšanai vēlaties izmantot programmu Dreamweaver.

Ielīmējot tekstu panelī, izvēlieties Rediģēt → Īpaši ielīmēt, lai izvēlētos formatējuma apjomu, ko vēlaties saglabāt programmā Dreamweaver ielīmētajā tekstā. Saglabājamā formatējuma daudzuma ierobežošana var samazināt iespējamos stila konfliktus.

Lai mainītu paneļa iestatījumus, noformējuma apgabalā paneļu augšpusē noklikšķiniet uz zilās cilnes jQuery Accordion.

Noklikšķinot uz zilās cilnes, rekvizītu inspektorā tiek parādīti paneļa iestatījumi. (Pareiza noklikšķināšana uz zilās cilnes var būt sarežģīta, tāpēc noteikti noklikšķiniet uz zilā apgabala.) Noklikšķiniet jebkurā citā lapas vietā, un inspektors atgriezīsies pie noklusējuma iestatījumiem.

Pievienojiet vai noņemiet paneļus, izmantojot īpašumu inspektora lauku Paneļi.

Lai pievienotu paneli, noklikšķiniet uz pluszīmes (+) pa labi no lauka Paneļi. Lai noņemtu paneli no akordeona komplekta, vispirms atlasiet paneļa nosaukumu Īpašuma inspektora nolaižamajā sarakstā Paneļi un pēc tam noklikšķiniet uz mīnusa zīmes (@@min).

Varat pievienot citu paneli, vēlreiz noklikšķinot uz pluszīmes.

Mainiet paneļu atvēršanas veidu, izmantojot nolaižamo izvēlni Notikums.

Notikuma iestatījumi nosaka, vai paneļi tiek atvērti, kad lietotājs noklikšķina uz paneļa cilnes (noklikšķināt) vai virza kursoru virs paneļa cilnes (virziet peles kursoru).

Iestatiet citas paneļa opcijas, ja vēlaties.

Īpašuma inspektora akordeona opcijas nav obligātas, un tās ietver iespēju atspējot jebkuru vai visus paneļus (Atspējot) un animēt paneļu atvēršanas un aizvēršanas veidu (nolaižamais saraksts Animēt).

Izvēlieties Fails → Saglabāt, lai saglabātu lapu; kad tiek parādīts dialoglodziņš Atkarīgo failu kopēšana, noklikšķiniet uz Labi, lai ģenerētu visus saistītos failus.

Lai Spry funkcijas darbotos, šie faili ir jāaugšupielādē savā tīmekļa serverī, kad augšupielādējat tīmekļa lapu.

Lai mainītu paneļa izskatu, piemēram, fonta seju vai teksta krāsu, rediģējiet atbilstošo CSS kārtulu.

Piezīme. Jūs nevarat rediģēt atbilstošos akordeona paneļa stilus, kamēr lapa nav saglabāta un Dreamweaver nav ģenerējis atbilstošos CSS un JavaScript failus.

Lai redzētu, kā paneļi parādīsies tīmekļa pārlūkprogrammā, darbvietas augšdaļā noklikšķiniet uz globusa ikonas un atlasiet pārlūkprogrammu, kuru vēlaties izmantot lapas priekšskatīšanai.

Ja izmantojat datoru, lai priekšskatītu lapu, kurai ir interaktīva funkcija, kurai nepieciešama JavaScript vai cita programmēšana, dažas tīmekļa pārlūkprogrammas, tostarp Internet Explorer, parādīs brīdinājumu, ka jums ir jāļauj ActiveX vadīklām, lai skatītu lapu.

Šis ir drošības brīdinājums, kas parādās tikai tad, kad lapa tiek atvērta tajā pašā datorā, kurā lapa ir saglabāta. Ja publicējat lapu tīmekļa serverī un pēc tam skatāt to, izmantojot interneta savienojumu, šī kļūda netiks parādīta jums vai jūsu vietnes apmeklētājiem.