블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Notice

2012.03.20 08:30 SharePoint/SharePoint 2010


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 에 대한 내용도 액세스 할 수 있습니다~


신고
posted by 정홍주

티스토리 툴바