SharePoint 2010에서의 jQuery

SharePoint 2010에서의 jQuery 

이전 글에서 Module 프로젝트에 대한 내용을 통해 jQuery 파일을 배포하는 것을 알아보았으며 jQuery 의 js 파일은 단순히 업로드를 통해서 가능합니다.

이제 jQuery를 이용한 코드를 한번 작성해볼까 합니다.

아래와 같이 Module의 파일들이 구성되어 있습니다.

<Module  Name="HModule" Url="HJ"  >

  <File  Path="HModule\images\Chrysanthemum.jpg" Url="HModule/images/Chrysanthemum.jpg" />

<File Path="HModule\css\demo.css" Url="HModule/css/demo.css" />

<File Path="HModule\js\jquery-1.6.3.min.js" Url="HModule/js/jquery-1.6.3.min.js" />

<File Path="HModule\js\jquery-1.6.3.js" Url="HModule/js/jquery-1.6.3.js" />

<File Path="HModule\Sp10HellojQuery.js" Url="HModule/Sp10HellojQuery.js" />

<File Path="HModule\Sp10HellojQuery.aspx" Url="HModule/Sp10HellojQuery.aspx" />

<File Path="HModule\HJ.aspx" Url="HModule/HJ.aspx" />

</Module>

 

Js 파일의 내용은 아래와 같습니다. 정말 간단한 jQuery 입니다. 물론 aspx 파일에 “btnGo”, “div1”의 개체가 있습니다.

 $(document).ready(function () {

    $("#div1").html("SharePoint 2010 - Hello jQuery");

    $('#btnGo').click(btnGo_click);

});

 

function btnGo_click() {

    $("#div1").css("background-color", "red");

    $("#div1").animate({height:'toggle'});

}

 

aspx 파일의 구성은 아래와 같습니다.

 <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

 

  <link href="css/demo.css" rel="stylesheet" type="text/css" />     

  <SharePoint:ScriptLink

    runat="server"

    Defer="false"

    Name="~sitecollection/HJ/HModule/js/jquery-1.6.3.min.js"/>

   <script src="Sp10HellojQuery.js" type="text/javascript" ></script>

</asp:Content>   

 

 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

  <h2>SharePoint 2010 Hello jQuery</h2>

<input id="btnGo" type="button" value="Hello" />

  <div id="div1" />

</asp:Content>

 

 

SharePoint:ScriptLink 를 사용하지 않고 CDN을 통해 jQuery 파일을 아래와 같이 액세스할 수도 있습니다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.3.min.js"></script> 

 

배포해서 결과를 한번 보도록 하겠습니다. Css 파일에 스타일이 적용되어 있습니다.

SharePoint 2010에서도 손쉽게 Module 등을 이용해서 jQuery를 이용할 수 있다는 것을 알아보았습니다.

jQueryUI와 Javascript SharePoint Client Object Model 에 대한 내용도 액세스 할 수 있습니다~