Integrating JQuery is easy. You have two choices: Upload the JQuery api to a document library or put a copy in the 12 hive /TEMPLATE/Layouts folder.
On my development environment I put it in the 12 hive layouts folder. \Layouts\JQuery\
I also installed a JQuery plug-in called Lightbox to have something fun to play with.
JQuery allows the selection of objects in the document object model without having to traverse the DOM to find controls on the page.
For example to select all text boxes on a page and set the font weight to bold use the following line:
$(":text").css("font-weight", "bold");
That’s it --- I can’t wait till my next branding assignment.
With a Content Editor WebPart a JQuery plug-in called “lightbox” and a little script you can have a nice way to browse images without the use of Ajax. Users can click on thumbnails and be able to view and navigate through a list of images.
Content Editor Web Part Script:
<head>
<link rel="stylesheet" type="text/css" href="_layouts/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
</head>
<div id="gallery">
<a href="_layouts/jquery/lightbox/photos/image1.jpg" title="Image1">
<img src="_layouts/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
<a href="_layouts/jquery/lightbox/photos/image2.jpg" title="Image2">
<img src="_layouts/jquery/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</div>
<script type="text/javascript" src="_layouts/jquery/lightbox/js/jquery.js"></script>
<script type="text/javascript" src="_layouts/jquery/lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({
overlayBgColor: 'gray',
overlayOpacity: 0.6,
imageLoading: '_layouts/jquery/lightbox/images/lightbox-ico-loading.gif',
imageBtnClose: '_layouts/jquery/lightbox/images/lightbox-btn-close.gif',
imageBtnPrev: '_layouts/jquery/lightbox/images/lightbox-btn-prev.gif',
imageBtnNext: '_layouts/jquery/lightbox/images/lightbox-btn-next.gif',
containerResizeSpeed: 350,
txtImage: 'Sample Image',
txtOf: 'Sample Lightbox Image'
});
});
</script>
The next edition of Visual Studio will have intellisense built-in for JQuery. For Visual Studio 2008 go here. http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
REFERENCES:
http://philwicklund.com/archive/2009/04/20/an-introduction-to-jquery-for-sharepoint-developers.aspx
http://philwicklund.com/pages/LightboxExample.aspx
http://leandrovieira.com/projects/jquery/lightbox/
http://docs.jquery.com/Downloading_jQuery
http://docs.jquery.com/Tutorials
1 comments:
Don't forget about Jan Tielens' blog. He's got some neat jQuery samples there, too: http://weblogs.asp.net/jan/default.aspx
Post a Comment