Jack Harrington. Senior Software Engineer, Studio B
DHTML: argumente pro și contra
Iată câteva recomandări:
Lista 1 indică codul pentru această pagină.
Majoritatea lucrărilor din acest exemplu sunt realizate folosind CSS. Utilizarea atributului de poziție CSS. Puteți plasa o fereastră în partea de sus a textului paginii. Atributele lăsate și poziția superioară a elementului în raport cu colțul din stânga sus al paginii.
ferestre pop-up
Un alt tip de ferestre în mișcare sunt ferestrele pop-up. Puteți utiliza ferestrele pop-up pentru a furniza informații suplimentare atunci când utilizatorul o solicită. Luați în considerare textul prezentat în Figura 3.
Figura 3. O pagină de text simplă despre animale
Nu este mai bine dacă utilizatorul să învețe mai multe informații despre girafă? Textul conține o legătură convenabilă: dacă îl selectați, veți vedea o fereastră pop-up, prezentată în Figura 4.
Aici deschideți o fereastră la cerere și plasați-o în raport cu textul documentului. Codul este afișat în listare 3.
Listare 3. Fereastră pop-up în HTML
Puteți personaliza conținutul ferestrei pop-up înainte de a deveni vizibil prin setarea elementului innerHTML la obiectul pop-up
Acest cod este destul de compatibil. Cu toate acestea, pot exista neconcordanțe datorate diferenței dintre valorile offsetLeft și offsetTop din browser către browser, mai ales în paginile cu conținut complex încorporat. Pentru a obține o poziție mai precisă atunci când citiți o pagină complexă, poate fi necesar să adăugați recursiv valori offsetLeft și offsetTop. folosind obiectul offsetParent pentru a obține obiectul parental pentru fiecare obiect atunci când se deplasează în sus arborele obiect HTML.
Pop-up-uri în PHP
Având codul DHTML, vă va fi mai ușor să utilizați ferestrele pop-up în aplicațiile PHP. Codul PHP este afișat în listare 4.
Listarea 4. fereastra pop-up pentru cod PHP
Aici separați generarea antetului și locația fiecărei ferestre pop-up. Pagina ar trebui să apeleze popup_header în interiorul etichetei capului. apoi adăugați o etichetă
Această funcție pop-up PHP are trei parametri: un identificator de ferestre pop-up, o versiune text simplu și un text care ar trebui să apară atunci când este selectat un element. Funcția creează apoi o imagine de etichetă ancoră care arată aproape la fel ca originalul în versiunea DHTML.
O altă opțiune pentru ascunderea și afișarea datelor pe pagină este contorul. În acest model, pagina este împărțită în două secțiuni, care pot fi ascunse sau afișate separat, utilizând un contor. Figura 5 prezintă o pagină cu două secțiuni cu un contor, fiecare dintre ele inițial închis.
Figura 5. Secțiunile paginii cu contoare închise
Selectarea linkului Deschidere din secțiunea Nivelul 1 afișează conținutul acestei secțiuni, după cum se arată în Figura 6.
Figura 6. Pagina cu primul contor deschis
În loc de cuvintele deschise și închise, puteți utiliza obiecte grafice. În mod tradițional, aceste obiecte grafice sunt de obicei triunghiuri care arată spre dreapta pentru a fi închise. sau în jos pentru deschidere; sau semne plus și minus, unde plus înseamnă închise. dar minusul este deschis. (Opiniile pe care este cea mai bună abordare se referă la disputa dintre Mac și Windows.) Contoarele de pe cele două platforme corespund celor două opțiuni diferite.)
Codul din listare 5 arată cum funcționează aceste contoare:
Listing 5. Contoare în HTML
Mecanismul contor este implementat în funcția de rotire. care ia în considerare vizibilitatea corpului contorului și îl inversează, schimbând vizibilul în cel ascuns și ascuns în vizibil.
Setați atributul înălțime la 0px. atunci când elementul este invizibil, iar pe când este văzut. În Internet Explorer, când elementul este invizibil, spațiul din jur este comprimat. Dar în Firefox, când conținutul este invizibil, există un spațiu gol pentru el. Trebuie să setați înălțimea la 0px. astfel încât spațiul să fie corect comprimat.
Pentru a utiliza elemente grafice în loc de text pentru a exprima o stare deschisă sau închisă, repetați codul care modifică valoarea innerHTML a obiectului contra pentru a specifica un desen-tag în loc de o etichetă de text.
Contoare în PHP
Pentru a rula contoarele în PHP, trebuie să urmați modelul standard de generare a codului DHTML din pozițiile serverului, care include segmentele HTML în funcțiile de pornire și terminare. Codul PHP este afișat în listare 6.
Listing 6. Counter în PHP
Fiecare secțiune a conținutului este inclusă în paranteze, cu un apel la start_spinner și end_spinner. Funcția start_spinner ia în considerare două argumente: identificatorul contra și antetul său. Apelul end_spinner închide eticheta
Ai putea pune conținutul contorului ca al treilea argument. Dar de multe ori aceste secțiuni de conținut sunt interdependente și, dacă ați scris-o într-un mod similar, interfața ar fi neplăcută de utilizat. Acest model de încapsulare a conținutului secțiunilor dinamice în funcțiile "început" și "sfârșit" înseamnă că PHP între ele poate fi la fel de complex pe cât doriți.
Figura 7. Jocuri sortate după nume
Pentru a vedea jocurile sortate în funcție de cont, selectați link-ul "După scor". Lista se va schimba după cum se arată în Figura 8.
Figura 8. Jocuri ordonate după cont
În loc să efectueze o sortare complexă de către client, site-ul utilizează echivalentul cardurilor flash: Un card conține o listă sortată după nume, în alta - de cont. Selectarea legăturilor ascunde o singură carte și arată o altă carte. Codul este afișat în listare 7.
Listarea 7. Marcaje în HTML
De asemenea, există încă câteva lucruri interesante. În primul rând, modificați dinamic clasa CSS utilizând atributul className. Astfel, butonul selectat modifică culoarea de la alb la negru.
În al doilea rând, găsiți numele și scorul în CSS. ambii
Acest tip, fiind destul de complex și interesant, este de asemenea compatibil cu aproape orice browser modern.
Marcaje în PHP
Un alt instrument de dezvoltare a DHTML în PHP este utilizarea buffer-ului de ieșire. Tamponarea la ieșire stochează text, etichete și repetarea materialelor din pagină și le returnează ca un șir pentru o utilizare ulterioară. Pentru a implementa marcajele, utilizați tampon de ieșire pentru a salva conținutul marcajului ca șir înainte de al redacta pe pagină (a se vedea Lista 8).
Listing 8. Marcaje în PHP
Codul PHP începe cu definirea a două variabile: tabs și current_tab. Tab-urile array conțin valorile id. titlu și html pentru fiecare marcaj. current_tab indică fila care este creată între apelurile către start_tab și end_tab. Funcția start_tab ia în considerare doi parametri: valoarea id a marcajului și valoarea titlului. Apoi începe tamponarea la ieșire.
Funcția end_tab oprește tamponarea la ieșire și stochează HTML-ul rezultat în valoarea html în tabela curentă a matricei filelor.
Dacă priviți mai departe, veți vedea că apelurile către funcțiile start_tab și end_tab se află în jurul conținutului filelor care sunt afișate în fila.
Funcțiile importante pentru vizualizarea marcajelor pe pagină sunt loc_tab_buttons și place_tab_content. Funcția place_tab_buttons creează etichete de ancoră care au aceleași nume ca marcajele și care, atunci când sunt selectate, comută filele. Funcția place_tab_content creează etichete
Vezi de asemenea
Obțineți produse și tehnologii
- Actualizați-vă următorul proiect de dezvoltare open source cu software-ul de testare IBM. disponibil pentru descărcare sau pe DVD.