Hvernig á að búa til samanbrjótanleg spjöld með jQuery í Dreamweaver

JQuery UI harmónikkugræjan í Dreamweaver gerir það auðvelt að bæta við samanbrjótanlegum spjöldum sem gestir síðunnar geta opnað og lokað án þess að endurnýja vefsíðuna. Þessi jQuery eiginleiki gerir þér kleift að nýta plássið á síðu betur með því að birta meiri upplýsingar á minna plássi í vafraglugga.

Þú getur séð hvernig samanbrjótanleg spjöld með harmonikku innihalda nafn, mynd og búsvæði hvers söngfugls á þessari náttúruvefsíðu. Niðurstaðan er sú að þú getur auðveldlega séð nöfn allra fuglanna á einni síðu. Til að skoða lýsingu á hvaða fugli sem er, þarf notandi aðeins að smella á flipann efst á spjaldinu (þar sem nafn fuglsins birtist) og spjaldið opnast samstundis.

Myndin og lýsingin á appelsínukrónunni er opin á meðan hinar á síðunni eru lokaðar. Fegurðin við jQuery er að ekki þarf að endurhlaða síðunni til að spjöldin opnist eða lokist. Smelltu einu sinni á flipa og spjaldið opnast samstundis. Smelltu á annan flipa og það spjald opnast þegar spjaldið sem áður var opnað lokar.

Hægt er að nota samanbrjótanlegar spjöld til að birta texta og myndir sem og margmiðlunarskrár eins og hljóð-, mynd- og Flash-skrár.

Til að skoða harmonikkuborð (eða marga aðra háþróaða eiginleika í Dreamweaver) eins og það mun birtast í vafra þarftu að smella á Live view hnappinn efst til vinstri á Dreamweaver vinnusvæðinu.

Eftir að þú hefur búið til sett af harmonikkuspjöldum með jQuery UI valmyndinni í Dreamweaver geturðu breytt fjölda pallborðsstillinga með því að nota Property Inspector, eins og sýnt er í leiðbeiningunum sem fylgja.

Fylgdu þessum skrefum til að búa til harmonikkuborðssett:

Settu bendilinn á síðu þar sem þú vilt að harmonikkuspjöldin birtist.

Veldu Insert→ jQuery UI→ Harmonika, eða smelltu á Harmonikku atriðið í jQuery UI Insert spjaldið.

Hópur jQuery UI samanbrjótanlegur harmonikkuborði með þremur spjöldum birtist á síðunni.

Veldu orðið Section efst á hverju spjaldi og skiptu því út fyrir textann sem þú vilt að birtist á flipasvæði spjaldsins.

Sjálfgefið er að textinn á flipasvæðinu er venjulegur texti, en þú getur breytt því með því að breyta samsvarandi CSS-reglu eða forsníða textann með HTML-merkjum, eins og fyrirsagnarmerkjum.

Veldu orðið Content á aðalsvæði hvers spjalds og sláðu inn hvaða texta eða myndir sem þú vilt sýna.

Þú getur límt texta inn á spjaldið alveg eins og þú myndir límta texta annars staðar á síðunni. Á sama hátt setur þú myndir inn í spjaldið eins og þú myndir gera annars staðar á síðunni: Settu bendilinn þinn á spjaldið, veldu Insert→ Image→Image, og veldu GIF, JPEG eða PNG skrána sem þú vilt sýna. Þú getur líka valið Photoshop skrá ef þú vilt nota Dreamweaver til að fínstilla myndir.

Þegar þú límir texta inn í spjaldið skaltu velja Edit→ Paste Special til að velja magn sniðs sem þú vilt varðveita í textanum sem þú límir í Dreamweaver. Að takmarka magn sniðs sem varðveitt er getur dregið úr hugsanlegum stílátökum.

Til að breyta pallborðsstillingunum, smelltu á bláa jQuery harmonikkuflipann efst á spjöldum á hönnunarsvæðinu.

Þegar þú smellir á bláa flipann birtast pallborðsstillingarnar í eignaeftirlitinu. (Það getur verið flókið að smella á bláa flipann rétt, svo vertu viss um að smella á bláa svæðið.) Smelltu einhvers staðar annars staðar á síðunni og eftirlitsmaðurinn fer aftur í sjálfgefnar stillingar.

Bættu við eða fjarlægðu spjöld með því að nota reitinn Spjöld í eignaeftirlitinu.

Til að bæta við spjaldi skaltu smella á plúsmerkið (+) hægra megin við reitinn Spjöld. Til að fjarlægja spjaldið úr harmonikkusetti skaltu fyrst velja spjaldsnafnið í pallilistanum Panels í Property Inspector og smelltu síðan á mínusmerkið (@@min).

Þú getur bætt við öðru spjaldi með því að smella aftur á plúsmerkið.

Breyttu því hvernig spjöld eru opnuð með því að nota fellivalmyndina Atburður.

Atburðastillingarnar stjórna því hvort spjöldin opnast þegar notandi smellir á spjaldaflipann (Smelltu) eða rúllar bendilinn yfir spjaldaflipann (Mouseover).

Stilltu aðra spjaldvalkosti, eins og þú vilt.

Harmonikkuvalkostirnir í Property Inspector eru valfrjálsir og fela í sér möguleika á að slökkva á einhverjum eða öllum spjöldum (Slökkva) og lífga hvernig spjöld opnast og lokast (Animate fellilista).

Veldu Skrá→ Vista til að vista síðuna; þegar Copy Dependent Files valmyndin birtist skaltu smella á OK til að búa til allar tengdar skrár.

Til að Spry eiginleikarnir virki verður þú að hlaða þessum skrám inn á vefþjóninn þinn þegar þú hleður upp vefsíðunni.

Til að breyta útliti spjaldsins, eins og leturgerð eða textalit, skaltu breyta samsvarandi CSS reglu.

Athugið: Þú getur ekki breytt samsvarandi stílum fyrir harmonikkuborð fyrr en síðan hefur verið vistuð og Dreamweaver hefur búið til samsvarandi CSS og JavaScript skrár.

Til að sjá hvernig spjöldin munu birtast í vafra skaltu smella á hnattartáknið efst á vinnusvæðinu og velja vafrann sem þú vilt nota til að forskoða síðuna.

Þegar þú ert að nota tölvuna þína til að forskoða síðu sem hefur gagnvirkan eiginleika sem krefst JavaScript eða annarrar forritunar, munu sumir vafrar, þar á meðal Internet Explorer, birta viðvörun um að þú verðir að leyfa ActiveX stýringu að skoða síðuna.

Þetta er öryggisviðvörun sem birtist aðeins þegar síðan er opnuð á sömu tölvu og síðan er vistuð. Ef þú birtir síðuna á vefþjóni og skoðar hana síðan í gegnum nettengingu mun þessi villa ekki birtast hjá þér eða gestum síðunnar þinna.