2 Replies Latest reply: Jan 19, 2013 10:34 PM by Mahmoud_Rabie RSS

    jquery menu plugin  integrated in Tab's (using a custom theme )

    Bas de Klerk
      Hi,

      I'm trying to use the jquery menu plugin and use it combined with tab's. I would like to get the effect which is also in the APEX IDE ( TAB's with submenu's expanding below the TAB ).
      So far I have my tab's and also my menu's which are show as a button on the page which expand when you click on them. But I would like to have the menu attached to the tab.
      I found somewhere (http://www.theapexfreelancer.com/apex/f?p=APEXFREELANCER:JQUERY_MENU_PLUGIN:0) that I should name the TAB and the LIST's on which the menu's are build exactly the same to achieve this, but so far no luck.

      Does anyone know of a cookbook describing how to achieve this or has any ideas what to check ?

      Regards,
      Bas

      b.t.w. Have a great 2012!
        • 1. Re: jquery menu plugin  integrated in Tab's (using a custom theme )
          jariola
          Hi,

          As I understand you can not use APEX standard tabs system and have menus.
          You need modify page template and replace substitution #TAB_CELLS# with some region position substitution string.
          Then you create list to that region position and use e.g. that plugin you did refer.

          Regards,
          Jari

          http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0

          Edited by: jarola on Jan 2, 2012 2:25 PM

          This presentation might help
          http://www.sumneva.com/apex/f?p=15000:395:0::NO::P395_PRESENTATION_KEY:ALT_TAB
          • 2. Re: jquery menu plugin  integrated in Tab's (using a custom theme )
            Mahmoud_Rabie
            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