This discussion is archived
9 Replies Latest reply: Jan 18, 2013 6:34 PM by Ahmed.F RSS

How  to configurationTab menu Plugin in Apex4.2

Ahmed.F Newbie
Currently Being Moderated
hi,

i worked with 4.2 and i download Tab menu plugin to create drop down menu with the apex tabs ,i install the plugin but i can't Configure the plugin attribute to working properly

these attribute

jQuery selector submenu:
Tab set:
Include single subtab
Class first parent
Class last parent
Class first child
Class last child
File Prefix: #WORKSPACE_IMAGES#
Javascript libraries
CSS file:
Onload code

i tray to look on plugin demonstration and pdf Documentation but i can't configure the plugin ,

my question
how to configure this plugin and its attribute with details

My environment
- Apex 4.2
- Application Theme: 1
- Page Template Class: Two Level Tabs
  • 2. Re: How  to configurationTab menu Plugin in Apex4.2
    Nicolette Expert
    Currently Being Moderated
    Ahmed.F

    Can you set up a demonstration on apex.oracle.com of what you have tried so far.
    What specificly don't you understand? What doesn't work properly?

    On the [url http://apex.oracle.com/pls/apex/f?p=VANBAREN_PLUGINS:TABSUBMENU:0&c=VANBAREN]demo page  all the settings for the different configurations are shown.
    Hoover over the label of the setting to see the help.

    And the page templates are included in the download.

    Nicolette
  • 3. Re: How  to configurationTab menu Plugin in Apex4.2
    Ahmed.F Newbie
    Currently Being Moderated
    hi Nicolette,

    first thank you for this wonderful plugin which make apex menu more efficient and flexible,second thank you for fast replay

    i create sample demonstration on apex.oracle ,follow the steps listed below to know what i do :

    1- Create application with two level (parent tabs and standard tabs) theme no 1
    2- installation the plugin region_type_plugin_net_vanbaren_apex_tab_menu.sql
    3- i create parent tab "Tab menu" and 4 pages (main,tab1,tab2,tab3) with corresponding tabs
    4- i create plugin Region and put these attribute
    - Template:Two Level Tabs - Right Sidebar (optional / table-based)
    - Before html:
    - After HTML :
    - jQuery selector submenu:
    - Tab set: Tab menu
    - File Prefix: #IMAGE_PREFIX#
    - at the plugin level the theme number to 1
    when run application no drop down menu appear
    please if any steps wrong tell me

    demonstration link

    http://apex.oracle.com/pls/apex/f?p=1001212:1:8581927097001:::::

    Worksapce: demo
    Username:test
    password: test



    Regards
    Ahmed
  • 4. Re: How  to configurationTab menu Plugin in Apex4.2
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear ahmed

    Nicolette will help you as he didd with me.

    best regards
    mahmoud
  • 5. Re: How  to configurationTab menu Plugin in Apex4.2
    Ahmed.F Newbie
    Currently Being Moderated
    Hi Mahmoud ,
    Thank You my Friend but i read your post and make me confused ,i want regular steps to be Reference to me and any one use this plugin .

    if you can help me what you do exactly or go to my demonstration and show me whats wrong..

    from your post you have 2 ways to do this issue

    1- using the plugin
    2- make some changes in page template and create PL/SQL process and JS function to generates HTML list items under each parent tab

    What is the approach that you used to do this?

    thank you again my friend


    Regards
    Ahmed
  • 6. Re: How  to configurationTab menu Plugin in Apex4.2
    Ahmed.F Newbie
    Currently Being Moderated
    hi ,

    any help for this issue


    Thanks
    Ahmed
  • 7. Re: How  to configurationTab menu Plugin in Apex4.2
    Nicolette Expert
    Currently Being Moderated
    Ahmed

    Well work actually goes before voluntary answering questions here.
    Did you read this {thread:id=2396951}

    It looks like you missed this from the plugin documentation
    The plug-in uses the (parent) tab setting of the page template as a template for the menu.
    To position the tabs within the parent tab use the #TABS# substitution string
    Without the #TABS# substitution string the plugin doesn't know where to put the standerd tabs.

    If you want to go fast import the theme export that is in the plugin download.
    And change the theme and template settings of the plugin accordingly
    It has the page templates I have used in the demo.

    Nicolette

    PS The plugin doesn't support the #TAB_INLINE_EDIT# substitution string.
  • 8. Re: How  to configurationTab menu Plugin in Apex4.2
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Ahmed,

    The option chosen is the plugin of Nicolette. The other option of JS+PL/SQL may be opened and discussed in other thread.
    The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)

    0) a) My Page template name is WithNicolettePlugin.
    b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
    c) the settings of the plugin as follows:
    - Template : WithNicolettePlugin
    - Before HTML :
     <ul class="dhtmlMenuLG2"> 
    - After HTML :
     </ul> 
    - jQuery selector submenu : .dhtmlSubMenu2
    - Tab set : main
    - Include single subtab : yes
    - Class first parent : ui-corner-left
    - Class last parent : ui-corner-right
    - File Prefix : #IMAGE_PREFIX#
    the others are empty     

    1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
    <link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />
    2) link the following Scripts into the Header section of the Page Template
    <script type="text/javascript">
    var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
    </script>
    <script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <style> html {visibility:hidden;} </style>
    <script type="text/javascript">
    apex.security.framebreaker("D");
    </script>
    <script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    3) Re-write the Body section to be as the following
    <div id="page-header">
          
      .... LOGO AND WELCOME HERE ......  
     
       <div class="apex-top-bar-end">
           <div class="apex-top-bar">
                <div id="tabs" class="dhtmlMenuLG">
                  #REGION_POSITION_08#   <!-- Put the plugin at your page zero in REGION 8 --> 
                </div>
           </div>
       </div>   
    </div>
     
    <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
    <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
    <div id="body">
        <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
        <tbody>
          <tr>
            <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
            <td class="tbl-sidebar">#REGION_POSITION_03#</td>     
          </tr>
        </tbody>
        </table>
    </div>
    4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
         title="#TAB_LABEL#">
         "#TAB_LABEL#
      </a>
    </li>
    {code}
    and Non Current Standard Tab as the following
    {code}
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
          title="#TAB_LABEL#"> 
          "#TAB_LABEL#
      </a>
    </li>
    5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
    <div id="#TAB_ID#" class="current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>
    and Non Current Parent Tab as the following
    <div id="#TAB_ID#" class="non-current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>
    6- You will find a sample here in
    Workspace : ralab
    User : nicolette
    Password : abc123
    Application 33791 - TestDropDownAppBuilderTabs

    If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.

    Best Regards
    Mahmoud
  • 9. Re: How  to configurationTab menu Plugin in Apex4.2
    Ahmed.F Newbie
    Currently Being Moderated
    hi,

    Thanks for all, Thank you Mahmoud


    Regards

    Ahmed

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points