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

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts