<div>
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem Text="http://www.dotnetcurry.com" Value="Site 1" />
<asp:ListItem Text="http://www.sqlserver.com" Value="Site 2" />
<asp:ListItem Text="http://www.devcurry.com" Value="Site 3" />
</asp:BulletedList>
</div>
My client wanted me to convert them to hyperlinks dynamically since it was not possible to go ahead and make changes in the Bulleted List mark up. Here's how to convert an unordered list <ul> to hyperlinks using jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul > li').css({
"cursor": "pointer",
"text-decoration": "underline",
"color":"blue"
})
.click(function() {
window.location = $(this).text()
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem Text="http://www.dotnetcurry.com" Value="Site 1" />
<asp:ListItem Text="http://www.sqlserver.com" Value="Site 2" />
<asp:ListItem Text="http://www.devcurry.com" Value="Site 3" />
</asp:BulletedList>
</div>
</form>
</body>
</html>
As you can observe, we are adding some css attributes to the <li> to make it look like a link - css has been applied to underline it, add a pointer on mouseover and change its color to blue.
We then add a click function which sets the url, to the text of the list items of the Bulleted List. That's it.
Oh..I love jQuery!
Tweet
About The Author
1 comment:
You couldn't just DisplayMode="HyperLink" to the markup. You wouldn't have to recompile the site. But I know how some clients are...
Post a Comment