8: NAVIGATION STRATEGIES in Visual Studio .NET

Generate QR Code ISO/IEC18004 in Visual Studio .NET 8: NAVIGATION STRATEGIES
CHAPTER 8: NAVIGATION STRATEGIES
Decode QR Code In .NET
Using Barcode Control SDK for VS .NET Control to generate, create, read, scan barcode image in VS .NET applications.
The names of the form and select elements are important because JavaScript uses the names as a path to the selected option. (If you re familiar with arrays, the options are all treated as array elements.) The JavaScript is placed in a separate file because if you re going to be using it with a global navigation system, you don t want to have to rewrite it with every page. The following JavaScript should be saved in a text file named globMenu.js.
Quick Response Code Creation In .NET Framework
Using Barcode creation for .NET Control to generate, create Quick Response Code image in .NET applications.
function optionMenu() { var choice = document.menuNow.global1.selectedIndex; var urlNow = document.menuNow.global1.options[choice].value; window.location.href = urlNow; }
QR Code Recognizer In Visual Studio .NET
Using Barcode recognizer for .NET Control to read, scan read, scan image in VS .NET applications.
What that reflects is the HTML5 Document Object Model (DOM). The document is the Web page, menuNow is the name of the form element, global1 is the name of the select element, and selectedIndex is the selected option. Because the selectedIndex is a number between 0 and the number of options in the <select> tag container, it can be used to choose the array element (option), which is selected. Whatever value is stored in the option is passed to the variable named urlNow. For example, the following line has a relative URL of animals/dogs.html:
Barcode Drawer In .NET Framework
Using Barcode drawer for VS .NET Control to generate, create bar code image in .NET framework applications.
<option value= animals/dogs.html >Dogs</option>
Decoding Bar Code In .NET
Using Barcode scanner for VS .NET Control to read, scan read, scan image in VS .NET applications.
The final line in the JavaScript, window.location.href = urlNow, has the same function as the following HTML5 line:
Drawing QR Code ISO/IEC18004 In Visual C#
Using Barcode creation for .NET Control to generate, create QR Code JIS X 0510 image in Visual Studio .NET applications.
<a href= animals/dogs.html >
Denso QR Bar Code Encoder In .NET Framework
Using Barcode creation for ASP.NET Control to generate, create QR Code image in ASP.NET applications.
In this context, a different JavaScript function would have to be written for each <select> tag because the function uses a specific reference to that tag (global1). More sophisticated JavaScript could be developed to use variables for the different element names, but the function employed here is relatively short and easier to implement. To test this out yourself, create simple Web pages with the following names:
QR Code 2d Barcode Generator In VB.NET
Using Barcode creator for VS .NET Control to generate, create QR Code 2d barcode image in VS .NET applications.
horses.html dogs.html cats.html rabbits.html raccoons.html
Barcode Drawer In .NET
Using Barcode printer for .NET Control to generate, create barcode image in VS .NET applications.
The Web pages can just have names on them nothing fancy. Then, in the same directory, enter the following HTML5 code (SelectNavJS.html in this chapter s folder at www. wiley.com/go/smashinghtml5).
Code128 Drawer In Visual Studio .NET
Using Barcode maker for .NET framework Control to generate, create Code 128 image in .NET framework applications.
PART II: PAGES, SITES, AND DESIGNS
Code-39 Creation In Visual Studio .NET
Using Barcode creation for .NET Control to generate, create Code 39 image in Visual Studio .NET applications.
<!DOCTYPE HTML> <html> <head> <script type= text/javascript src= globMenu.js /> <meta http-equiv= Content-Type content= text/html; charset=UTF-8 > <title>Drop-Down Menu</title> </head> <body> <article> <header> <nav> <form name= menuNow > <label for= animals >Animals</label> <select id= animals name= global1 onChange= optionMenu() > <option value= animals/horses.html >Horses</option> <option value= animals/dogs.html >Dogs</option> <option value= animals/cats.html >Cats</option> <option value= animals/rabbits.html >Rabbits</option> <option value= animals/raccoons.html >Raccoons</option> </select> <label for= vegetables >Vegetables</label> <select id= vegetables name= global2 > <option value= carrots >Carrots</option> <option value= squash >Squash</option> <option value= peas >Peas</option> <option value= rice >Rice</option> <option value= potatoes >Potatoes</option> </select> <label for= minerals >Minerals</label> <select id= minerals name= global3 > <option value= tin >Tin</option> <option value= gold >Gold</option> <option value= copper >Copper</option> <option value= iron >Iron</option> <option value= mercury >Mercury</option> </select> </form> </nav> </header> </article> </body> </html>
Painting EAN8 In .NET Framework
Using Barcode encoder for .NET framework Control to generate, create UPC - 8 image in Visual Studio .NET applications.
Test the page using with Google Chrome or Opera at the time of this writing, those were the only two browsers that had implemented this aspect of HTML5. For the time being, you won t be doing anything with the second two drop-down menus, but at the end of the chapter you ll be given an opportunity to complete them with a few additions to the JavaScript file.
Print Barcode In .NET
Using Barcode creation for ASP.NET Control to generate, create bar code image in ASP.NET applications.
CHAPTER 8: NAVIGATION STRATEGIES
Paint UCC - 12 In C#
Using Barcode creator for .NET Control to generate, create UPC Symbol image in .NET framework applications.
CREATING CONSISTENCY
Painting EAN13 In Java
Using Barcode drawer for Java Control to generate, create EAN 13 image in Java applications.
One of the most important features of a good navigation system is consistency. The user has to be able to know where to find the navigation system no matter where she is in the site. If one page has the navigation at the top and the next page does not, in the same site, users may not know where they are relative to where they started or where they re going. One of the most misquoted pieces of wisdom about consistency can be found in Ralph Waldo Emerson s essay, Self-Reliance. By quoting only a part of Emerson s thought, many people are misled to believe that consistency is wicked. That famous misquote is . . . consistency is the hobgoblin of little minds. . . . What Emerson fully wrote is, A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. The reason that the quote is important is that Emerson never said that consistency is a bad thing. Foolish consistency is the problem not consistency. When it comes to navigation consistency is essential, and by all means avoid foolish consistency. In other words, don t put a bad navigation system together and then repeat it because it s consistent. As far as a great soul having nothing to do, that may be a good thing. With consistency, you don t have to reinvent the navigation system with every new page. A great soul would have different consistencies for different audiences and types of sites; but within the site, the consistency is constant. In her work on grouping elements, Jennifer Tidwell talks about using color-coded sections to assist users in keeping track of where they are. Using colors, you can add clarity to global navigation. The three global categories that have been selected for navigation animal, vegetable, and mineral can be a good example of multiple-consistency (each menu is consistent with the other menus). For the animal category, you might use brown tones; for the vegetable category, green tones; and for the mineral category, nickel tones. Figure 8-5 shows an example where the global navigation is in place and the different pages have a color scheme that differentiates them from one another and at the same time places each in the appropriate grouping.
Make GS1-128 In VB.NET
Using Barcode creator for .NET Control to generate, create EAN / UCC - 13 image in .NET applications.
Universal Product Code Version A Encoder In Visual Basic .NET
Using Barcode creation for VS .NET Control to generate, create GS1 - 12 image in Visual Studio .NET applications.
Bar Code Maker In .NET
Using Barcode drawer for ASP.NET Control to generate, create barcode image in ASP.NET applications.