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

JQuery UI Tab opcija programmā Dreamweaver ļauj viegli pievienot paneļu sēriju, kas parāda vai paslēpj saturu, kas atbilst cilņu sērijai. Līdzīgi kā saliekamie paneļi, šī jQuery UI funkcija ļauj pārlūkprogrammas logā parādīt vairāk informācijas mazākā vietā.

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

Līdzīgi kā akordeona paneļos, paneļus ar cilnēm var izmantot teksta, attēlu un multivides attēlošanai.

Veidojot ciļņu paneļus ar jQuery UI logrīku programmā Dreamweaver, varat norādīt ciļņu secību, efektīvi kontrolējot, kāds saturs tiek parādīts, kad lapa tiek pirmoreiz ielādēta.

Veiciet šīs darbības, lai izveidotu paneļu grupu ar cilnēm:

Novietojiet kursoru uz lapas, kurā vēlaties parādīt paneli ar cilnēm.

Izvēlieties Ievietot → jQuery UI → Cilnes vai noklikšķiniet uz vienuma Tabs panelī jQuery UI ievietošana.

Lapā tiek ievietots panelis ar cilnēm, un attiecīgie CSS faili tiek parādīti panelī CSS Designer Source.

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

Galvenajā darbvietā pēc kārtas atlasiet Tab1, Tab2 un Tab 3 tekstu un pēc tam aizstājiet katras cilnes virsrakstu ar tekstu, kuru vēlaties rādīt paneļa ciļņu apgabalā.

Cilņu saturu var rediģēt tikai darbvietā, nevis īpašumu inspektorā. Pēc noklusējuma teksts cilnes apgabalā ir trekns un melns, taču jūs varat mainīt šo formatējumu, mainot atbilstošo CSS kārtulu.

Lai pielāgotu katras cilnes izmēru, atlasiet cilni un pēc tam izmantojiet Rekvizītu inspektora iestatījumus Augstums un Platums.

Ja ir atlasīta atsevišķa cilne, Īpašuma inspektors parāda šīs cilnes iestatījumus.

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

Lai pievienotu saturu, jebkuras atlasītās cilnes paneļa galvenajā apgabalā atlasiet vārdu Saturs un pēc tam ievadiet tekstu, attēlus vai multividi.

Varat kopēt tekstu panelī, ielīmējot to tāpat, kā ielīmētu tekstu jebkurā citā lapas vietā. Līdzīgi ievietojiet attēlus paneļos tāpat kā jebkur citur lapā: izvēlieties Ievietot → Attēls → Attēls un pēc tam atlasiet GIF, JPEG vai PNG failu, kuru vēlaties parādīt. Varat arī pievienot multivides vai Photoshop failus, ja vēlaties attēlu optimizēšanai izmantot programmu Dreamweaver.

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

Piemēram, lai rediģētu teksta krāsu vai fontu cilnēs, atlasiet lodziņu ap cilni, un lodziņš ap stilu tiek automātiski atlasīts panelī CSS Designer Selector.

Lai rediģētu cilņu paneļu skaitu vai secību, noklikšķiniet uz zilās cilnes jQuery Tabs paneļa augšpusē, kas atrodas noformējuma apgabalā.

Noklikšķinot uz zilās cilnes, rekvizītu inspektorā tiek parādīti paneļa iestatījumi. Noklikšķiniet ārpus zilā lodziņa apgabala, un īpašuma inspektors atgriežas tā noklusējuma iestatījumos.

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

Lai pievienotu cilnes, īpašumu inspektorā noklikšķiniet uz pluszīmes (+) ikonas.

Darbvietā tiek parādītas jaunas cilnes.

Lai mainītu ciļņu secību, rekvizītu inspektorā atlasiet cilnes nosaukumu un pēc tam izmantojiet bultiņas laukā Paneļi, lai pārvietotu paneli.

Mainot secību, paneļu nosaukumi izvēlnē tiek pārvietoti uz augšu un uz leju. Paneļi un tiem atbilstošās cilnes tiek rādītas tīmekļa lapā tādā secībā, kādā tās tiek rādītas Īpašuma inspektorā.

Nolaižamajā sarakstā Paneļi atlasiet paneli, kuru vēlaties parādīt, kad lapa tiek ielādēta tīmekļa pārlūkprogrammā.

Nolaižamais saraksts atbilst nosaukumiem, ko piešķirat katrai darbvietas cilnei.

Izvēlieties Fails → Saglabāt, lai saglabātu lapu; kad tiek parādīts dialoglodziņš Copy Dependent Files, noklikšķiniet uz Labi, lai automātiski ģenerētu visus saistītos failus.

Lai jQuery UI līdzekļi darbotos, šie faili ir jāaugšupielādē savā tīmekļa serverī, kad augšupielādējat tīmekļa lapu.

Noklikšķiniet uz globusa ikonas darbvietas augšdaļā un atlasiet pārlūkprogrammu, lai pārlūkprogrammā priekšskatītu savu darbu.

