Donnerstag, 19. Januar 2012

A button is not always a button

I'm back to reality. Switching back to theme Crimson - 23 stopped my example from working.
In fact, I started with this theme and that was the main reason to search for soemthing else then the attribute disabled="disabled".


Looking into the html sources shows that a button is defined as an anchor and not as a button in the templates of this theme.

<a href="#LINK#" class="uButton apex_disabled" id="#BUTTON_ID#" #BUTTON_ATTRIBUTES# role="button" disabled="disabled"><span>#LABEL#</span></a>

And the attribute disabled does not work by definition with an anchor!

So I started again to find a solution.

  • First I tried again to bind/unbind dynamic action events with JavaScript. 
  • Then I was close to give up and tell you to forget about theme Crimson - 23.
  • In the end I decided to change the template and make a button out of it.
So lets see how that works.
First I only changed the Button Disabled template to

<button href="#LINK#" class="myButton apex_disabled" id="#BUTTON_ID#" #BUTTON_ATTRIBUTES# role="button" disabled="disabled"><span>#LABEL#</span></button>

and gave it a shot.


The result does not really look nice, but what makes me worry is that the page is refreshed after the dynamic action has finished. So I start to work on the template.

No, wait a minute.

Maybee it is better to copy the template from theme Scarlet - 21 (I simply subscribe to it, refresh and unsubscribe again) and only adust the css class to myButton. It still looks ugly, but no refreshes anymore. So it looks like we are only some CSS styles away from the wanted result.

Remark: "Sounds funny, but editing the shared style within Apex does not work. I have to delete and upload it again to see the effect. The size is far below 32K. So that could not be the reason"


So first I copy all uButton related styles to my Crimson_23.css file and change the type from anchor to button.

Being hit by reality (again). I thought it will be a "piece of cake" to get a button look like the anchor used by apex. So in the end it was not. I had to learn some more CSS and how to work with firebug (thanks for that) to get through. In the end it took several days to come that far (ok, I only have little spare time to work on this). I was even close to give up, when I came across this  link:

BonBon Buttons

showing that there must be a way to achieve my goal.

So now my buttons look like this:




And that is pretty close to the apex uButton. I only have finalized the Button and Button Disabled template. That should give you at least a starting point. If you plan to use the hotbutton feature or any other button template you will have to change the CSS styles yourself.

Sources: ThemeAdmin_4.sql, DisableButtonExample_6.sql, Crimson_23.css, Custom.js

Next I will integrate this button into my DBMS_PROFILER application.

Kommentare:

  1. Martin,

    Some elements in the DOM have a default action. For an anchor element, the default action is to take you to the page in the href attribute. As you mentioned, disabling an element does not prevent the default action. However, you can do so with some JavaScript. In fact, with just a little bit of code you can both prevent the default action AND prevent from bubbling up in the DOM. Simply add onclick="return false;" to your anchor.

    Also, regarding the style rules not updating, make sure you're telling your browser to avoid cashed versions of the CSS document by clicking Ctrl + F5.

    Regards,
    Dan

    AntwortenLöschen
    Antworten
    1. Dan,

      the default action is not my problem in this case. I have even removed the onclick and href argument from my template. I use a dynamic action triggered by the button. You can find it in the eventlist on page level. The anchor ignores the disabled argument as described in W3C standard and therefor the listening event is triggered. If I use a button instead the disabled argument is followed and the listening event is not triggered. If I want to keep the anchor tag, I would have to scan for listening events and handle them with javascript.

      How do I avoid cased versions of my CSS document?

      Regards Martin

      Löschen