asked on

How to customize a dropdown list ?

Hello,

How can I customize a dropdown list in these two cases:
1. First, I want that the dropdown list shows some items in blue color, others in green color and others in black.

2. Second, I want to associate an icon to each item in the dropdown list.

Thanks.

trax75

Hi,

If you want such special functionalities, you have to implement your own custom field. A sample can be found here http://vspug.com/nicksevens/2007/08/31/create-custom-field-types-for-sharepoint/

cu
Torsten

pgirardier

ASKER

trax75, thank you quick reply.

What about JQuery, can it offer a solution?

Thanks.

trax75

Hi,

yes JQuery can be part of the solution (see also http://www.marghoobsuleman.com/jquery-image-dropdown) - it will be your user control for your custom field.

cu
torsten

Steve Krile

I found this to be awesome.

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

And, attached is a working example.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}

        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative;}
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
        .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}

        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }

        </style>
</head>




<body>
<dl class="dropdown">
    <dt><a href="#"><span>Please select the country</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Brazil<span class="value">BR</span></a></li>
            <li><a href="#">France<span class="value">FR</span></a></li>
            <li><a href="#">Germany<span class="value">DE</span></a></li>
            <li><a href="#">India<span class="value">IN</span></a></li>
            <li><a href="#">Japan<span class="value">JP</span></a></li>
            <li><a href="#">Serbia<span class="value">CS</span></a></li>
            <li><a href="#">United Kingdom<span class="value">UK</span></a></li>
            <li><a href="#">United States<span class="value">US</span></a></li>
        </ul>
    </dd>
</dl>



	<script>
		$(document).ready(function(){

			$(".dropdown dt a").click(function() {
			    $(".dropdown dd ul").toggle();
			});


			$(".dropdown dd ul li a").click(function() {
				var text = $(this).html();
				$(".dropdown dt a span").html(text);
				$(".dropdown dd ul").hide();
			});


			$(document).bind('click', function(e) {
				var $clicked = $(e.target);
				if (! $clicked.parents().hasClass("dropdown"))
					$(".dropdown dd ul").hide();
			});


		});
	</script>

</body>

</html>

Open in new window

pgirardier

ASKER

Torsten, thank you for the suggested solution, and what do you mean by "it will be your user control for your custom field" ?

Skrile, thank you for the suggested URL and example, but the above example is dealing with an HTML dropdown which does not have the same representation as a Sharepoint dropdown.
So, is it possible to get the same result with a standrad Sharepoint drodown by making some modifications on the above example?

Thanks.

Steve Krile

No. "Standard Sharepoint Dropdown"....hmmm. Sharepoint uses <select> controls for most of their dropdowns. I've run in to a fellow that has posted some code to customize Sharepoint controls as you suggest here, but I must warn you - it is NOT easy.

I don't know anything about the following example, but it may be along the lines of what you are trying to do.

http://blog.pathtosharepoint.com/2008/08/20/a-simple-drop-down-menu/

Steve Krile

Actually, the comment #29082758 is exactly what the original questioner asked for. This blog covers how to stylize a drop down menu in Sharepoint.

ASKER CERTIFIED SOLUTION

pgirardier

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial