By Pamela Rodriguez

Example 1: Default settings

Hugh Jackman Jennifer Lawrence Topher Grace Joseph Gordon-Levitt Anne Hathaway Jessica Biel Scarlet Johanson Christian Bale Helena Bonham-Carter Robert Downey Jr. Kate Beckinsale Meryl Streep Josh Hutcherson Josh Duhamel Jennifer Hudson Jessica Biel Jessica Alba James Marsdsen James Dean Jamie Fox Julia Roberts Matthew Perry Matt Le Blanc Eva Mendez Ryan Gosling Courtney Cox Jennifer Aniston Leonardo DiCaprio Mark Ruffalo Edward Norton Bradley Cooper Brad Pitt Zachary Quinto Gwyneth Paltrow Bruce Willis John Malkovich Helen Mirren Tom Cruise Demian Bichir Zac Efron Morgan Freeman Denzel Washington Michael Douglas Will Smith Zooey Deschannel 123skja #kusak Famke Yansen Ian McKellen Ian McShane Natalie Portman Nathan Fillion Liam Neeson Oscar Torre Olivia Wilde Peter Facinelli Quvenzhane Wallis Sandra Bullock Keneth Branagh

In order to obtain the previous result (which is a tabbed navigation arranged in alphabetical order with the default settings) the structure needed is the following:

<div id="alphabet01">
    <span>Hugh Jackman</span>
    <span>Jennifer Lawrence</span>
    <span>Topher Grace</span>
    <span>Joseph Gordon-Levitt</span>
    <span>Anne Hathaway</span>
    ...And some more...
</div>

All of the elements that need to be ordered enveloped in SPAN tags, all said tags inside a DIV, which will become the tab display. The imports needed at the top of the page:

<link href="fancymealphabet.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="fancymealphabet.JQuery.js"></script>

And the JQuery instruction to call our plugin into action.

<script>
    $(function() {
        $('#alphabet').fancymealphabet();
    });
</script>

This provides the result shown above.

Example 2: Color themes and tab height

Hugh Jackman Jennifer Lawrence Topher Grace Joseph Gordon-Levitt Anne Hathaway Jessica Biel Scarlet Johanson Christian Bale Helena Bonham-Carter Robert Downey Jr. Kate Beckinsale Meryl Streep Josh Hutcherson Josh Duhamel Jennifer Hudson Jessica Biel Jessica Alba James Marsdsen James Dean Jamie Fox Julia Roberts Matthew Perry Matt Le Blanc Eva Mendez Ryan Gosling Courtney Cox Jennifer Aniston Leonardo DiCaprio Mark Ruffalo Edward Norton Bradley Cooper Brad Pitt Zachary Quinto Gwyneth Paltrow Bruce Willis John Malkovich Helen Mirren Tom Cruise Demian Bichir Zac Efron Morgan Freeman Denzel Washington Michael Douglas Will Smith Zooey Deschannel 123skja #kusak Famke Yansen Ian McKellen Ian McShane Natalie Portman Nathan Fillion Liam Neeson Oscar Torre Olivia Wilde Peter Facinelli Quvenzhane Wallis Sandra Bullock Keneth Branagh

Changing the color theme with just one parameter in the function call is one of the advantages every FancyMe plugin has. The available themes are:

In the following piece of code, the pink theme is being applied

<script>
    $(function() {
        $('#alphabet').fancymealphabet({theme: "pink", tabheight: "300px"});
    });
</script>

The second variable applied is tabheight. Notice how in the first example, the height of the tab container varies according to the length of its content. If you want this to be a fixed height, just enter the value in pixels through a parameter in the function call, as shown. In this example, tabheight: "300px" changes the auto height to a fixed 300px height

Example 3: Fixing Column Length

Hugh Jackman Jennifer Lawrence Topher Grace Joseph Gordon-Levitt Anne Hathaway Jessica Biel Scarlet Johanson Christian Bale Helena Bonham-Carter Robert Downey Jr. Kate Beckinsale Meryl Streep Josh Hutcherson Josh Duhamel Jennifer Hudson Jessica Biel Jessica Alba James Marsdsen James Dean Jamie Fox Julia Roberts Matthew Perry Matt Le Blanc Eva Mendez Ryan Gosling Courtney Cox Jennifer Aniston Leonardo DiCaprio Mark Ruffalo Edward Norton Bradley Cooper Brad Pitt Zachary Quinto Gwyneth Paltrow Bruce Willis John Malkovich Helen Mirren Tom Cruise Demian Bichir Zac Efron Morgan Freeman Denzel Washington Michael Douglas Will Smith Zooey Deschannel 123skja #kusak Famke Yansen Ian McKellen Ian McShane Natalie Portman Nathan Fillion Liam Neeson Oscar Torre Olivia Wilde Peter Facinelli Quvenzhane Wallis Sandra Bullock Keneth Branagh

Since the plugin converts the list of items into alphabetically ordered lists, and these lists can be long, there is a parameter to break lists into smaller groups. The parameter is collength, and its default value is 15. This means that a list will only be 15 elements long before it breaks into a second list, floated to the right of the first one. In the example above, the parameter is changed to 12 (you may want to check the tab for letter "J" in this and the previous example to see the difference) through the following code:

<script>
    $(function() {
        $('#alphabet').fancymealphabet({theme: "orange", tabheight: "300px", collength: "12"});
    });
</script>