First of all I’m no big jQuery or CSS geek I know a little and I search the net
I was building a site for a client who wanted Image buttons not text links and you should know me if you have read past posts I believe Dynamic Data is about changing as little as possible in the pages I like to do it all if possible using the Metadata, so I thought is there a way of doing this using pure CSS, there is sort of but you are still left with the text of the hyperlink, that is where jQuery came in, and then I thought I need to add a CSS class to each button and again jQuery came to my aid. so here we go.
So the first job is to somehow automatically add the CSS class to each of the buttons that we want to swap to image button.
function NAC_ReplaceHyperLinkWithImageButton() {
// array of button commands/names to affect
var toMatch = ["Details", "Edit", "Delete", "Update", "Cancel", "Insert", "Select", "New"];
// commands/names to replace
var toReplace = { "New": "Insert" };
$(document).ready(function () {
$("TABLE.DDDetailsTable a, TABLE.DDGridView a")
.each(function () {
// get the inner text
var innerText = $(this).text();
if ($.inArray(innerText, toMatch) > -1) {
// do replacement of commands to Replace
var found = toReplace[innerText];
// check there is a match in the lookup table
if (typeof found !== "undefined")
innerText = found;
// get the embedded text
$(this).addClass(innerText);
// add a tooltip
$(this).attr('Title', innerText);
// remove the hyperlinks text
$(this).text('');
}
});
});
}
// run script
NAC_ReplaceHyperLinkWithImageButton();
// bind script to AJAX bits
Sys.Application.add_load(NAC_ReplaceHyperLinkWithImageButton);
Listing 1 – jQuery for the swap out
So first of all we have an array this contains ALL the button names (the display text) that we want to affect, next we hook into the jQuery Read event then we are selecting command buttons List, Details, Edit and ListDetails pages using these two selectors:
"TABLE.DDDetailsTable a, TABLE.DDGridView a"
after that I am using the jQuery inArray function to check if the buttons text is one we want to affect. Then having gotten the innerText form the hyperlink we add the CSS class, then finally we remove the text so only the icon will show.
jQuery is so cool mixed with CSS.
Figure 1- hyperlinks replace with buttons
Now people say LESS is more and in this case it is.
table.DDGridView a.Cancel,
table.DDDetailsTable a.Cancel
{
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
background-image: url('../images/Cancel.png');
}
table.DDGridView a.Cancel:hover,
table.DDDetailsTable a.Cancel:hover
{
background-image: url('../images/Cancel-h.png');
}
table.DDGridView a.Cancel:hover:active,
table.DDDetailsTable a.Cancel:hover:active
{
background-image: url('../images/Cancel-a.png');
}
table.DDGridView a.Cancel.aspNetDisabled,
table.DDDetailsTable a.Cancel.aspNetDisabled,
table.DDGridView a.Cancel.aspNetDisabled:hover,
table.DDDetailsTable a.Cancel.aspNetDisabled:hover,
table.DDGridView a.Cancel.aspNetDisabled:active,
table.DDDetailsTable a.Cancel.aspNetDisabled:active
{
background-image: url('../images/Cancel-d.png');
}
Listing 2 – the CSS
above in Listing 2 is the CSS for the Edit button as you can see we cover hyperlinks with a CSS class of “Edit” and we have three states normal hover and active that is when we click. Now for the LESS
/* ==== button mixin ==== */
.Button (@Name)
{
a.@{Name}
{
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
background-image: url('../images/@{Name}.png');
&:hover
{
background-image: url('../images/@{Name}-h.png');
&:active
{
background-image: url('../images/@{Name}-a.png');
}
}
// link fix
&.aspNetDisabled,
&.aspNetDisabled:hover,
&.aspNetDisabled:active
{
background-image: url('../images/@{Name}-d.png');
}
// link fix
}
}
table.DDGridView,
table.DDDetailsTable
{
.Button(Cancel);
.Button(Delete);
.Button(Details);
.Button(Edit);
.Button(Update);
.Button(New);
.Button(Select);
.Button(Insert);
}
Listing 3 – LESS
In Listing 3 we have a MIXIN called Button and we pass in the name of the button we want, no repeating the same code and if you need to add an extra button it’s easy.
The only thing left is for me to add this to NuGet as a simple to apply package and you are away.
Adding the NuGet package to an existing Dynamic Data site
Right Click the “References” node of the Web Application Project
Figure 1 – Adding NuGet Package to Project
Figure 2 – Find the “Replace Hyperlink With Image Button” NuGet Package
Figure 3 – Add the Style sheet and jQuery references to the head of the Master page
Figure 4 – Add a script tag just before the end of the BODY tag
Happy coding.
V1.0.4 now on NuGet you disabled icons if a link’s Enabled property is set to “false”;
Hopefully no more changes now.
