Tải bản đầy đủ - 0 (trang)
Hack 79. Dynamically Display More Information About a Topic

Hack 79. Dynamically Display More Information About a Topic

Tải bản đầy đủ - 0trang

ThetwopagesectionsarebuiltwithHTMLtables.Thefollowing

codesampleshowstheQuoteoftheDaytable.TheWeather

Forecasttablehasanidenticalstructure:










QuoteoftheDay













"Outsideofadog,abookisman'sbestfriend.

Insideofadogit'stoodarktoread."


--GrouchoMarx














Thetablehastworows:thetoprowdisplaysthetitle,andthe

bottomrowcontainsthequotation.Thequoteissurroundedby

adivtagnameddivQOTD.You'llalsonoticethatwe'vehookeda

callbacktothetoprow'sonClickevent.Whentheuserclicksthe

mouseontheQuoteoftheDaytitle,thetoggle_visible()

functionmakesthecontentwithinthedivtagdisappear,asin

Figure9-16.Ifthecontentisalreadyhidden,clickingthetitle

makesitreappear.



Figure9-16.HidingtheQuoteoftheDay



Thetoggle_visible()functionsimplymodifiesacoupleofthe

styleattributesofanyDocumentobjectelement.Youpassthe

elementasaparameter,andtoggle_visible()checkstoseeifit's

currentlyvisible.Ifitis,theelementisrenderedinvisible.Ifthe

elementisalreadyinvisible,itreappears:

functiontoggle_visible(elName){



varel=document.getElementById(elName);

varisVisible=(el.style.visibility=="hidden")?true:

el.style.visibility=isVisible?"visible":"hidden";

el.style.display=isVisible?"inline":"none";

}



Figure9-17showsthepagewithbothcontentboxesinvisible.

Youcanusethefunctiontomakeanypageelementdisappear.

Youcanevenattachittothebodytag'sonClickeventandmake

theentirepagedisappear,ifsoinspired.



Figure9-17.Bothcontentboxesrendered

invisible



Theonlybitoftrickeryinthefunctioniswhenyousetthe

el.style.displayattribute.Youmightthinkthatsettingthe

el.style.visibilityattributewouldbesufficienttorenderthe

elementinvisible,butalas,no.Settingvisibilitytohiddenmakes

thetextdisappear,butthebrowserstillreservesspaceforit.

Settingthedisplayattributetonone(insteadofthenormalinline)



letsthebrowsertakebackthespaceitoccupiedandadjust

otherpageelementsaccordingly.



HackingtheHack

Thetoggle_visible()functionisn'tlimitedtotinysectionsofthe

page.Youcanuseittomakelargesectionsappearor

disappear,too.Avariationofthisfunctionmightreceivea

Booleanparameterthatsetsthevisibility.Thistechniquecan

allowtheusertotogglebetweenradicallydifferentviewsof

yourpagewithoutapagerefreshoratripbacktotheserver.

MarkPruett







Hack80.UseStringsandArraystoDynamically

GenerateHTML



SpeedupthedynamicwritingofHTMLtablesandCSS

styles.

DOMprogramminginthelatestversionsofmodernbrowsers,

despitetheircompatibilitydifferences,isapowerfultechnique

forgeneratingnewcontentintheclient.However,thelarge

client-sideprogramsthatdynamicallywriteHTMLtables,for

instance,frompersistentlystoreddata,cangainperformance

benefitsbyusingcoreor"raw"JavaScriptobjectsinsteadofthe

DOM.ThishackusesJavaScriptstringsandarraysto

dynamicallygenerateanHTMLtableforabrowserview;it

showsacodesampleforthisapproachandtheDOM-based

techniqueasabasisforcomparison.

Thehackalsodescribesatechniquefordynamicallysetting

CascadingStyleSheet(CSS)stylesthathelpsincreasethe

performanceofJavaScriptcodethatalterstheappearanceofan

HTMLelement.



WritingaTable

Inmanysituations,suchasdynamicallywritinganHTMLtable,

minimizingyourcode'suseofthewebpage'sDOMobjectscan

increaseyourprogram'sperformance.Followingaretwo

differentexamplesofbuildinganHTMLtable.Thefirstone

emphasizesDOMscripting,andthesecondusesJavaScript

arraysandstrings.Thefirstapproachlookslikethis:



functionbuildTable(nRows,nCols){

varidx=0,idx2=0;

varoTable=document.createElement("TABLE");

varoTBody=document.createElement("TBODY");

varoTRow=null;

varoTCol=null;

for(idx;idx
oTRow=document.createElement("TR");

for(idx2=0;idx2
oTCol=document.createElement("TD");

oTCol.innerText=nRow+","+nCol;

oTCol.style.fontSize="12px";

oTCol.style.fontWeight=700;

oTCol.style.fontFamily="tahoma";

oTRow.appendChild(oTCol);

};

oTBody.appendChild(oTRow);

};

oTable.appendChild(oTBody);

document.body.appendChild(oTable);

};



Andhere'sthesecondapproach:

functionbuildTable(nRows,nCols){

varidx=0,idx2=0;

varbufferHTML=newArray();

varbufferCount=0;

bufferHTML[bufferCount++]="";

for(idx;idx
bufferHTML[bufferCount++]="
";

for(idx2=0;idx2
bufferHTML[bufferCount++]=



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Hack 79. Dynamically Display More Information About a Topic

Tải bản đầy đủ ngay(0 tr)

×