Your SlideShare is downloading. ×
0
A jQuery Primer for                                       SharePointMarc D AndersonCo-Founder & PresidentSympraxis Consult...
What is jQuery?  is
GETTING STARTED
Getting Started• Add references to the jQuery library  – Master page  – Page layout  – Individual aspx pages
Referencing Script Libraries                                    from CDNs                  <!-- Reference the jQueryUI the...
SharePoint Web Technology• HTML  – Hypertext Markup Language  – Content and structure• CSS  – Cascading Style Sheets  – Pr...
HTML Elements           Opening tag                          Closing tagPowered by <a href="http://office365.com">Office36...
INTRO TO CSS
Intro to CSS:     Why does CSS matter?• CSS = Cascading Style Sheets• jQuery uses selectors that are very  similar to CSS ...
CSS StylesSelect HTML element(s)   .article {          Modify them!      color: red;                         }
CSS Element Selectorsp {               <p>    color: red;      Paragraph of text.}                 </p>        Paragraph o...
CSS Class Selectors.article {        <div class="article">    color: red;      This is an article.}                 </div>...
CSS ID Selectors#header {         <div id="header">    color: red;      This is a header.}                 </div>        T...
CSS Descendant Selectors#header h1 {      <div id="header">                     <h1>    color: red;                       ...
CSS Composite Selectors                               <div id="header">                                 <ul class="top-nav...
CSS Complex Selectors                        <ul class="top-nav">                           <li>Item 1</li>               ...
My CSS "Best" Practices• Use truly unique class and id names• Choose a prefix for your project, e.g.  ‘xyz-’ or ‘x51-’• Al...
DOCUMENT OBJECT MODEL (DOM)
What is the Document Object       Model (DOM)?• The DOM starts as the page’s  markup (HTML) as delivered to the  browser b...
What Can We Do With the            DOM?•   Add or remove CSS classes•   Create new HTML elements•   Remove HTML elements• ...
IMPORTANT TOOLS
Internet Explorer Developer           Tools (F12)• Shows the Internet Explorer view of the  DOM in SharePoint’s pages – so...
The Firebug Add-On for Firefox• Better for debugging and looking at  Net traffic
JQUERY BASICS
The Basic Idea of jQuery    Select something$(.article).hide();                       Do something!
jQuery’s Document Ready$(document).ready(function({  // do something});• Processing is suspended until the  page’s DOM is ...
jQuery Documentation: Your           Friend• The jQuery  documentation is  arranged to help you• What you need to  know is...
SELECTORS
jQuery Selectors• Selectors are the most important  jQuery concept• Selecting the right DOM object(s) is  half the battle•...
jQuery Element Selectors<p>  Paragraph of text.</p>       $("p")
jQuery Element Selectors          <p>Paragraph 1 of text.</p>          <p>Paragraph 2 of text.</p>        var allParagraph...
jQuery Class Selectors<div class="article">   This is an article.</div>      $(".article")
jQuery ID Selectors<div id="header">   This is a header.</div>       $("#header")
jQuery Descendant Selectors<div id="header">   <h1>     This is a header.   </h1></div>      $("#header h1")
jQuery Composite Selectors<div id="header">   <ul class="top-nav">      <li>Item 1</li>      <li>Item 2</li>      <li>Item...
jQuery Complex Selectors      <div id="header">        <ul class="top-nav">          <li>Item 1</li>          <li>        ...
Selectors for SharePoint<DIVid=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager class=ms-quicklaunch-navmgr>  <DIV...
Selectors for SharePoint           <DIV           id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio           nManager c...
Selectors for SharePoint      <DIV      id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio      nManager class=ms-quickla...
Useful jQuery Selector Tricks• .NET Applications like SharePoint generate some long and  ugly markup and IDs• These select...
A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation,Events, and EffectsNEXT SESSION AT 12:50
ATTRIBUTES
jQuery Attributes• Once you’ve selected the right DOM  element, you can use jQuery to get  or set its attributes• As of jQ...
jQuery Attributes: Get and Set       <div id="helloDiv" class="ms-       bold">           Hello, world!       </div>GET: v...
Example with SharePoint                       Attributes: Get           <DIV           id=ctl00_PlaceHolderLeftNavBar_Quic...
Example with SharePoint               Attributes: Set    <DIV    id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio    nM...
TRAVERSING
Traversing• Traversing lets you move around the  DOM based on your initial selection• This is how you get at elements  whi...
Find an Element’s Ancestors    <div id="helloDiv" class="ms-bold">      <ul>        <li>Item 1</li>        <li>Item 2</li>...
Traversing Down:            Initial Selector<DIV class=ms-quicklaunchheader>  <A accessKey=3id=ctl00_PlaceHolderLeftNavBar...
Traversing Down:       Finding Specific Children<DIV class=ms-quicklaunchheader>  <A accessKey=3id=ctl00_PlaceHolderLeftNa...
Traversing Up:             Initial Selector<DIV class=ms-quicklaunchheader>  <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_...
Traversing Up:      Finding Specific Ancestors<DIV class=ms-quicklaunchheader>  <A accessKey=3id=ctl00_PlaceHolderLeftNavB...
Traversal Example from      SPServices
Traversal Example from                                   SPServices<select                                         <select...
Traversal Example from                          SPServices                    SelectCandidate      SelectResultvar possibl...
MANIPULATION
Manipulation• Once you’ve gotten the right  element(s), you can:  – Manipulate their attributes or    properties  – Change...
Manipulation:                      Adding Text       <div id="helloDiv" class="ms-bold">         Hello, world!       </div...
Manipulation:            Adding CSS Classes   <div id="helloDiv" class="ms-bold">     Hello, world!   </div>   $("#helloDi...
Manipulation:         Wrapping Elements<div id="helloDiv" class="ms-bold">  Hello, world!</div>$("#helloDiv")  .wrap("<a h...
Manipulation:            Inserting Elements <div id="helloDiv" class="ms-bold">   Hello, world! </div>$("#helloDiv")  .bef...
Manipulation:                  Changing CSS    <div id="helloDiv" class="ms-bold">      Hello, world!    </div>    $("#hel...
EVENTS
Events• jQuery’s events enable you to work  with all of the standard JavaScript  events• These methods are used to registe...
jQuery Events$(.article).click(function(){  // do something});$(.article).mouseover(function(){  // do something});
jQuery Events for Web Part Titles$("h3.ms-WPTitle").click(function() {  alert("Go directly to the list!");});$("h3.ms-WPTi...
EFFECTS
Effects• jQuery gives you a set of effects you  can use to change the elements in  the page• Effects can be:  – Visual: Ch...
jQuery Effects Examples$(.article).hide();$(.article).slideUp();$(.article).after("<em>Hello!</em>");$(.article).css("colo...
Putting It Together: Example       Change what happens when you click on a       Web Part Title// Remove the links on the ...
Putting It Together: Example   This example shows part of SPArrangeChoices   from SPServices.// Collect all of the choices...
jQueryUI Takes Effects Further$(.article).tabs();$(input).autocomplete();$(#infoBox).dialog();…and many more
jQuery Plugins Abound!• If you want to do something  sophisticated, look for an existing  plugin• Due diligence is up to y...
More Useful Tools• JavaScript Compressorator – Minifies  script files using multiple methods  http://compressorrater.thruh...
Contact Information                    eMail marc.anderson@sympraxisconsulting.com                     Blog http://sympmar...
Upcoming SlideShare
Loading in...5
×

SEF 2012 - A jQuery Primer for Sharepoint

1,327

Published on

These are the slides from my two sessions at the SharePoint and Exchange Forum 2012 (SEF12 - http://seforum.se) in Stockholm, Sweden on October 23, 2012.

A jQuery Primer for SharePoint: Overview, jQuery and CSS, and Selectors
Developer, level 200
jQuery is a JavaScript framework that allows you to develop great client side solutions. If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover some of the important basics of jQuery in a SharePoint context. Understanding how jQuery relates to CSS and JavaScript is an important hurdle in the learning curve. Selectors are the key concept you need to understand to be able to work with SharePoint’s pages. By the end of this session, you'll understand what jQuery is and how to start adding it to your SharePoint solutions.

A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation, Events, and Effects
Developer, level 200
Once you know how to start working with jQuery, you’ll want to be able to change what happens in the page by querying existing elements and adding new behaviors. In this session, we’ll look at Attributes, Traversing, Manipulation, Events, and Effects. This will get you to the point where you can roll up your sleeves and start creating solutions. We’ll also look at using plugins like SPServices to make your work easier.

Both sessions are based on my articles at SharePoint Magazine.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,327
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "SEF 2012 - A jQuery Primer for Sharepoint"

  1. 1. A jQuery Primer for SharePointMarc D AndersonCo-Founder & PresidentSympraxis Consulting LLCmarc.anderson@sympraxisconsulting.com
  2. 2. What is jQuery? is
  3. 3. GETTING STARTED
  4. 4. Getting Started• Add references to the jQuery library – Master page – Page layout – Individual aspx pages
  5. 5. Referencing Script Libraries from CDNs <!-- Reference the jQueryUI themes stylesheet on the Google CDN. Here were using the "start" theme --> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/s tart/jquery-ui.css" /> <!-- Reference jQuery on the Google CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.j s"></script> <!-- Reference jQueryUI on the Google CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery- ui.min.js"></script> <!-- Reference SPServices on cdnjs (Cloudflare) --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/ jquery.SPServices-0.7.2.min.js"></script>More:http://sympmarc.com/2012/04/20/referencing-jquery-jqueryui-and-spservices-from-cdns/
  6. 6. SharePoint Web Technology• HTML – Hypertext Markup Language – Content and structure• CSS – Cascading Style Sheets – Presentation and style• JavaScript and jQuery – Interactive behavior
  7. 7. HTML Elements Opening tag Closing tagPowered by <a href="http://office365.com">Office365</a>. Attribute Value
  8. 8. INTRO TO CSS
  9. 9. Intro to CSS: Why does CSS matter?• CSS = Cascading Style Sheets• jQuery uses selectors that are very similar to CSS selectors• CSS is the fundamental styling mechanism for the Web• HTML + CSS + jQuery = AWESOME
  10. 10. CSS StylesSelect HTML element(s) .article { Modify them! color: red; }
  11. 11. CSS Element Selectorsp { <p> color: red; Paragraph of text.} </p> Paragraph of text.
  12. 12. CSS Class Selectors.article { <div class="article"> color: red; This is an article.} </div> This is an article.
  13. 13. CSS ID Selectors#header { <div id="header"> color: red; This is a header.} </div> This is a header.
  14. 14. CSS Descendant Selectors#header h1 { <div id="header"> <h1> color: red; This is a header.} </h1> </div> This is a header.
  15. 15. CSS Composite Selectors <div id="header"> <ul class="top-nav"> <li>Item 1</li>#header ul.top-nav li { <li>Item 2</li> color: red; <li>Item 3</li>} </ul> </div> • Item 1 • Item 2 • Item 3
  16. 16. CSS Complex Selectors <ul class="top-nav"> <li>Item 1</li> <li>ul.top-nav > li { Item 2 color: red; <ul class="menu"> <li>Menu 1</li>} </ul> </li> </ul> • Item 1 • Item 2 • Menu 1
  17. 17. My CSS "Best" Practices• Use truly unique class and id names• Choose a prefix for your project, e.g. ‘xyz-’ or ‘x51-’• All of your classes and ids will be easy to select: xyz-home-page-article x51-top-section• Don’t be afraid of verbose class and ID names!
  18. 18. DOCUMENT OBJECT MODEL (DOM)
  19. 19. What is the Document Object Model (DOM)?• The DOM starts as the page’s markup (HTML) as delivered to the browser by the server: View Source• Styled by the CSS which gives the page its look and feel• The DOM is acted upon by any script in the page
  20. 20. What Can We Do With the DOM?• Add or remove CSS classes• Create new HTML elements• Remove HTML elements• Change HTML element attributes• And so much more The DOM is HTML, which is XML, which is data!
  21. 21. IMPORTANT TOOLS
  22. 22. Internet Explorer Developer Tools (F12)• Shows the Internet Explorer view of the DOM in SharePoint’s pages – some pages and controls are rendered differently in other browsers
  23. 23. The Firebug Add-On for Firefox• Better for debugging and looking at Net traffic
  24. 24. JQUERY BASICS
  25. 25. The Basic Idea of jQuery Select something$(.article).hide(); Do something!
  26. 26. jQuery’s Document Ready$(document).ready(function({ // do something});• Processing is suspended until the page’s DOM is fully loaded• Ensures that all of the elements you need are available
  27. 27. jQuery Documentation: Your Friend• The jQuery documentation is arranged to help you• What you need to know is arranged sequentially from top to bottom
  28. 28. SELECTORS
  29. 29. jQuery Selectors• Selectors are the most important jQuery concept• Selecting the right DOM object(s) is half the battle• Selectors return a collection of DOM objects – 0 to n matching elements
  30. 30. jQuery Element Selectors<p> Paragraph of text.</p> $("p")
  31. 31. jQuery Element Selectors <p>Paragraph 1 of text.</p> <p>Paragraph 2 of text.</p> var allParagraphs = $("p");allParagraphs is now defined as a jQuery object whichcontains pointers to all of the paragraphs in the page
  32. 32. jQuery Class Selectors<div class="article"> This is an article.</div> $(".article")
  33. 33. jQuery ID Selectors<div id="header"> This is a header.</div> $("#header")
  34. 34. jQuery Descendant Selectors<div id="header"> <h1> This is a header. </h1></div> $("#header h1")
  35. 35. jQuery Composite Selectors<div id="header"> <ul class="top-nav"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></div>$("#header ul.top-nav li")
  36. 36. jQuery Complex Selectors <div id="header"> <ul class="top-nav"> <li>Item 1</li> <li> Item 2 <ul class="menu"> <li>Menu 1</li> </ul> </li> </ul> </div>$("#header ul.top-nav ul.menu li")
  37. 37. Selectors for SharePoint<DIVid=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item"href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$("div.ms-quicklaunch-navmgr")
  38. 38. Selectors for SharePoint <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$("#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager")
  39. 39. Selectors for SharePoint <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$(".ms-quicklaunch-navmgr a.static.menu-item")
  40. 40. Useful jQuery Selector Tricks• .NET Applications like SharePoint generate some long and ugly markup and IDs• These selector tricks really help$("[id=foo]"); // Equal to$("[id!=foo]"); // Not equal to$("[id^=foo]"); // Starts with$("[id$=foo]"); // Ends with$("[id*=foo]"); // Contains$("[id~=foo]"); // Contains word$("[id|=foo]"); // Contains prefix$("[id]"); // Has$("[id][class][style]"); // Has all
  41. 41. A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation,Events, and EffectsNEXT SESSION AT 12:50
  42. 42. ATTRIBUTES
  43. 43. jQuery Attributes• Once you’ve selected the right DOM element, you can use jQuery to get or set its attributes• As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes
  44. 44. jQuery Attributes: Get and Set <div id="helloDiv" class="ms- bold"> Hello, world! </div>GET: var thisClass = $("#helloDiv").attr("class");SET: $("#helloDiv").attr("class", "ms-hidden");
  45. 45. Example with SharePoint Attributes: Get <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">var thisHref = $(".ms-quicklaunch-navmgr a.static.menu-item:first") .attr("href");
  46. 46. Example with SharePoint Attributes: Set <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/mypage.aspx">$(".ms-quicklaunch-navmgr a.static.menu-item:first") .attr("href", "/sitename/mypage.aspx");
  47. 47. TRAVERSING
  48. 48. Traversing• Traversing lets you move around the DOM based on your initial selection• This is how you get at elements which are difficult to select directly• Ancestry matters in XML / HTML
  49. 49. Find an Element’s Ancestors <div id="helloDiv" class="ms-bold"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>= $("ul").parent(); $("ul").closest("div");
  50. 50. Traversing Down: Initial Selector<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("div.ms-quicklaunchheader").find("a");
  51. 51. Traversing Down: Finding Specific Children<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("div.ms-quicklaunchheader").find("a");
  52. 52. Traversing Up: Initial Selector<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("a[id$=NavLinkViewAll]").parent();
  53. 53. Traversing Up: Finding Specific Ancestors<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("a[id$=NavLinkViewAll]").parent();
  54. 54. Traversal Example from SPServices
  55. 55. Traversal Example from SPServices<select <selectname="ctl00$m$g_e845e690_00da_428f_afbd_fbe80 name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80474787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c 87763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00tl00$ctl00$SelectCandidate" title="City $ctl00$SelectResult" title="City selectedpossible values" values"id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047 id="ctl00_m_g_e845e690_00da_428f_afbd_fbe80478787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl 763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_c00_ctl00_SelectCandidate" style="width: tl00_SelectResult" style="width: 162px;"162px;" onkeydown="GipHandleHScroll(event)" onkeydown="GipHandleHScroll(event)"ondblclick="GipAddSelectedItems(ctl00_m_g_e84 ondblclick="GipRemoveSelectedItems(ctl00_m_g_e85e690_00da_428f_afbd_fbe804787763_ctl00_ctl04 45e690_00da_428f_afbd_fbe804787763_ctl00_ctl04__ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupkupPicker_m); return false" Picker_m); return false"onchange="GipSelectCandidateItems(ctl00_m_g_e onchange="GipSelectResultItems(ctl00_m_g_e845e6845e690_00da_428f_afbd_fbe804787763_ctl00_ctl 90_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl004_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL 7_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPickookupPicker_m);" size="350" multiple=""> er_m);" size="20" multiple="">
  56. 56. Traversal Example from SPServices SelectCandidate SelectResultvar possibleValues = $("select[ID$=SelectCandidate][Title^="+ opt.multiSelectColumn + " ]");var selectedValues =possibleValues.closest("span").find("select[ID$=SelectResult][Title^=" + opt.multiSelectColumn + " ]");
  57. 57. MANIPULATION
  58. 58. Manipulation• Once you’ve gotten the right element(s), you can: – Manipulate their attributes or properties – Change their contents – Move them in the DOM
  59. 59. Manipulation: Adding Text <div id="helloDiv" class="ms-bold"> Hello, world! </div>$("#helloDiv").append(" And youre welcome to it!"); <div id="helloDiv" class="ms-bold"> Hello, world! And youre welcome to it! </div>
  60. 60. Manipulation: Adding CSS Classes <div id="helloDiv" class="ms-bold"> Hello, world! </div> $("#helloDiv").addClass("my-class");<div id="helloDiv" class="ms-bold my-class"> Hello, world!</div>
  61. 61. Manipulation: Wrapping Elements<div id="helloDiv" class="ms-bold"> Hello, world!</div>$("#helloDiv") .wrap("<a href=http://cnn.com></a>");<a href="http://cnn.com"> <div id="helloDiv" class="ms-bold"> Hello, world! </div></a>
  62. 62. Manipulation: Inserting Elements <div id="helloDiv" class="ms-bold"> Hello, world! </div>$("#helloDiv") .before("<div>In the beginning...</div>"); <div>In the beginning...</div> <div id="helloDiv" class="ms-bold"> Hello, world! </div>
  63. 63. Manipulation: Changing CSS <div id="helloDiv" class="ms-bold"> Hello, world! </div> $("#helloDiv") .css("background-color", "fuchsia");$("h3.ms-WPTitle a").css({ border: "5px black solid", color: "red"});
  64. 64. EVENTS
  65. 65. Events• jQuery’s events enable you to work with all of the standard JavaScript events• These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.
  66. 66. jQuery Events$(.article).click(function(){ // do something});$(.article).mouseover(function(){ // do something});
  67. 67. jQuery Events for Web Part Titles$("h3.ms-WPTitle").click(function() { alert("Go directly to the list!");});$("h3.ms-WPTitle").mouseover(function() { $(this).css("background-color", "fuchsia");});
  68. 68. EFFECTS
  69. 69. Effects• jQuery gives you a set of effects you can use to change the elements in the page• Effects can be: – Visual: Change how the user sees existing elements with animations – Manipulative: Change where and how elements are shown by moving them around in the DOM
  70. 70. jQuery Effects Examples$(.article).hide();$(.article).slideUp();$(.article).after("<em>Hello!</em>");$(.article).css("color", "red");
  71. 71. Putting It Together: Example Change what happens when you click on a Web Part Title// Remove the links on the Web Part Titles$("h3.ms-WPTitle").find("nobr").unwrap("<a></a>");// Add click behavior that toggles the visibility// of the Web Part$("h3.ms-WPTitle").click(function() { $(this).closest("table").closest("tr").next().toggle();});
  72. 72. Putting It Together: Example This example shows part of SPArrangeChoices from SPServices.// Collect all of the choices$(thisFormField).find("tr").each(function() { columnOptions.push($(this).html());});out = "<TR>";// Add all of the options to the out stringfor(i=0; i < columnOptions.length; i++) { out += columnOptions[i]; // If weve already got perRow columnOptions in the row, close off the row if((i+1) % opt.perRow === 0) { out += "</TR><TR>"; }}out += "</TR>";// Remove the existing rows...$(thisFormField).find("tr").remove();// ...and append the out string$(thisFormField).find("table").append(out);
  73. 73. jQueryUI Takes Effects Further$(.article).tabs();$(input).autocomplete();$(#infoBox).dialog();…and many more
  74. 74. jQuery Plugins Abound!• If you want to do something sophisticated, look for an existing plugin• Due diligence is up to you– some of the plugins aren’t written very well• Beware of "plugin sprawl"
  75. 75. More Useful Tools• JavaScript Compressorator – Minifies script files using multiple methods http://compressorrater.thruhere.net/• JSLint – Checks your script against accepted standards http://jslint.com/ "Warning: JSLint will hurt your feelings."
  76. 76. Contact Information eMail marc.anderson@sympraxisconsulting.com Blog http://sympmarc.com SPServices http://spservices.codeplex.com SPXSLT http://spxslt.codeplex.com eBook http://bit.ly/UnlockingDVWPThe Middle Tier Manifesto http://bit.ly/middletier
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×