Menu Tabs in Admin Pages

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.

  • “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:

Page 3 of 5
First | Prev | 1 | 2 | 3 | 4 | 5 | Next | Last
View All