Thông tin tài liệu
CD-512 Part VI ✦ Appendixes OPTION Element Object Properties label NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example The following statement modifies the text that appears as the selected text in a pop- up list: document.forms[0].mySelect.options[3].label = “Widget 9000” If this option is the currently selected one, the text on the pop-up list at rest changes to the new label. OPTGROUP Element Object Properties label NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example I present Listing 26-9 in the hope that Microsoft and Netscape will eventually eradicate the bugs that afflict their current implementations of the label property. When the feature works as intended, Listing 26-9 demonstrates how a script can alter the text of option group labels. This page is an enhanced version of the background color setters used in other examples of this chapter. Be aware that OPTGROUP.label CD-513 Appendix F ✦ Examples from Parts III and IV IE5/Mac does not alter the last OPTGROUP element’s label, and NN6 achieves only a partial change to the text displayed in the SELECT element. Listing 26-9: Modifying OPTGROUP Element Labels <HTML> <HEAD> <TITLE>Color Changer 3</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var regularLabels = [“Reds”,”Greens”,”Blues”] var naturalLabels = [“Apples”,”Leaves”,”Sea”] function setRegularLabels(list) { var optGrps = list.getElementsByTagName(“OPTGROUP”) for (var i = 0; i < optGrps.length; i++) { optGrps[i].label = regularLabels[i] } } function setNaturalLabels(list) { var optGrps = list.getElementsByTagName(“OPTGROUP”) for (var i = 0; i < optGrps.length; i++) { optGrps[i].label = naturalLabels[i] } } function seeColor(list) { var newColor = (list.options[list.selectedIndex].value) if (newColor) { document.bgColor = newColor } } </SCRIPT> </HEAD> <BODY onUnload=”document.forms[0].reset()”> <FORM> <P>Choose a background color: <SELECT name=”colorsList” onChange=”seeColor(this)”> <OPTGROUP ID=”optGrp1” label=”Reds”> <OPTION value=”#ff9999”>Light Red <OPTION value=”#ff3366”>Medium Red <OPTION value=”#ff0000”>Bright Red <OPTION value=”#660000”>Dark Red </OPTGROUP> <OPTGROUP ID=”optGrp2” label=”Greens”> <OPTION value=”#ccff66”>Light Green <OPTION value=”#99ff33”>Medium Green <OPTION value=”#00ff00”>Bright Green <OPTION value=”#006600”>Dark Green </OPTGROUP> Continued OPTGROUP.label CD-514 Part VI ✦ Appendixes Listing 26-9 (continued) <OPTGROUP ID=”optGrp3” label=”Blues”> <OPTION value=”#ccffff”>Light Blue <OPTION value=”#66ccff”>Medium Blue <OPTION value=”#0000ff”>Bright Blue <OPTION value=”#000066”>Dark Blue </OPTGROUP> </SELECT></P> <P> <INPUT TYPE=”radio” NAME=”labels” CHECKED onClick=”setRegularLabels(this.form.colorsList)”>Regular Label Names <INPUT TYPE=”radio” NAME=”labels” onClick=”setNaturalLabels(this.form.colorsList)”>Label Names from Nature</P> </FORM> </BODY> </HTML> Chapter 27 Examples The following sections contain examples from Chapter 27, “Table and List Objects.” TABLE Element Object Properties align NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to see the align property at work. The default value ( left) is in force when the page loads. But you can shift the table to right-align with TABLE.align CD-515 Appendix F ✦ Examples from Parts III and IV the body by entering the following statement into the top text box for IE5+ and NN6+: document.getElementById(“myTable”).align = “right” background NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Treat the background property of a table like you do the src property of an IMG element object. If you precache an image, you can assign the src property of the precached image object to the background property of the table for quick image changing. Such an assignment statement looks like the following: document.all.myTable.background = imgArray[“myTableAlternate”].src bgColor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to assign a color to the table. After looking at the table to see its initial state, enter the following IE5+/NN6+ statement into the top text box: document.getElementById(“myTable”).bgColor = “lightgreen” When you look at the table again, you see that only some of the cells turned to green. This is because colors also are assigned to table elements nested inside the outermost table element, and the color specification closest to the actual element wins the context. TABLE.bgColor CD-516 Part VI ✦ Appendixes border NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example To remove all traces of an outside border of a table (and, in some combinations of attributes of other table elements, borders between cells), use the following state- ment (in IE5+/NN6+ syntax): document.getElementById(“myTable”).border = 0 borderColor borderColorDark borderColorLight NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Assuming that you have set the initial light and dark color attributes of a table, the following function swaps the light and dark colors to shift the light source to the opposite corner: function swapColors(tableRef) { var oldLight = tableRef.borderColorLight tableRef.borderColorLight = tableRef.borderColorDark tableRef.borderColorDark = oldLight } While you can easily invoke this function over and over by ending it with a setTimeout() method that calls this function after a fraction of a second, the results are very distracting to the person trying to read your page. Please don’t do it. TABLE.borderColor CD-517 Appendix F ✦ Examples from Parts III and IV caption NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The following example, for use with The Evaluator (Chapter 13) in NN6+, demon- strates the sequence of assigning a new CAPTION element object to a table. While the table in The Evaluator already has a CAPTION element, the following statements replace it with an entirely new one. Enter each of the following statements into the top text box, starting with the one that saves a long reference into a variable for multiple use at the end: t = document.getElementById(“myTable”) a = document.createElement(“CAPTION”) b = document.createTextNode(“A Brand New Caption”) a.appendChild(b) t.replaceChild(a, t.caption) A view of the table shows that the new caption has replaced the old one because a table can have only one CAPTION element. cellPadding cellSpacing NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to adjust the cellPadding and cellSpacing prop- erties of the demonstrator table. First, adjust the padding (IE5+/NN6 syntax): document.getElementById(“myTable”).cellPadding = 50 Now, adjust the cell spacing: document.getElementById(“myTable”).cellSpacing = 15 Notice how cellSpacing affected the thickness of inter-cell borders. TABLE.cellPadding CD-518 Part VI ✦ Appendixes cells NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Use The Evaluator with IE5+ for Windows to have JavaScript calculate the number of columns in the demonstrator table with the help of the cells and rows proper- ties. Enter the following statement into the top text box: document.all.myTable.cells.length/document.all.myTable.rows.length The result is the number of columns in the table. dataPageSize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example If you want to change the number of visible rows of linked data in the table to 15, use the following statement: document.all.myTable.dataPageSize = 15 frame NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 27-4 presents a page that cycles through all possible settings for the frame property. The frame property value is displayed in the table’s caption. (Early ver- sions of NN6 might fail to refresh part of the page after adjusting the frame property.) TABLE.frame CD-519 Appendix F ✦ Examples from Parts III and IV Listing 27-4: Cycling Through Table frame Property Values <HTML> <HEAD> <TITLE>TABLE.frame Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var timeoutID var frameValues = [“box”, “above”, “rhs”, “below”, “lhs”, “hsides”, “vsides”, “border”, “void”] function rotateBorder(i) { document.getElementById(“myTABLE”).frame = frameValues[i] document.getElementById(“myCAPTION”).innerHTML = frameValues[i] i = (++i == frameValues.length) ? 0 : i timeoutID = setTimeout(“rotateBorder(“ + i + “)”, 2000) } function stopRotate() { clearTimeout(timeoutID) document.getElementById(“myTABLE”).frame = “box” document.getElementById(“myCAPTION”).innerHTML = “box” } </SCRIPT> </HEAD> <BODY> <H1>TABLE.frame Property</H1> <HR> <FORM NAME=”controls”> <FIELDSET> <LEGEND>Cycle Table Edge Visibility</LEGEND> <TABLE WIDTH=”100%” CELLSPACING=20><TR> <TD><INPUT TYPE=”button” VALUE=”Cycle” onClick=”rotateBorder(0)”></TD> <TD><INPUT TYPE=”button” VALUE=”Stop” onClick=”stopRotate()”></TD> </TR> </TABLE> </FIELDSET> </TABLE> </FIELDSET> </FORM> <HR> <TABLE ID=”myTABLE” CELLPADDING=5 BORDER=3 ALIGN=”center”> <CAPTION ID=”myCAPTION”>Default</CAPTION> <THEAD ID=”myTHEAD”> <TR> <TH>River<TH>Outflow<TH>Miles<TH>Kilometers </TR> Continued TABLE.frame CD-520 Part VI ✦ Appendixes Listing 27-4 (continued) </THEAD> <TBODY> <TR> <TD>Nile<TD>Mediterranean<TD>4160<TD>6700 </TR> <TR> <TD>Congo<TD>Atlantic Ocean<TD>2900<TD>4670 </TR> <TR> <TD>Niger<TD>Atlantic Ocean<TD>2600<TD>4180 </TR> <TR> <TD>Zambezi<TD>Indian Ocean<TD>1700<TD>2740 </TR> </TABLE> </BODY> </HTML> height width NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to adjust the width of the demonstrator table. Begin by increasing the width to the full width of the page: document.getElementById(“myTable”).width = “100%” To restore the table to its minimum width, assign a very small value to the property: document.getElementById(“myTable”).width = 50 If you have IE4+, you can perform similar experiments with the height property of the table. TABLE.height CD-521 Appendix F ✦ Examples from Parts III and IV rows NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator to examine the number of rows in the demonstrator table. Enter the following statement into the top text box: document.getElementById(“myTable”).rows.length In contrast, notice how the rows property sees only the rows within the demonstra- tor table’s TBODY element: document.getElementById(“myTbody”).rows.length rules NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 27-5 presents a page that cycles through all possible settings for the rows property. The rows property value is displayed in the table’s caption. When you run this script, notice the nice border display for this table’s combination of COL- GROUP and table row segment elements. Early versions of NN6 may not render the altered table correctly, and scripted changes won’t appear on the page. Listing 27-5: Cycling Through Table rows Property Values <HTML> <HEAD> <TITLE>TABLE.rules Property</TITLE> Continued TABLE.rules . reference into a variable for multiple use at the end: t = document.getElementById(“myTable”) a = document.createElement(“CAPTION”) b = document.createTextNode(“A Brand New Caption”) a.appendChild(b) t.replaceChild(a,. (list.options[list.selectedIndex].value) if (newColor) { document.bgColor = newColor } } </SCRIPT> </HEAD> <BODY onUnload=”document.forms[0].reset()”> <FORM> <P>Choose. with TABLE.align CD-515 Appendix F ✦ Examples from Parts III and IV the body by entering the following statement into the top text box for IE5+ and NN6+: document.getElementById(“myTable”).align = “right” background NN2
Ngày đăng: 06/07/2014, 06:20
Xem thêm: JavaScript Bible, Gold Edition part 203 doc
