It is no surprise with the popularity of the i-devices (iphone, ipad), that many of the iOS UI based LnF (look and feel) would start to inspire web designers to incorporate the same LnF into their web sites. Take for example, a normal dialog popup. In the iOS world, the LnF becomes a bit more elegant by add just a simple element as a "floating" close button:
In this blog post, I will describe how this can be accomplished using OOTB ADF components and CSS3 style elements.
There are two ways that this can be achieved. The easiest way is to simply replace the default image, which looks like this, and adjust the af|panelWindow:close-icon-style skin selector.
Using this simple technique, you can come up with this:
The CSS code to produce this effect is pretty straight forward:
af|panelWindow.test::close-icon-style{
background-image: url("../popClose.gif");
line-height: 10px;
position: absolute;
right: -10px;
top: -10px;
height:38px;
width:38px;
outline:none;
}
You can see from the CSS, the position of the region, which holds the image, is relocated based on the position based attributes. Also, the addition of the "outline" attribute removes the border that is visible in Chrome and IE.
The second example, is based on not having an image to produce the close button. Like the previous sample, I will use the OOTB panelWindow. However, this time I will use a OOTB commandButton to replace the image. The construct of the components looks like this:
The commandButton is positioned first in the hierarchy making the re-positioning easier. The commandButton will also need a style class assigned to it (i.e. closeButton), which will allow for the positioning and the over-riding of the default skin attributes of a default button. In addition, the closeIconVisible property is set to false, since the default icon is no longer needed. Once this is done, the rest is in the CSS. Here is the sample that I created that was used for an actual customer POC:
The CSS code for the button:
af|commandButton.closeButton,
af|commandButton.closeButton af|commandButton:text-only{
line-height: 10px;
position: absolute;
right: -10px;
top: -10px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
-ms-border-radius: 70px;
border-radius: 70px;
background-image:none;
border:#828c95 1px solid;
background-color:black;
font-weight: bold;
text-align: center;
text-decoration: none;
color:white;
height:30px;
width:30px;
outline:none;
}
The CSS uses the border radius to create the round effect on the button (in IE 8, since border-radius is not supported, this will only work with some added code). Also, I add the box-shadow attribute to the panelWindow style class to give it a nice shadowing effect.
