I was a bit of a late-comer to the JQuery party, but now I've been using it for a while it's given me a host of options for adding extra flair to the client side of my applications. Here's a few generic JQuery functions I've written which can be used to add some neat little features to a page. Just call any of them from a document ready function.
Apply JQuery Themeroller Styles to all Page Buttons
The JQuery Themeroller is a great tool for creating a theme for a site based on colours and styles for particular page elements. The JQuery.UI library then provides a set of functions which allow you to apply styles to page elements. This function applies a JQuery Themeroller style to all the buttons on a page - as well as any elements which have a button class applied to them - and then makes the mouse pointer turn into a cursor when you mouse over them:
function addCursorPointerToButtons() { $("button, input[type='submit'], input[type='button'], .button") .button().css("cursor", "pointer"); }
Automatically Remove the Default Value from a Select Box
Required drop-down select boxes often have a default option which reads 'Please select...' (or something like that), but once someone has selected a value, there's no need to retain that. This function removes the default option from any select boxes on the page which have a data-val-remove-default attribute once one of the non-default options has been chosen:
function removeDefaultSelectOptionOnSelect() { $("select[data-val-remove-default='']").change(function () { var sel = $(this); if (sel.val() != "") { sel.children("option[value='']:first").remove(); } }); }
Automatically add a Required Label and Stars to a Form
It's standard to have a little * next to required form field elements. This function adds the text * Required to the top of the first form on the page, and adds *s to any element within the form with the class editor-label and a data-val-required attribute:
function addRequiredFieldLabels() { var elements = $(".editor-label[data-val-required='']"); if (!elements.length) { return; } var requiredString = "<div class='editor-required-key'>* Required"; var prependString = "<span class='editor-required-label'> * "; var firstFormOnThePage = $("form:first");
if (!firstFormOnThePage.children('div.editor-required-key').length) { firstFormOnThePage.prepend(requiredString); }
elements.each(function (index, value) { var formElement = $(this); if (!formElement.children('span.editor-required-label').length) { formElement.prepend(prependString); } }); }
I hope those come in handy :)