CodeIgniter User Guide Version 2.1.0


주의: 아직 실험중인 드라이버 입니다. 향후 드라이버 구현내용이 바뀔 수 있습니다.


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());

위의 예제:

효과(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);

toggle()

항목의 보이기/숨기기를 전환합니다. 보이는 경우 숨기고 숨어있는 경우 표시합니다.

$this->jquery->toggle(target);

animate()

$this->jquery->animate(target, parameters, optional speed, optional 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);

toggleClass()

대상에 대해 CSS 클래스를 추가하거나 제거합니다.

$this->jquery->toggleClass(target, class)

fadeIn() / fadeOut()

대상을 서서히나타게하거나 서서히 사라지게 합니다.

$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional 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);

플러그인

본 라이브러리에서 몇가지 jQuery 플러그인이 사용가능 합니다.

corner()

대상의 모서리에 다양한 모양을 줄 수 있습니다.. 상세정보 http://www.malsup.com/jquery/corner/

$this->jquery->corner(target, corner_style);

$this->jquery->corner("#note", "cool tl br");

tablesorter()

나중에 쓸예정임(역주: 번역이 안된게 아니라 원문이 이렇습니다.)

modal()

나중에 쓸예정임

calendar()

나중에 쓸예정임