Wednesday, August 24, 2011

JQuery in SharePoint


A jQuery Primer for SharePoint
What Can JQuery Can Do?
  • Find elements in the Document Object Model (DOM) and manipulate them. This manipulation might include changing values, attributes, or CSS styles.
  • Attach to and act on user-driven events.
  • Get data dynamically from other locations using Ajax for use in the page in the browser.

Referencing jQuery and Other Plug-ins

<script src="/jQuery%20Libraries/jquery-1.4.4.min.js" type="text/javascript"></script>

jQuery’s functionalities:-
  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI

Selectors:-

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
  <div id="helloDiv">
    Hello, world!
  </div>
</body>
</html></div>
 
Which means -->  $("#helloDiv")
 
<DIV class="ms-quicklaunchheader">
<A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll 
 href="/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
Which Means --> $("div.ms-quicklaunchheader")
 
var thisNavLinkViewAll = $("#ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll");
var thisNavLinkViewAll = $("a[id$='NavLinkViewAll']");
 
 

Attributes

<div id="helloDiv" class="ms-bold" >
    Hello, world!
  </div>
 
 
font-weight: bold;
$("#helloDiv").attr("class");
$("#helloDiv").attr("class", "ms-hidden");
display: none;
 
 
<DIV class="ms-quicklaunchheader">
  <A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll 
 href="/_layouts/viewlsts.aspx">
    View All Site Content
  </A>
</DIV>
 
 
var thisAccessKey = $("a[id$='NavLinkViewAll']").attr("accessKey");
$("a[id$='NavLinkViewAll']").attr("accessKey", 5);
 
 

Traversing

<DIV class="ms-quicklaunchheader">
  <A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll  
href="/_layouts/viewlsts.aspx">
    View All Site Content
  </A>
</DIV>
 
 
$("a[id$='NavLinkViewAll']").parent();
$("div.ms-quicklaunchheader").find("a")
 
 
var possibleValues = $("select[ID$='SelectCandidate'][Title^='"
opt.multiSelectColumn + " ']");
var selectedValues = possibleValues.closest("span")
.find("select[ID$='SelectResult'][Title^='" + opt.multiSelectColumn + " ']");
 
 

No comments:

Post a Comment