Học JavaScript qua ví dụ part 68 docx

ptg 598 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.11.4 The className Property The className property is used to reference a CSS class. The className property is defined for all HTML elements. With the className property, you can change an element dynamically by assigning it the name of a class defined in a CSS. Example 14.32 contains a CSS with three classes. 3 If the zIndex of the object evaluates to 100, it must be at the top of the stack, be- cause that is as high as the stack gets. 4 This sets the stack level of the zIndex to 2, causing it to move toward the bottom of the stack. 5 If the zIndex for the object is not 3, it is not at the top. Its zIndex will be set to 100, moving it to the top of the stack. 6 The object is moved to the bottom of the stack with a zIndex of 0. 7 The <span> tag is used to create a rectangular red box on the screen. With a zIndex of 0, it will be positioned at the bottom of the stack. 8 When the user clicks the button, the onClick event is triggered, and the handler function, moveUp(id), is called. 9 A yellow rectangular box is created with the <span> tag. With a zIndex of 1, it will be positioned above the last block in the stack. 10 A blue square box is created with the <span> tag. With a zIndex of 2, it will be positioned above the last block in the stack. 11 A small white rectangular box is created with the <span> tag. With a zIndex of 3, it will be positioned at the top of the stack. See Figure 14.36. Figure 14.36 The original configuration of the four rectangles (left); after manipulating the rectangles by reassigning the z-index (right). EXPLANATION From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 599 EXAMPLE 14.32 <html> <head><title>Coloring Text</title> <style type="text/css"> body { background-color: yellow; font-size: 22pt; font-weight: bold; } 1 .red { color:rgb(255,0,0); /* Defining classes */ font-style: verdana; font-size: 32; } 2 .blue { color:blue; font-style: verdana; font-size: 36; } 3 .green { color: green; font-style: verdana; font-size: 40; } </style> <script type="text/javascript"> 4 window.onload=init; function init(){ div1=document.getElementById("first"); div2=document.getElementById("second"); div3=document.getElementById("third"); } 5 function colorText(){ div1.style.left = 50; div1.style.top = 50; 6 div1.className="red"; div2.style.left = 100; div2.style.top = 100; 7 div2.className="blue"; div3.style.left = 150; div3.style.top = 150; 8 div3.className="green"; } </script> </head> <body> 9 <div id="first" style="position:absolute; top:50px">It's a one,</div> <div id="second" style="position:absolute; top:100px">and a two,</div> Continues From the Library of WoweBook.Com ptg 600 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript <div id="third" style="position:absolute; top:150px">and three!</div> <form> <input type="button" value="move and color text" 10 onClick="colorText()"> </form> </body> </html> EXPLANATION 1 A CSS class for a style is defined. Text will be a red, Verdana font, point size 32. The rgb (red, green, blue) color is used here for demonstration. It would be easier to just assign red to the color property. 2 A CSS class for another style is defined. The text will be a blue, Verdana font, point size 36. 3 A CSS class for a third style is defined. The text will be a green, Verdana font, point size 40. Notice that each class not only changes the color of the font, but increases its point size. 4 When the onload event handler is triggered, just after the document has been loaded, the user-defined init() function is called. The getElementById() method returns references to three div objects. 5 A function called colorText() is defined. It sets the position of the div containers and defines the color for the text in each container. 6 The className property is used to reference the CSS class named red, defined in the document. 7 The className property is used to reference the CSS class named blue, defined in the document. 8 The className property is used to reference the CSS class named green, defined in the document. 9 The positions for each of the div containers are defined. 10 When the user clicks this button, the onClick event is triggered. It invokes the col- orText() function, which will move and change the text in each of the div containers. The output is displayed in Figures 14.37 and 14.38. EXAMPLE 14.32 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 601 14.11.5 Drop-Down Menus and Tooltips Drop-down menus are commonly used in Web pages to create submenus that appear and then disappear when no longer needed. A tooltip is a small box of text that appears near an object when the mouse moves over the object. The text in the box (which can also contain an image) usually contains a brief text message pertaining to the object. Both drop-down menus and tootips use the visibility property to bring the object into view and then make it disappear depending on a user-initiated event. Figure 14.37 The initial appearance of the document (left); after clicking the button, the color, position, and size of the text is changed (right). Figure 14.38 If text will not move in Internet Explorer and you see the security warning, click the x and turn it off. From the Library of WoweBook.Com ptg 602 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript The visibility Property. The visibility property lets you hide an object and then bring it back into view. You can also use the visibility property to determine the state: Is it “visible” or “hidden”? This property is useful when creating interfaces such as drop-down menus, slideshows, and popups or tooltips. 4 In Example 14.34, when the user clicks on one of the links in the main menu, a drop-down menu will appear. If the user rolls the mouse over the drop-down menu, it will be hidden from view. Each of the drop-down menus is defined within a <div> container. 4. The visibility property applies to an entire object. The clip property allows you to designate how much of an element will be visible. EXAMPLE 14.33 /* this style sheet is in a file called dropdown.css */ 1 a { font-family: verdana, arial; text-decoration: none; font-weight: bold; margin-left: 4px; } /*link style for main menu*/ .linkstyle { color: #f33;} 2 #menu, .menu { font-stye: verdana; font-size:10pt; color:black; } /* link style for drop-down menu */ 3 #menu { position:absolute; text-decoration:underline; top:40px; border-style:solid; border-width:1px; padding: 5px; background-color:yellow; width:75px; color: black; font-size: 12pt; 4 visibility:hidden; } 5 #menu2 { position:absolute; text-decoration:underline; top:40px; left:3.2cm; border-style:solid; border-width:1px; padding: 5px; background-color:orange; width:80px; color: black; font-size: 12pt; visibility:hidden; } From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 603 6 #menu3 { position:absolute; text-decoration:underline; top:40px; left:6.2cm; border-style:solid; border-width:1px; padding: 5px; background-color:pink; width:80px; color: black; font-size: 12pt; visibility:hidden;} 7 /* End of style sheet */ EXAMPLE 14.34 <html> <head><title>Drop-Down Menu</title> <link rel="stylesheet" href="dropdown.css"type="text/css"/> <script type="text/javascript"> 8 function showMenu(id){ 9 var ref = document.getElementById(id); 10 ref.style.visibility = "visible"; // Make the drop-down // menu visible } 11 function hideMenu(id){ 12 var ref = document.getElementById(id); 13 ref.style.visibility = "hidden"; //Hide the drop-down menu } </script> </head> <body bgColor="lightblue"> 14 <table width="350" border="2" bgcolor="lightgreen" cellspacing="1" cellpadding="2"> <tr> 15 <td width="100"> 16 <div id="menu" onClick="hideMenu('menu');"> <a class="menu" href="#">US</a><br /> <a class="menu" href="#">World</a><br /> <a class="menu" href="#">Local </a><br /> </div> 17 <a href="#" onMouseOver="showMenu('menu');">News</a> </td> Continues EXAMPLE 14.33 (CONTINUED) From the Library of WoweBook.Com ptg 604 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript <td width="100"> <div id="menu2" onClick="hideMenu('menu2');"> <a class="menu" href="#">Basketball</a><br /> <a class="menu" href="#">Football</a><br /> <a class="menu" href="#>">Soccer</a><br /> </div> 18 <a href="#" onMouseOver="showMenu('menu2');">Sports</a> </td> <td width="100"> <div id="menu3" onClick="hideMenu('menu3');"> <a class="menu" href="http://www.imdb.com/">Movies</a><br /> <a class="menu" href="#">Plays</a><br /> <a class="menu" href="#>">DVD's</a><br /> </div> 19 <a href="#" onMouseOver="showMenu('menu3');">Entertainment</a> </td> 20 </tr> </table> </body> </html> EXPLANATION 1 The a selector is followed by the style definition for the links that appear in the main menu. 2 An ID selector and a class are defined. This style will be used on links in the drop- down menus. 3 This ID selector defines the style of the first drop-down menu. When the user clicks the News link, this yellow drop-down menu will appear directly under the table cell containing the News link. 4 Initially, the first drop-down menu is hidden from view. 5 This ID selector defines the style of the second drop-down menu. It will be orange and drop down directly under the Sports link. 6 This ID selector defines the style of the third drop-down menu. It will be pink and drop down directly under the Entertainment link. 7 The CSS ends here, and the JavaScript program begins on the next line. 8 A function called showMenu is defined. Its only parameter is the id attribute of a div object, that is, the ID of one of the three drop-down menus. EXAMPLE 14.34 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 605 9 The getElementById() method returns a reference to the div object that contains the drop-down menu. 10 The visibility property is set to visible. The drop-down object comes into view, right below the main menu item where the user clicked the link. 11 A function called hideMenu() is defined. Its only parameter is the id attribute of a div object. When this function is invoked, the drop-down menu being referenced will be hidden from view. 12 The getElementById() method returns a reference to the div object that contains the drop-down menu. 13 The visibility property is set to hidden. The object being referenced disappears from view. 14 An HTML table is defined. It will be light green, 350 pixels wide, and contain one row and three data cells. 15 The first cell of the table contains a <div> container that is positioned and styled by the CSS #menu ID selector. If the user clicks from within this tag, it will be hidden from view. If he or she clicks a link in the drop-down menu, the user will be directed to a Web site. 16 The links within the <div> container are described by the CSS .menu class. The links are deactivated for this example. 17 When the user rolls the mouse onto this link called News, the onMouseOver event will be triggered. A function called showMenu will be invoked, causing the drop- down menu to appear. 18 The second drop-down menu is created and will be made visible when the user rolls the mouse over the Sports link. 19 Like the other two links, the Entertainment link also has a drop-down menu as- sociated with it, which will be made visible when the user rolls the mouse over it, and made invisible when the user clicks on the drop-down list. 20 The table row and table are closed. See Figure 14.39. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 606 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Tooltips. The following example uses the visibility property to hide the text in the tooltip until the user rolls the mouse over the image. Figure 14.39 A drop-down menu controlled by mouse actions. EXAMPLE 14.35 <html> <head><title>A tool tip</title> <style type="text/css"> body { background-color:black;} 1 #divclass { font-size:12pt; font-family: arial; font-weight: bold; background-color:aqua; border:thin solid; width: 210px; height:40px; 2 visib ility: hidden; /* Can’t see the container */ position:absolute; top: 50px; left: 175px; 3 z-index: 1; /* Put the div container on top */ } From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 607 4 a { font-family: cursive; font-size: 18pt; font-weight: bold; color:white; position: absolute; left: 60px; } 5 img { position:absolute; top: 50px; z-index:0; } </style> <script type = "text/javascript"> var div1; 6 function init(){ div1=document.getElementById("divclass"); } 7 function showHideTip(e) { 8 if(e.type == "mouseover"){ div1.style.visibility="visible"; } 9 else if(e.type == "mouseout"){ div1.style.visibility="hidden"; } } </script> </head> 10 <body onLoad="init();"> 11 <a href="http://www.servant.xxx" 12 onMouseover="showHideTip(event);" 13 onMouseout="showHideTip(event);" >At Your Service! </a> <br /> 14 <img src="waiter.gif"> 15 <div id="divclass">Always tip me at least 20%!</div> </body> </html> EXPLANATION 1 A CSS style is defined for the ID selector, #divclass to create a tooltip. 2 The visibility property for this style is set to hidden; it will not be seen. 3 The z-index property is set to 1, putting it above the image that is set to z-index 0. Re- member, the higher the z-index number, the higher the element is placed on the stack. 4 The style for a link is defined. 5 A style for positioning an image is defined. Its z-index is 0, placing it below any other elements. Continues EXAMPLE 14.35 (CONTINUED) From the Library of WoweBook.Com [...]... these styles in a file so that they can be applied to all the pages in a Web site at once JavaScript enters the picture to allow for dynamic enhancement of pages, changing styles on the fly based on some user interaction In the next chapter, we will use the W3C DOM to access every element in a page With CSS, JavaScript, and the DOM, all of these technologies will be used together to create DHTML By... and relative positioning What z-index is What DHTML is How style sheets are stored in JavaScript How the style object is used How to use the className property How to create a tooltip How to create a drop-down menu From the Library of WoweBook.Com 610 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript E x e r c i ses 1 Create a CSS style sheet that makes all h1 elements italic...608 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript E X P L A N A T I O N ( C O N T I N U E D) 6 7 8 9 10 11 12 13 14 15 The init() function is defined to get the ID of a div element In this example, this will be the ID for the tooltip The showHideTip()... Create a colored div Each time the user clicks the div it will grow longer by 10 pixels 7 Create two paragraphs in a div container When the user clicks the div, change the background color of the div with JavaScript 8 Create an animation of a stick man running You will need to draw several stick men of the same size in different running positions Your program will give the illusion of the stick man running . ptg 598 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.11.4 The className Property The className property is used to reference a CSS class <span> tag. With a zIndex of 1, it will be positioned above the last block in the stack. 10 A blue square box is created with the <span> tag. With a zIndex of 2, it will be positioned above. reassigning the z-index (right). EXPLANATION From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 599 EXAMPLE 14.32 <html> <head><title>Coloring Text</title> <style