주의: 아직 실험중인 드라이버 입니다. 향후 드라이버 구현내용이 바뀔 수 있습니다.
Javascript 클래스
CodeIgniter는Javascript와 함께 사용할 수 있는 일반적인 기능을 제공합니다.CodeIgniter를 실행하기 위해서 jQuery라이브러리가 필요하지는 않습니다. 다른 어떤 스크립트 라이브러리와도 잘 동작합니다. 여기서는 단지 jQuery라이브러리가 편리하다는것을 보여줍니다.
클래스 초기화
JavaScript 클래스를 컨트롤러의 생성자에서 수동으로 초기화하려면 $this->load->library 함수를 사용합니다. 현재 자동로드가 가능한 라이브러리는 jQuery뿐이며 다음과 같이 자동으로 로드됩니다.
$this->load->library('javascript');
Javascript 클래스에 파라미터를 넘겨줄 수 있습니다.js_library_driver (string) 기본값 'jquery' 그리고 autoload (bool) 기본값TRUE. 연관배열을 넘겨줘서 기본값을 덮어쓸 수 있습니다:
$this->load->library('javascript', array('js_library_driver' =>
'scripto', 'autoload' => FALSE));
다시말하지만, 현재까지 자동로드로 사용할 수 있는것은 'jquery' 뿐입니다.메인 jquery 파일을 인클루드(include)하는 스크립트 태그가 자동으로 만들어지기를 원하지 않는다면, autoload 를 FALSE로 하세요.jQuery 라이브러리가 Codeigniter 바깥에 있거나, 이미 뷰파일에 jQuery 를 인클루드하는 스크립트가 있을 경우 유용합니다.
일단 로드되면, jQuery 라이브러리 객체는 다음과 같이 사용할 수 있습니다: $this->javascript
설치및 설정
뷰파일에 변수 설정
자바스크립트 라이브러리 파일들이 프로그램에서 사용가능해야합니다.(역주:당연한 소리를 왜 하는거냐..)
JavaScript는 클라이언트 사이드 언어이므로 라이브러리는 최종 출력에 포함되어야 됩니다.일반적으로 최종 출력은 뷰이며, 뷰의 <head>안에 다음을 include 해야합니다..
<?php echo $library_src;?>
<?php echo $script_head;?>
$library_src는 실재 라이브러리 파일이나,같이 사용되는 플러그인 들이 로드되는 곳입니다.
$script_head 에는 이벤트,함수,기타 명령들이 렌더링 되는 위치입니다.
라이브러리 경로등의 설정
JavaScript 라이브러리는 몇 가지 설정이 있습니다.각 설정은 설정파일 파일 application/config.php 또는 config/javascript.php에서 하거나, 컨트롤러에서 set_item () 메소드통해서 합니다.
로더나 진행상황 표시에 이미지를 사용할수 있습니다. 이미지를 지정하지 않으면 ajax 호출시 "loading"이라는 텍스트를 보여줍니다.
$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';
위 설정은 파일이 다운로드 될위치와 같은 위치에 파일이 있을경우 적용할 필요가 없습니다.(역주:무슨소린지 잘 모르겠음.. 아래 문장이
원문이니 각자해석바람.)
If you keep your files in the same directories they were downloaded from,
then you need not set this configuration items.
jQuery 클래스
jQuery 클래스를 컨트롤러의 생성자에서 수동으로 초기화하려면 다음과 같이$this->load->library 함수를 사용합니다:
$this->load->library('jquery');
옵션으로 두번째 파라미터를 FALSE로 설정할 경우, jQuery 를 include 하는 스크립트 태그를 자동으로 만들지 않습니다.(기본값은 자동으로 생성하는 것입니다):
$this->load->library('jquery', FALSE);
한 번로드하면 jQuery 라이브러리 객체는 다음과 같이 사용할 수 있습니다 : $this->jquery
jQuery 이벤트
이벤트를 추가하려면 아래와같이 하세요.
$this->jquery->event('element_path', code_to_run());
위의 예제:
- "event"은 다음 중 하나입니다 : blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll 또는 unload.
- "element_path" 유효한 jQuery 셀렉터 입니다. jQuery의 독특한 셀렉터 문법에 따라서 이 값은 엘리먼트의 아이디 이거나 , CSS 셀렉터입니다. 예를 들어 "#notice_area" 는 <div id="notice_area">에 적용되고, "#content a.notice" 는 "content" 라는 아이디를 가진 div 안에 "notice"라는 클래스를 속성으로 가진 a 태그들에 적용됩니다.
- "code_to_run()" 개발자가 직접 작성한 스크립트이거나,아래의 jQuery 라이브러리가 제공하는 효과(effect)와 같은 액션이 될것입니다.
효과(Effects)
JQuery 라이브러리는 강력한 효과(effects)들을 지원합니다. 효과를 사용하기전에 반드시 로드하셔야 합니다:
$this->jquery->effect([optional path] plugin name);
// for example
$this->jquery->effect('bounce');
hide() / show()
항목을 표시하거나 숨김니다. hide ()는 항목을 숨기고, show ()는 그것을 표시합니다.
$this->jquery->hide(target, optional speed, optional extra information);
$this->jquery->show(target, optional speed, optional extra information);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "speed" 옵션변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
- "extra information" 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.
toggle()
항목의 보이기/숨기기를 전환합니다. 보이는 경우 숨기고 숨어있는 경우 표시합니다.
$this->jquery->toggle(target);
- "target"은 유효한 jQuery의 셀렉터입니다
animate()
$this->jquery->animate(target, parameters, optional speed, optional extra information);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "paramters"바꾸고 싶은 CSS 속성입니다.
- "speed" 옵션변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
- "extra information" 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.
자세한 내용은 다음 링크를 참조하십시오 :http://docs.jquery.com/Effects/animate
다음은 jQuery의 click()이벤트를 이용하여 id가 "note"인 div에 animate ()를 사용하는 예제입니다..
$params = array(
'height' => 80,
'width' => '50%',
'marginLeft' => 125
);
$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal));
fadeIn() / fadeOut()
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "speed" 옵션변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
- "extra information" 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.
toggleClass()
대상에 대해 CSS 클래스를 추가하거나 제거합니다.
$this->jquery->toggleClass(target, class)
- "target"은 유효한 jQuery의 셀렉터입니다.
- "class" 는 CSS 클래스 이름입니다. 이 클래스는 CSS파일에 이미 정의되어 있어야 합니다.
fadeIn() / fadeOut()
대상을 서서히나타게하거나 서서히 사라지게 합니다.
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "speed" 옵션변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
- "extra information" 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.
slideUp() / slideDown() / slideToggle()
요소를 슬라이드시킵니다.
$this->jquery->slideUp(target, optional speed, optional extra information);
$this->jquery->slideDown(target, optional speed, optional extra information);
$this->jquery->slideToggle(target, optional speed, optional extra information);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "speed" 옵션변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
- "extra information" 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.
플러그인
본 라이브러리에서 몇가지 jQuery 플러그인이 사용가능 합니다.
corner()
대상의 모서리에 다양한 모양을 줄 수 있습니다.. 상세정보 http://www.malsup.com/jquery/corner/
$this->jquery->corner(target, corner_style);
- "target"은 유효한 jQuery의 셀렉터입니다.
- "corner_style"옵션변수 이며 , 원하는 모서리형태를 지정합니다 round, sharp, bevel, bite, dog, 등을 사용할 수 있습니다."tl" (top left), "tr" (top right), "bl" (bottom left), "br" (bottom right) 등을 사용하여 각모서리가 다른 형태가 되도록 할 수 있습니다.
$this->jquery->corner("#note", "cool tl br");
tablesorter()
나중에 쓸예정임(역주: 번역이 안된게 아니라 원문이 이렇습니다.)
modal()
나중에 쓸예정임
calendar()
나중에 쓸예정임