Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div class="table-wrap">
  <table cellpadding="10px" align="center" style="width:85%; border-spacing:0px; border:3px solid #ccc; border-collapse:collapse; table-layout:auto;">
    <tbody style="border-collapse:collapse;">
<!-- Table Titles -->
      <tr>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Property Name
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Possible Values
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Description
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Requirement(s)
        </th>
        </tr>
<!-- useImages Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          useImages
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em>true</em>/<em>false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if images are provided and used in the drawing of a tab panel.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse">
          <div>
            The following images are needed in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code>:
          </div>
          <ul>
            <li>left.gif - the left side image of an <em>inactive</em> tab
            </li>
            <li>left-sel.gif - the left side image of an <em>active</em> tab
            </li>
            <li>middle.gif - horizontally repeated middle image of an <em>inactive</em> tab
            </li>
            <li>middle-sel.gif - <span>horizontally repeated middle image of an</span> of an <em>active</em> tab
            </li>
            <li>right.gif - the right side image of an <em>inactive</em> tab
            </li>
            <li>right-sel.gif - the ride side image of an <em>active</em> tab
            </li>
          </ul>
        </td>
      </tr>
<!-- hiImages Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiImages
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><span><em>true</em>/<em>false</em></span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <span>Determines if highlight images are provided and used when the cursor hovers over a tab.</span>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <div>
            The following images are needed in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code>:
          </div>
          <ul>
            <li>left-hi.gif - the left side image of a <em>highlighted</em>, <em>inactive</em> tab
            </li>
            <li>middle-hi.gif - horizontally repeated middle image of a <em>highlighted</em>, <em>inactive</em> tab
            </li>
            <li>right-hi.gif - the right side image of a <em>highlighted</em>,<em>inactive</em> tab
            </li>
          </ul>
        </td>
      </tr>
<!-- imageFileExtension Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          imageFileExtension
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p style="text-align: center;">
            <code>Any valid image file extension</code><br>
            <code><em>Default</em>: .gif</code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Specifies image file extension used for Tab Panel images.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Optional</em>
          </p>
        </td>
      </tr>
<!-- height Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          height
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines the tab height in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Digits Only</em>
        </td>
      </tr>
<!-- defaultBackColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          defaultBackColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the default background color of the active tab.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>false</em></code>
        </td>
      </tr>
<!-- hiColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code style="text-align: center;">Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the highlight color of non-selected tabs when cursor hovers over.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>false</em></code>
        </td>
      </tr>
<!-- leftWidth Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          leftWidth
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the left side image.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            Should match width of provided image.
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <em>true</em></code>
          </p>
        </td>
      </tr>
<!-- rightWidth Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          rightWidth
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the right side image.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            Should match width of provided image.
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <em>true</em></code>
          </p>
        </td>
      </tr>
<!-- selColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          selColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines color of <em>active</em> tab.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>true</em></code>
        </td>
      </tr>
<!-- selBold Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          selBold
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em>true</em>/<em>false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if <em>active</em> tab header is also bold.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
        </td>
      </tr>
<!-- borderColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          borderColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the color of the Border.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><strong>borderSize</strong> needs to be set to a digit pixel value greater than zero (Otherwise, color will not be seen.)</code>
          </p>
        </td>
      </tr>
<!-- leftMargin Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          leftMargin
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
              <code><span>Any valid pixel value</span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the left side margin of the tabs in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
          </p>
        </td>
      </tr>
<!-- hiUnderline Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiUnderline
    </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em style="text-align: center;">true</em><span>/</span><em style="text-align: center;">false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if <em>highlighted</em>, <em>inactive</em> tab header is also underlined.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Optional</em>
        </td>
      </tr>
<!-- separated Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          separated
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em style="text-align: center;">true</em><span>/</span><em style="text-align: center;">false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if there is a separation gab between the tabs.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
        </td>
      </tr>
<!-- backBar Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          backBar
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><em style="text-align: center;">true</em>/<em style="text-align: center;">false</em></code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if the area behind the tabs, the Back Bar, is visible or transparent.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Optional</em>
		  <p>
			If set to <em>true</em>, it is required for either <strong>backBarColor</strong> to be set to a valid color value or an image named <code>middle.gif</code> be provided in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code> in order to be visible.
		  </p>
        </td>
      </tr>
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          backBarColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the color of the Back Bar.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>backBar</strong> needs to be set to <em>true</em></code>
        </td>
      </tr>
<!-- borderSize Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          borderSize
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p style="text-align: center;">
            <code>Any valid pixel value</code><br>
            <code><em>Default</em>: 1</code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the tab panel's border size in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Digits Only</em>
        </td>
      </tr>
<!-- defaultTabColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          defaultTabColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><span>Any valid color name or hex value</span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the background color of inactive tabs.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><strong>useImages</strong> needs to be set to <em>false</em></code>
          </p>
          <p>
            <em><em>ProfoundUI versionVersion 5.12.1 or, Fix Pack 13.0 and later.</em></em>
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

...