by Abe Miessler
12. April 2011 07:31
For something so simple, this problem took me quite a while so I wanted to share how I resolved it. In my situation I wanted to add jQuery and a few jQuery plugin files to be part of my visual web part. This web part was going to be part of a wsp that would be shipped out to SharePoint environments that I had no control over, so simply including them in the master page was not an option.
Step 1:
Right click on your project file and select Add->SharePoint "Layouts" Mapped Folder
Step 2:
In side of the Layouts Mapped folder create the following file structure
YourProjectName/js
Step 3:
Add your js files to the folder you just created in your project.
Step 4:
Inside of your ascx file for you visual web part create the ScriptLink tag
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="YourProjectName/js/jquery.min.js" Localizable="false" LoadAfterUI="true" />
If you have jQuery plugins, place their ScriptLink tags AFTER the jQuery tag
You should now be in business. If you are havinig problems check the following directory to make sure your scripts are being deployed:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\YourProjectName\js
by Abe Miessler
22. June 2010 00:58
I was recently working on a webpage where I wanted to have a collection of tabs at the top of the page pulsate one after the other. Had to do a bit of digging around (and get some help from a friend of mine who happens to be a jQuery expert) so I thought I would post it up here incase anyone else runs into this. Once it was done it was remarkably little code, yet another example of why I'm falling in love with jQuery and jQuery UI.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#myTabs").tabs({ fx: { opacity: "toggle"} });
recurivePulsate($("#items").find("li")[0]);
});
function recurivePulsate(elem) {
$(elem).effect("pulsate", { times: 1 }, 500, function () {
recurivePulsate($(elem).next());
});
}
</script>
</head>
<body>
<div id="myTabs">
<ul id="items">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
<li><a href="#fourth">Fourth</a></li>
</ul>
<div id="first">Data for First!</div>
<div id="second">Data for Second!</div>
<div id="third">Data for Third!</div>
<div id="fourth">Data for Fourth!</div>
</div>
</body>
</html>
71da64f9-abc4-4bee-895c-1e3b2ead95ae|1|5.0
Tags: jQuery
jQuery
Subscribe