80 likes | 241 Views
Tabs. Source: http://www.barelyfitz.com/projects/tabber/. BarelyFitz Design Steps. Create a div with class=“ tabber ” Within that div, create any number of divs with class=“ tabbertab ”. Tabs names can be given using the “title” attribute of the div tag, or can be in h2, h3, …, h6.
E N D
Tabs Source: http://www.barelyfitz.com/projects/tabber/
BarelyFitz Design Steps • Create a div with class=“tabber” • Within that div, create any number of divs with class=“tabbertab”. Tabs names can be given using the “title” attribute of the div tag, or can be in h2, h3, …, h6. • Connect to tabber.js, provided from the web site. <script type=“text/javascript” src=“tabber.js”> </script> (Code can be customized for your needs. Makes calls automatically when linked.) • Style the results list as tabs. (Can use the style sheet provided on the website, example.css)
BarelyFitz Method • When page is loaded, tabber.js script runs to convert your plain HTML into dynamic HTML. • The dynamic HTML uses an unordered list for tabs.
createElement(); createElement() – creates the specified HTML element in an HTML document var element = document.createElement(tagName); • element is the created element object • tagName is a string that specifies the type of element to be created
insertBefore(); insertBefore() – inserts a new child node before an existing child node. elementNode.insertBefore(new_node,existing_node) • new-node – the node to insert • Existing_node – the existing node. The new node is inserted before this node.
innerHTML innerHTML sets or returns the inner HTML of an element. <html> <head><script>function changeLink(){document.getElementById('myAnchor').innerHTML="W3Schools";document.getElementById('myAnchor').href="http://www.w3schools.com";document.getElementById('myAnchor').target="_blank";}</script> </head> <body><a id="myAnchor" href="http://www.microsoft.com">Microsoft</a><input type="button" onclick="changeLink()" value="Change link"> </body> </html>