4 Replies Latest reply: Feb 25, 2013 10:25 PM by 862998 RSS

    how to apply css for panelTabbed on tab key press

    862998
      Hi

      I need to change the appearance of a tab based on the focus of the tab on Tab Key press.
      I am able to change the appearance on mouse hover/selection of the tab but not on focus via Tab key.

      I tried af|panelTabbed::tab:focus, af|panelTabbed::tab:focused, af|panelTabbed::tab:active but none of these seem to work

      Using Jdeveloper 11.1.1.6

      Can someone please help me through some possible solution to this asap.

      Thanks
        • 1. Re: how to apply css for panelTabbed on tab key press
          990534
          Hi,
          Hope this link helps you set a client and server side listener and do the operations as you require.
          You can follow this link written by frank.
          [ https://blogs.oracle.com/jdevotnharvest/entry/how_to_notify_the_server]
          Thanks,
          Raj.

          Edited by: RajaSekharReddy.M on Feb 23, 2013 9:20 PM
          • 2. Re: how to apply css for panelTabbed on tab key press
            862998
            Hi RajaSekhar

            I doubt if this solves the problem i have as the panelTabbed component doesnot have a focus event to trigger a call to client on a tab key press.
            And even if it did how do i get hold of the css properties for the Tab?

            Is there any other solution to it?

            Thanks
            • 3. Re: how to apply css for panelTabbed on tab key press
              990534
              Hi,
              Have you tried using the sample .Please let me know if have any problems . You can get the component and change the css on the client side in js . Try using disclosure listener that would work for both the click and tab events. Do you want to change the appearance for a single tab or for each and every tab. I don't find any problem in getting this done.Here is a sample on how to set the property.
               function newjsmethod(evt)
                  {
                       var somesource=evt.getSource();
                      somesource.setProperty("inlineStyle", "background-color:Aqua");
                  
                  }
              The above one sets the background of the tabbed one to aqua.

              Thanks ,
              Raj.

              Edited by: RajaSekharReddy.M on Feb 24, 2013 8:37 PM
              • 4. Re: how to apply css for panelTabbed on tab key press
                862998
                Hi RajaSekhar,

                I did try the snippet that you mentioned as below

                <af:panelTabbed>
                <af:showDetailItem clientComponent="true" text="Tab A">
                <af:panelGroupLayout>
                <af:outputText value="Viewing Tab A"/>
                </af:panelGroupLayout>
                <af:clientListener method="calljs" type="disclosure"/>
                </af:showDetailItem>
                <af:showDetailItem clientComponent="true" text="Tab B">
                <af:panelGroupLayout>
                <af:outputText value="Viewing Tab B"/>
                </af:panelGroupLayout>
                <af:clientListener method="calljs" type="disclosure"/>
                </af:showDetailItem>
                </panelTabbed>

                the javascript method has the code what you specified.

                But this does not solve the problem.

                What i want to achieve is this

                Consider i have 3 tabs A, B and C
                So for the panelTabbed i have some css globalselectors which will set some background color to the tab header alone (and not the tab body) which is being hovered at (not disclosed).
                Now when i do a tab press on the tab instead of hover i need to achieve the same background color as on hover for that particular tab header which has been focused/tabbed at.
                Hence i am not performing a click or a tab+enter to disclose the tab. It is just a focus/hover.
                Hence the disclose would not work. And there is no focus event for panelTabbed i.e. ShowDetailItem.

                I hope this makes it clear as to what i am looking for.

                Thanks