2) Define the Admin Panels
The admin panels are the simplest to define: the important point to remember is to define the value of the ‘id’ attribute of the <div> element to match the value of the ‘rel’ attribute of the corresponding <a> menu tab link element. In this situation, however, as I am displaying formatted columns of information, I am using a <table> element in place of the <div> element: as the underlying menuing functionality relies on the ‘class’ and ‘id’ attributes, which are common to most all XHTML ‘container’ elements, the functionality is retained; furthermore, other ‘container’ elements can be used for this functionality, based on the individual design of the menu page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <table class=“form-table nav-tab-contents” id=“avp_unicode_charkbd_admin_menu_panel_1” style=“display: none;”> <colgroup> <col width=” 5%” /> <col width=“15%” /> <col width=“80%” /> </colgroup> <thead> <tr> <th colspan=“3”><strong>Toggle the overall display of any given set of special characters by checking or unchecking the appropriate checkbox below.</strong></th> </tr> <tr> <th>&#10003;</th> <th><strong>Font</strong></th> <th><strong>Font Description</strong></th> </tr> </thead> <tbody> <tr class=“even” valign=“top”> <td><input type=“checkbox” checked=“checked” name=“checkbox[]” value=“Common” /></td> <td><strong>Common</strong></td> <td><strong>Commonly Used Definitions</strong> This character set contains the following subsets: Text, Punctuation, Quotes, Signs and Symbols and Mathenmatics.</td> </tr> <tr class=“odd” valign=“top”> <td><input type=“checkbox” name=“checkbox[]” value=“Keyboard” /></td> <td><strong>Keyboard</strong></td> <td><strong>Typewriter Keyboard</strong> This character set contains the following subsets: Upper Case Letters, Lower Case Letters and Numeric Pad.</td> </tr> <tr class=“even” valign=“top”> <td><input type=“checkbox” name=“checkbox[]” value=“Roman Numerals” /></td> <td><strong>Roman Numerals</strong></td> <td><strong>Roman Numerals</strong> This character set contains the following subsets: Upper Case, Lower Case and Miscellaneous.</td> </tr> </tbody> </table> |
- “class” — The ‘form-table’ class is a standard WordPress convention for displaying table information using a <form> statement. The key here is the other half of the attribute value, ‘nav-tab-contents’, which is used by the jQuery function to identify the panels to hide: this class is not defined by WordPress, it is exclusive for the menuing functionality, and it does not involve any CSS definitions.
- “id” — This is the attribute whose value is what corresponds to the value of the ‘rel’ attribute of the <a> element in the menu tabs. These two attributes are used in the jQuery function to link the menu tab with the admin panel. The attribute value must be unique to the page.
- “style” — The “display: none” parameter of this attribute is what hides the panel. (The example above is for the second menu panel of the Unicode Character Keyboard plugin so it is not immediately displayed.) To show the panel, remove the “none” part of the parameter.
The short URL of the present article is: http://www.terryobrien.me/1x8oi
Personal Links