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.
Tuesday, 27 March 2012
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.
Subscribe to:
Post Comments (Atom)
Popular Posts
-
To see a site collection's hidden user information list append /_catalogs/users/simple.aspx onto the end of the site collection url. ...
-
Please Check the below complete code to bind SharePoint list items to a DataTable/ Gridview. In this post, we are using the list named ...
-
To bind the drop down list data with a field from the SharePoint list you can use the below code methods:- Method 1 if (!Page.IsP... -
By Default SharePoint shows 3 events for any date in the calendar view, if we want to show all the events then we have to use any of the fol...
-
This Javascript function checks if the parameter supplied exists in the query string. If the parameter supplied is found in the query strin...
-
You can use CAML to do the following: Modify parameters to transport complex data Define the body of SOAP messages to transport data usin...
-
You can use below powershell command to change sharepoint user display name. Set-SPuser -identity "User name" -DisplayName ...
-
SharePoint solutions are either deployed globally or targeted to a particular web application. The decision of which is made automatically...
-
The sharepoint site is very slow when we access it first time. After that the response time is good. The reason is compilation and cachin...
-
The following Event Handler code will prevent users from creating duplicate value in "Title" field. ItemAdding Event Handler ...
No comments:
Post a Comment