Kaip padaryti išplėstinį tekstą „Dreamweaver“

Jei naudojate „Dreamweaver“, kad valdytumėte savo įmonės svetainės turinį, galite pridėti ir pakeisti HTML ir „JavaScript“ kodus, kad sukurtumėte išplėstinį teksto skyrių. Jei svetainės puslapiuose yra daug teksto, jų dalis gali būti išplėsta ir žlugti gali būti veiksmingas būdas vartotojams valdyti savo patirtį. Verslo svetainėse tai gali būti ypač naudinga, nes potencialūs klientai gali prarasti susidomėjimą puslapiais, kuriuose yra daug teksto.

Dreamweaver HTML redagavimas

Kartą „Dreamweaver“ galite atidaryti atitinkamą HTML ar kitą failą. „Dreamweaver“ sąsaja leidžia vartotojams vizualiai redaguoti puslapio dizainą grafinėje sąsajoje. Tačiau norėdami sukurti teksto elementus, kurie gali išplėsti, turite įvesti ir redaguoti kodą. Dėl šios priežasties būtina pereiti prie „Dreamweaver“ kodo rodinio. Tai galima pasiekti paspaudus mygtuką „Kodas“ dokumento įrankių juostoje arba pasirinkus „Žiūrėti“ ir meniu „Kodas“.

Teksto elementas

HTML tinklalapiuose tekstas gali būti rodomas įvairiuose elementų tipuose. Vienos iš dažniausiai pasitaikančių dalių ir „divs“. Jei puslapyje jau yra teksto elementas, kūrėjas gali pridėti kodą, kad šis tekstas būtų išplėstas. Arba galite sukurti teksto elementą naudodami šį HTML žymėjimo kodą:

Čia yra tekstas.

Matomas tekstas yra tas, kas rodomas tarp atidarymo ir uždarymo pastraipos žymių. Atidarymo straipsnio žyma turi ID atributą, kad elementą būtų galima valdyti „JavaScript“. Tekstas iš pradžių yra nepastebimas naudojant stiliaus rodymo savybę.

Interaktyvus elementas

Kad vartotojai galėtų kontroliuoti, ar teksto elementas yra išplėstas ar žlugęs, tinklalapiuose yra interaktyvus elementas, pvz., Mygtukas. Tai parodys šį pavyzdžio kodą ir jis turėtų būti įtrauktas šalia išplėsto teksto elemento:

„Onclick“ renginio klausytojas sukelia „JavaScript“ funkciją, kai vartotojas spustelės mygtuką. Paspaudimo įvykio klausytojo atributas gali būti rodomas kituose elementų tipuose, todėl nereikia naudoti mygtuko.

„JavaScript“

Jei norite rodyti ir slėpti teksto elementą „Dreamweaver“ tinklalapyje, reikia kai kurių „JavaScript“ kodų. Šis kodas reiškia scenarijų skyrių, kuris yra HTML puslapio pagrindiniame skyriuje:

Šioje skiltyje funkcija gali apdoroti išplėsti ir sutraukti tekstą naudotojo paspaudimais. Pirma, scenarijus turi stebėti, ar tekstas matomas:

var displays = false;

Kitas scenarijus turi apimti funkciją, nurodytą paspaudimo įvykio klausytojo atribute:

funkcija ShowOrHide () {

}

Plėtimas ir žlugimas

Funkcijos viduje „JavaScript“ gali patikrinti, ar tekstas šiuo metu yra matomas - išplėstas, ar ne, ir tada atitinkamai pakeiskite stiliaus rodymo savybę:

var textElement = document.getElementById ("the_content"); jei (rodoma) {textElement.style.display = "nėra"; rodomas = false; } else {textElement.style.display = "blokas"; rodoma = tiesa; }

Scenarijus naudoja teksto elemento ID, kad valdytų jo išvaizdą, taip pat atnaujina kintamąjį, kad būtų galima stebėti jo dabartinę matomumo būseną.