9 Replies Latest reply: Jan 18, 2013 8:34 PM by Ahmed.F RSS

    How  to configurationTab menu Plugin in Apex4.2

    Ahmed.F
      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
          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
            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
              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
                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
                  hi ,

                  any help for this issue


                  Thanks
                  Ahmed
                  • 7. Re: How  to configurationTab menu Plugin in Apex4.2
                    Nicolette
                    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
                      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
                        hi,

                        Thanks for all, Thank you Mahmoud


                        Regards

                        Ahmed