Atkarībā no jūsu tīmekļa pārlūkprogrammas, iespējams, jums būs jāļauj ActiveX vadīklām priekšskatīt lapu jūsu datorā.

Leave a Comment

Photoshop CS6 viss vienā, lai LuckyTemplates apkrāptu lapa

Photoshop CS6 viss vienā, lai LuckyTemplates apkrāptu lapa

Photoshop CS6 saglabā visas iepriekšējo versiju funkcijas un pievieno jaunas, nodrošinot labāku lietotāja pieredzi, radošumu un produktivitāti. Iepazīstiet jaunas rīku iespējas un komandas.

Kā sapludināt slāņus programmā Photoshop CS6

Kā sapludināt slāņus programmā Photoshop CS6

Uzziniet, kā efektīvi sapludināt slāņus programmā Photoshop CS6, lai samazinātu faila izmēru un uzlabotu veiktspēju, izmantojot slāņu sapludināšanu un attēla saplacināšanu.

Kā SVG failiem piemērot caurspīdīgumu

Kā SVG failiem piemērot caurspīdīgumu

Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.

Darbs ar attēliem programmā Adobe XD

Darbs ar attēliem programmā Adobe XD

Kad esat importējis savus attēlus programmā Adobe XD, jums nav lielas rediģēšanas vadības iespējas, taču varat mainīt attēlu izmērus un pagriezt tos tāpat kā jebkuru citu formu. Varat arī viegli noapaļot importēta attēla stūrus, izmantojot stūra logrīkus. Attēlu maskēšana Nosakot slēgtu formu […]

Kā pielāgot teksta rekvizītus programmā Adobe XD

Kā pielāgot teksta rekvizītus programmā Adobe XD

Kad jūsu Adobe XD projektā ir teksts, varat sākt mainīt teksta rekvizītus. Šie rekvizīti ietver fontu saimi, fonta lielumu, fonta svaru, līdzinājumu, rakstzīmju atstarpes (rindstarpas un izsekošanu), rindstarpu (vadošais), aizpildījumu, apmali (pārvilkšanu), ēnu (krītošā ēna) un fona aizmiglojumu. Tātad, apskatīsim, kā šie rekvizīti tiek piemēroti. Par lasāmību un fontu […]

Darbs ar planšetdatoriem programmā Photoshop CC

Darbs ar planšetdatoriem programmā Photoshop CC

Tāpat kā programmā Adobe Illustrator, Photoshop zīmējumu dēļi nodrošina iespēju vienā dokumentā izveidot atsevišķas lapas vai ekrānus. Tas var būt īpaši noderīgi, ja veidojat ekrānus mobilajai lietojumprogrammai vai nelielai brošūrai. Jūs varat domāt par zīmējumu dēli kā īpašu slāņu grupas veidu, kas izveidots, izmantojot paneli Slāņi. Tā […]

Formas un daudzstūri programmā InDesign

Formas un daudzstūri programmā InDesign

Daudzi rīki, kas atrodami panelī InDesign Tools, tiek izmantoti līniju un formu zīmēšanai lapā, tāpēc jums ir vairāki veidi, kā izveidot interesantus zīmējumus savām publikācijām. Programmā InDesign varat izveidot jebko, sākot no pamata formām līdz sarežģītiem zīmējumiem, tā vietā, lai izmantotu zīmēšanas programmu, piemēram, […]

Aplauzt tekstu programmā Adobe Illustrator CC

Aplauzt tekstu programmā Adobe Illustrator CC

Teksta iesaiņošana programmā Adobe Illustrator CC nav gluži tas pats, kas dāvanas iesaiņošana — tas ir vienkāršāk! Teksta aplaušana liek tekstam aptīt grafiku, kā parādīts šajā attēlā. Šī funkcija var pievienot mazliet radošuma jebkuram gabalam. Grafika liek tekstam aptīt to. Vispirms izveidojiet […]

Kā mainīt formu izmēru programmā Illustrator

Kā mainīt formu izmēru programmā Illustrator

Veidojot dizainu programmā Adobe Illustrator CC, bieži vien ir nepieciešams precīzs izmērs (piemēram, 2 x 3 collas). Pēc formas izveides vislabākais veids, kā mainīt tās izmērus precīziem izmēriem, ir izmantot pārveidošanas paneli, kas parādīts šajā attēlā. Atlasiet objektu un pēc tam izvēlieties Logs → Transform to […]

Kā izveidot QR kodus programmā InDesign CC

Kā izveidot QR kodus programmā InDesign CC

Varat izmantot programmu InDesign, lai izveidotu un modificētu QR koda grafiku. QR kodi ir svītrkoda veids, kurā var saglabāt informāciju, piemēram, vārdus, ciparus, URL vai cita veida datus. Lietotājs skenē QR kodu, izmantojot savu kameru un programmatūru ierīcē, piemēram, viedtālrunī, un programmatūra izmanto […]