9 Replies Latest reply: Jan 19, 2013 10:29 PM by Mahmoud_Rabie RSS

    Menu on the Tab

    695721
      Dears ,
      how can attach menu's to my page tabs , in details please
        • 1. Re: Menu on the Tab
          695721
          please , someone help me
          • 2. Re: Menu on the Tab
            xarg-Xrc
            First you create the tabset in shared componenets.

            Then go to your page you want to add the tabset. (click on edit page)

            Then select the tabset in DISPLAY ATTRIBUTES >> STANDARD TAB SET.
            • 3. Re: Menu on the Tab
              695721
              i am sorry i mean like this

              http://www14.0zz0.com/2012/03/27/01/840207389.png

              Edited by: j.dev on 27/03/2012 03:07 ص
              • 4. Re: Menu on the Tab
                jariola
                Hi,

                Maybe this Scott Spendolini presentation help
                http://www.sumneva.com/apex/f?p=15000:395:0::NO::P395_PRESENTATION_KEY:ALT_TAB

                BTW, on page where you have take screenshot is general info how you can do that.

                Regards,
                Jari

                Edited by: jarola on Mar 27, 2012 7:53 AM
                These plugins might also help
                http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/drop-down-menu_60.html
                http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/warp11-css-menu_85.html

                -----
                http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
                • 5. Re: Menu on the Tab
                  695721
                  thanks for replay

                  but it still difficult for me .

                  please someone explain it for me step by step .

                  thank you
                  • 6. Re: Menu on the Tab
                    Nicolette
                    Ahmed

                    Used so we know what your level of understanding of apex is. Which will help us in helping you.

                    First do you know how to setup the standard and parent tabs in an apex application?

                    The picture you linked to shows a three level menu.
                    Level 1 Misc
                    Level 2 Lov option groups
                    Level 3 Cascading LOV

                    Do you need 3 or more levels in your menu or are 2 enough?

                    Nicolette van Baren
                    [url http://www.apex-plugin.com/oracle-apex-plugins/odtug-competition/tab-menu_203.html]Plugin Tab menu
                    • 7. Re: Menu on the Tab
                      Mahmoud_Rabie
                      Dear Ahmed,

                      1) Downlod the Apex region plugin mentioned by Nicolette on
                      http://www.apex-plugin.com/oracle-apex-plugins/odtug-competition/tab-menu_203.html

                      2) Install the plugin and manage your tabs and submenus through plugin configuration

                      Regards

                      Mahmoud
                      • 8. Re: Menu on the Tab
                        Nicolette
                        Mahmoud

                        It seems to me that Ahmed already downloaded the plugin see {thread:id=2396951}.

                        But as along as we don't know of Ahmed needs more than 2 levels. Which isn't possible with apex tabs.
                        And if he understands the concept of "one level tab" and "two level tabs" application and how to set them up.

                        We don't know were to start helping him.

                        Nicolette van Baren
                        [url http://www.apex-plugin.com/oracle-apex-plugins/odtug-competition/tab-menu_203.html]Plugin Tab menu
                        • 9. Re: Menu on the Tab
                          Mahmoud_Rabie
                          The solution in detail:

                          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