jquery] jquery 사용 가이드

출처 : http://www.anyframejava.org/node/1061

jQuery 사용 가이드

Submitted by sooyeon.park on 월, 06/07/2010 - 09:03.

안녕하세요. kk3134님,
추후 릴리즈될 Anyframe 4.5.0 버전에서 jQuery 1.4.2 버전을 Integration한 jQuery Anyframe Plugin을 제공할 예정입니다.
필요 파일과 샘플 코드 그리고 사용가이드를 제공할 예정입니다.
(Grid, UI(tab), Tree, Autocomplete, Popup, DropDownList 제공 예정)
현재 바로 jQuery를 사용하고 싶으시다면, 아래와 같이 JSP 페이지에서 사용하고자 하는 jQuery Plugin에 대한 Javascript 파일 및 CSS 파일을
포함시켜야합니다. jQuery 또한 core 기능을 제공하는 jquery-1.4.2.min.js 외 나머지 autocomplete, tree, popup, grid 등의 기능을
Plugin 형태로 제공하므로 원하는 기능을 선택하여 포함시키도록 합니다.

  <!-- for jquery -->

  <script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">



  <!-- jquery:autocomplete -->

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

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

  <script type="text/javascript" src="/jquery/autocomplete/jquery.bgiframe.min.js">  

  

  <!-- jquery:jstree-0.9.9 -->

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.cookie.js">

  <script type="text/javascript" src="/jquery/jstree/lib/jquery.metadata.js">

  <script type="text/javascript" src="/jquery/jstree/jquery.tree.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.contextmenu.js">

  <script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.cookie.js">



  <!-- jquery ui, jqGrid -->

  <script type="text/javascript" src="/jquery/jqgrid/i18n/grid.locale-en.js">

  <link href="/jquery/jquery-ui/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js">

  <link href="/jquery/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 

  <script type="text/javascript" src="/jquery/jqgrid/jquery.jqGrid.min.js">

 

  <!-- jquery popup -->

  <script type="text/javascript" src="/jquery/nyromodal/js/jquery.nyroModal-1.6.2.pack.js">

  <link href="/jquery/nyromodal/styles/nyroModal.css" rel="stylesheet" type="text/css" />

  

  <!-- jquery tab -->

  <link href="/jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />

            

  <!-- jquery uploadify -->

  <script type="text/javascript" src="/jquery/uploadify/swfobject.js">

  <script type="text/javascript" src="/jquery/uploadify/jquery.uploadify.v2.1.0.min.js">

     

  <!-- jquery image dropdown -->

  <script type="text/javascript" src="/jquery/dropdown/msdropdown/js/jquery.dd.js">

  <link href="/jquery/dropdown/msdropdown/dd.css" rel="stylesheet" type="text/css" />

이 중 간단한 Autocomplete 기능을 예로 들어보면, 아래와 같은 간단한 코드로 Auto Complete 기능을 적용하실 수 있습니다.
- 필요파일) jquery.js(ver. 1.4.2), jquery.autocomplete.js, jquery.bgiframe.js (이상 ver. 1.1), jquery.autocomplete.css

$(“#searchKeyword”).autocomplete(

   ””, {

   width : 200,

   scrollHeight : 200,

   selectFirst:true,

   mustMatch:true,

   matchCase:true,

   autoFill:true,

   scroll: true

 });

위와같이 url을 지정해 주면 바로 autocomplete 기능을 사용할 수 있습니다.
jquery-autocomplete

»