The Best Way to Add Custom JavaScript and jQuery to SharePoint
During extensive SharePoint user interface customization you'll likely encounter a scenario where you need to make a web part or user control do something it was not intended to do or have a look that cannot be accomplished using the CSS hooks provided out-of-the-box. The solution is to create a custom master page and include a reference to a JavaScript file where you can modify the Document object. While straight JavaScript will do, I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page.
- Go to jquery.com and download the latest jQuery library to your desktop. You want to get the compressed production version, not the development version.
- Open SharePoint Designer (SPD) and connect to the root level of your site's site collection.
- In SPD, open the "Style Library" folder.
- Create a folder named "Scripts" inside of the Style Library.
- Drag the jQuery library JavaScript file from your desktop into the Scripts folder.
- In the Scripts folder, create a new JavaScript file and name it (e.g. "actions.js").
- Open your master page file in SPD.
- Within the <head> tag of the master page, add a script reference to the jQuery library just above the content place holder named "PlaceHolderAdditonalPageHead" (and above your custom CSS references, if applicable) as follows:<script src="/Style%20Library/Scripts/{jquery library file}.js" type="text/javascript"></script>
- Immediately after the jQuery library reference add a script reference to your custom scripts file as follows:<script src="/Style%20Library/Scripts/actions.js" type="text/javascript"></script>
Your custom master page now includes jQuery and a reference to your custom scripts file where you can add jQuery scripts. SharePoint includes a number of JavaScript files throughout the site, so be careful that the scripts you add do not conflict with SharePoint's; the jQuery library itself does not conflict with SharePoint.
Hope you Good Reading!
Hope you Good Reading!
No comments:
Post a Comment