자바스크립트(Javascript Class)¶

CodeIgniter는Javascript와 함께 사용할 수 있는 일반적인 기능을 제공합니다.CodeIgniter를 실행하기 위해서 jQuery라이브러리가 필요하지는 않습니다. 다른 어떤 스크립트 라이브러리와도 잘 동작합니다. 여기서는 단지 jQuery라이브러리가 편리하다는 것을 보여줍니다.

Important

이 라이브러리는 DEPRECATED 되었습니다. 그리고 사용하실 수 없습니다. 이 함수는 실험 상태에 있었으며, 지금은 더 이상 지원되지 않습니다. 현재는 이전 버전과의 호환성을 위해 유지됩니다.

자바스크립트 클래스 사용하기 Using the Javascript Class ¶

클래스 초기화 ¶

JavaScript 클래스를 컨트롤러의 생성자에서 수동으로 초기화하려면 $this->load->library() 함수를 사용합니다. 현재 자동 로드가 가능한 라이브러리는 jQuery뿐이며 다음과 같이 자동으로 로드됩니다:

$this->load->library('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

설치및 설정 Setup and Configuration ¶

뷰파일에 변수 설정 Set these variables in your view ¶

자바스크립트 라이브러리 파일들이 프로그램에서 사용 가능해야 합니다.

JavaScript는 클라이언트 사이드 언어이므로 라이브러리는 최종 출력에 포함되어야 됩니다.일반적으로 최종 출력은 뷰이며, 뷰의 <head> 안에 다음을 include 해야 합니다.

<?php echo $library_src;?>
<?php echo $script_head;?>

$library_src는 실제 라이브러리 파일이나,같이 사용되는 플러그인 들이 로드되는 곳입니다. $script_head 에는 이벤트,함수,기타 명령들이 렌더링 되는 위치입니다.

라이브러리 경로등의 설정 Set the path to the librarys with config items ¶

JavaScript 라이브러리는 몇 가지 설정이 있습니다.각 설정은 설정파일 파일 application/config.php 또는 config/javascript.php 에서 하거나, 컨트롤러에서 set_item() 메소드통해서 합니다.

로더나 진행상황 표시에 이미지를 사용할 수 있습니다. 이미지를 지정하지 않으면 “ajax loader” 호출시 “loading” 이라는 텍스트를 보여줍니다.

$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';

위 설정은 파일이 다운로드 될 위치와 같은 위치에 파일이 있을 경우 적용할 필요가 없습니다.

jQuery 클래스 The jQuery Class ¶

jQuery 클래스를 컨트롤러의 생성자에서 수동으로 초기화하려면 다음과 같이 $this->load->library() 함수를 사용합니다:

$this->load->library('javascript/jquery');

옵션으로 두 번째 파라미터를 FALSE로 설정할 경우, jQuery 를 include 하는 스크립트 태그를 자동으로 만들지 않습니다.(기본값은 자동으로 생성하는 것입니다):

$this->load->library('javascript/jquery', FALSE);

한 번로드하면 jQuery 라이브러리 객체는 다음과 같이 사용할 수 있습니다:

$this->jquery

jQuery 이벤트 jQuery Events ¶

이벤트를 추가하려면 아래와 같이 하세요.

$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 selector 입니다. jQuery의 독특한 셀렉터 문법에 따라서 이 값은 엘리먼트의 아이디 이거나, CSS 셀렉터입니다. 예를 들어 “#notice_area” 는 <div id="notice_area">에 적용되고, “#content a.notice” 는 “content” 라는 아이디를 가진 div 안에 “notice” 라는 클래스를 속성으로 가진 a 태그들에 적용됩니다.
“code_to_run()” is script your write yourself, or an action such as an effect from the jQuery library below.

효과 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의 셀렉터입니다.
“parameters” 바꾸고 싶은 CSS 속성입니다.
“speed” 옵션 변수이며 slow (느림), normal (보통), fast (빠름) 중 하나 또는 밀리초 단위의 숫자를 지정합니다.
“extra information” 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.

자세한 내용은 다음 링크를 참조하십시오 : http://api.jquery.com/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()¶

This function will add or remove a CSS class to its target.

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

“target” 은 유효한 jQuery의 셀렉터입니다.
“class” is any CSS classname. Note that this class must be defined and available in a CSS that is already loaded.

fadeIn() / fadeOut()¶

These effects cause an element(s) to disappear or reappear over time.

$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()¶

These effects cause an element(s) to slide.

$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” 옵션변수이며, 콜백이나, 기타 추가정보를 포함시킬 수 있습니다.

플러그인 Plugins ¶

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

corner()¶

대상의 모서리에 다양한 모양을 줄 수 있습니다. 상세정보 : http://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()¶

나중에 쓸예정임

calendar()¶

나중에 쓸예정임