{"id":506,"date":"2015-03-03T12:05:57","date_gmt":"2015-03-03T19:05:57","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=506"},"modified":"2015-03-03T12:05:57","modified_gmt":"2015-03-03T19:05:57","slug":"week-8-jquery-plugin-basics","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=506","title":{"rendered":"Week 8: jQuery Plugin Basics"},"content":{"rendered":"

jQuery<\/a> is a javascript library that simplifies the code designers and developers need to write for\u00a0 various types of interactivity, form validation and animation. It works in combination with your HTML and CSS, and generally is plug and play.<\/p>\n

Download the main plugin: jquery-1.7.2.min.js<\/a><\/strong><\/p>\n

The main library must be included inside the head of your html document using the script tag. You\u2019ll notice a few ways of doing this when looking at other peoples code, for example:<\/p>\n

<script\u00a0src=\u201dhttp:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.4\/jquery.min.js\u201d><\/script><\/strong><\/span> this links to version 1.4.4 of the jquery plugin hosted on google\u2019s server.<\/p>\n

<script\u00a0\u00a0type=\u201dtext\/javascript\u201d src=\u201d_js\/jquery-1.7.2.min.js\u201d><\/script><\/strong><\/span>this would link to the latest version of the jquery plugin inside a folder called _js which would be within the sites root directory. This tag also includes the type attribute which simply tells the browser that the script being used is javascript.<\/p>\n

With the main plugin attached to your html document you can then write your own simple functions or attach functions developed by others.<\/p>\n

For example if you also attach the UI plugin:
\n<script type=\u201dtext\/javascript\u201d src=\u201d_js\/jquery-ui.min.js\u201d><\/script><\/span><\/strong><\/p>\n

You can then write a simple function to animate rollovers by switching between two classes<\/p>\n

<script type=\u201dtext\/javascript\u201d><\/strong><\/span>
\n\u00a0 \u00a0$(document).ready(function(){<\/strong><\/span> \/\/ this waits for the document to finish loading before allowing any other function to run<\/p>\n

\u00a0 \u00a0 \u00a0 $(\u201ca\u201d).mouseenter(buttonHover)<\/strong><\/span> \/\/ this tells the browser that when the mouse enters any <a> tag to run the function buttonHover.
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0function buttonHover(){<\/strong><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0$(this).switchClass(\u2018button\u2019,\u2019button_hover\u2019,500);<\/strong><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0}<\/strong><\/span> \/\/ this function switches the class button with buton_hover, over 500 milliseconds
\n\u00a0\u00a0 \u00a0<\/strong>
\n\u00a0 \u00a0 \u00a0 $(\u201ca\u201d).mouseleave(button)<\/strong><\/span> \/\/ this tells the browser that when the mouse leaves any a tag to run the function button.
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0function button(){<\/strong><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 $(this).switchClass(\u2018button_hover\u2019,\u2019button\u2019,500);<\/strong><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 }<\/span>\u00a0\u00a0\u00a0 <\/strong>\/\/ this function switches the class button_hover with button, over 500 milliseconds
\n\u00a0 \u00a0});<\/strong><\/span>
\n<\/script><\/strong><\/span><\/p>\n

For this to work you\u2019ll also need styles for your two button classes<\/p>\n

<style><\/strong><\/span><\/p>\n

\u00a0 \u00a0.button {color:#ccc; background-color: #FFF;}<\/strong><\/span><\/p>\n

\u00a0 \u00a0.button_hover {color:#666; background-color:#FDC758;}<\/strong><\/span><\/p>\n

<\/style><\/strong><\/span><\/p>\n

And any of the links you want to have this effect applied would need to look like this<\/p>\n

<a href=\u201dSOMEFILE.html\u201d class=\u201dbutton\u201d>Your Text<\/a><\/strong><\/p>\n

Useful Plugins<\/h2>\n