- Manage script files
- jQuery.min.js - This will contain jQuery reference and should be reference first in order.
- jQuery.plugins.js - This should contain all custom plugins we used in it.
- ProjectName.js - This hsould contain all your custom code written to get your project pages work properly
- Choosing plugins for your project
- Download plugin bundle to your local computer
- Generally plugin will contain sample html files, jQuery and plugin script files.
- First thing to check is, jQuery version you are using in your project and the one which is used in plugin
- If they are different, replace their jQuery.min.js with the one we are using
- Properly test the sample provided in plugin in all browsers you are planning to support
- Once browser and version compability matches paste plugin's min.js at end of jQuery.plugins.js file.
- Implement plugin specific mark up wherever applicable
- Always use projectName.js to initialize plugin.
- Repeat above process when you choose to add any jQuery plugin
- Resolving CONFLICTS!
Another challenging part is jQuery ready not working or custom plugin you are using is disturbing your site's css. Here are thoughts on the same
- Aways use _spBodyOnLoadFunctionNames.Push("yourFunctionName") to init your scripts in page load.
- Always use only necessary css from what plugin css has proviced and prefix class or ID in css as application. For example if a generic class .clear is used and you are calling plugin using $('#news') you should replace that with #news .clear. Do this for all css you include for the class
Here I pointed out some of the best practices. Like this post? You like to add/correct something? please provide your feedback on the same.