One big improvement in SP2010 is in the rendered markup. You will see fewer tables and more lists and div elements.When I saw this I immediately thought of what this would allow with jQuery. The Ribbon control and menus in SP2010 are rendered as unordered lists. This allows us to apply interactions to them from the jQuery UI framework. In this post I am going to walk you through an example. In the example we are going to apply the sortable interaction to the SharePoint menu. After deploying our Web Part , the user can then reorder the menu items. In the screen shots below I am moving the Browse menu item to the right of the Page menu item. Now in this example I don’t save the result so the page refresh would reset the users sorting but you could easily write some JavaScript code that saved the order to a SharePoint list.
Step 1 – Create a new Visual Web Part project in VS2010. There are already many articles on this subject so I will allow you to just go ahead and Google this if you need to.
Step 2 – Download and reference jQuery and JQuery UI.
There are a number of ways to do this. I chose to simply download the files and drop them in the layouts folder of the 14 hive. You can also directly link to them on Google. Here are my references:
<script type="text/javascript" src="_layouts/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/ui.core.js"></script>
<script type="text/javascript" src="_layouts/ui.sortable.js"></script>
Step 3 – The rest of the code in the Visual WebPart
<script type="text/javascript">
$(document).ready(function () {
$(".ms-cui-tts").sortable(); ;
});
</script>
This is all the code that is required! The class of the UL element that wraps the menu we are trying to make sortable is ms-cui-tts. To keep this example simple I used a Visual Web Part but it would be better to add the above JavaScript block to the master page so that all pages had the same functionality.