Wednesday, February 10, 2010

How to add JQuery, JS and CSS file reference to sharepoint master page without modifying the master page

In SharePoint master page, there is  AdditionalPageHead Content Place Holder which can be used for adding JavaScript, Meta Tags, CSS Styles or other content to the page without modifying them.

One practical scenario would be programmatically adding JQuery, custom JS and CSS file reference to your master page without modifying the master page it.
You need to create a Delegate Control and deploy it using a feature. Below is the snapshot for Feature.XML file.
<?xml version="1.0" encoding="utf-8"?>
  <Control Id="AdditionalPageHead"
           ControlSrc="~/_controltemplates/CustomFolder/CustomPageHead.ascx"
           Sequence="1499"/>
</Elements>
Change the sequence number and control path and name as per your requirement. 

In the CustomPageHead.ascx add the references of JS/CSS
<script type="text/javascript" src="/_layouts/../JS/jquery-1.7.1.min.js"></script>
….
….
<link rel="stylesheet" type="text/css" href="/_layouts/../../../jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
</script>


Just deploy your feature and activate it in the site where you want to add JS and CSS references.

No comments:

Post a Comment