Tìm hiểu về Javascript Library trong CI

Bài đăng này đã không được cập nhật trong 8 năm

CI cung cấp một thư viện để giúp bạn thao tác với một số chức năng phổ biến, chức năng đó thường được xử lý bằng Javascript. Chú ý rằng CI framework không bắt buộc phải cần đến thư viện jQuery để chạy và về mặt performance thì không hề thua kém khi bạn sử dụng thư viện JQuery.

Khởi tạo class (Initializing the Class)

Để khởi tạo class Javascript trong controller của bạn thì vẫn sử dụng cú pháp quen thuộc $this->load->library('ten_thu_vien'). Lưu ý rằng ở version hiện tại chỉ duy nhất Jquery Class là được load một cách tự động vào hệ thống và bạn không cần phải khởi tạo mà vẫn có thể sử dụng được chúng.

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

The Javascript class also accepts parameters, js_library_driver (string) default 'jquery' and autoload (bool) default TRUE. You may override the defaults if you wish by sending an associative array:

Javascript class cũng có những thông số để truyền vào khi khởi tạo, bạn có thể ghi đè một vài thông số như sau:

$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));

ở đoạn code trên bạn đã config tắt chế động tự load scripto khi load javascript class. Như đã nói ở trên Jquery class sẽ tự động được load vào hệ thống nếu bạn muốn tắt chế độ tự động chỉ cần set autoload thành FALSE. Khi bạn sử dụng dòng lệnh $this->javascript thì mặc định jQuery hoàn toàn hợp lệ để bạn sử dụng.

Cài đặt và cấu hình

Tao ra những biến để sử dụng

Giống như ngôn ngữ Javascript phía client, thư viện cần có khả năng sinh ra mã code JS để phía cliendt có thể thực thi. Bạn sẽ cần phải in ra những biến sau vào phần đầu của file view:

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

$library_src là biến chứa đường dẫn các file js được sinh ra (nó giống với bạn include url của một file js thường) $script_head là biến chứa các sự kiện, chức năng cụ thể và các command được return về.

Thiết lập đường dẫn config tới thư viện

Có một vài param cấu hình trong thư viện Javascript, nó có thể được thiết lập trực tiếp trong file config.php hoặc thiết lập luôn tại nơi bạn khởi tạo. Bạn có thể tạo ra một file javascript.php để lưu những thiết lập của bạn mà không cần phải chính sửa file cấu hình chung của hệ thống Hệ thống sẽ tự động sinh ra một image, đây là image được hiển thị trong quá trình thực thi Ajax (Loading Image) nếu tắt nó đi thì mặc định hệ thống sẽ hiển thị chữ "loading" khi ajax được gọi. Bạn có thể ghi đè file image đó bằng cách config như sau:

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

jQuery Class đi kèm

Nếu như bạn đã thiết lập để hệ thống không tự động load jQuery Class thì có thể khởi tạo ở controller bạn muốn dùng bằng lệnh sau:

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

Sau khi jQuery class được load vào hệ thống thì bạn có thể sử dụng

$this->jquery

để xử lý tác vụ mà bạn muốn.

Những sự kiện trong jQuery Class

Ví dụ cú pháp

$this->jquery->event('element_path', code_to_run());

Trong câu lệnh trên thì phần thiết lập có thể chứa những param sau:

event: bao gồm "blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll, or unload"
element_path: bao gồm các jQuery selector
code_to_run: chứa những đoạn code của bạn viết.

Những hiệu ứng phổ biến hay dùng

Bất kỳ hiệu ứng nào trước khi được sử dụng nó đều phải được load vào hệ thống bằng câu lệnh

$this->jquery->effect('hide');

ở đây tôi lấy ví dụ hiệu ứng 'hide' và sau khi load bạn có thể sử dụng hiệu ứng đó

$this->jquery->hide('.....');

Một số hiệu ứng hay dùng:

hide() / show()
toggle()
animate()
fadeIn() / fadeOut()
toggleClass()
fadeIn() / fadeOut()
slideUp() / slideDown() / slideToggle()

Ví dụ

Bạn có thể config thư viện nếu không muốn dùng thư viện mặc đinh như sau

$config['javascript_location'] = 'http://localhost/codeigniter_javascript/js/jquery.min.js';

Load thư viện javascript library và jquery mới config ở trên

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

Sau đó load một event mà bạn muốn dùng

$this->jquery->event('element_path', code_to_run());

Thiết lập một vài giá trị để truyền cho file view

$data['library_src'] = $this->jquery->script();
$data['click'] = $this->jquery->_click('#click', "alert('Đây là sự kiện click');");
$data['dbl_click'] = $this->jquery->_dblclick('#double_click', "alert('Đây là sự kiện click đúp chuột');");
$data['hide'] = $this->jquery->_hide('#content', 800);
$data['show'] = $this->jquery->_show('#content', 800);
$data['fade_in'] = $this->jquery->_fadeIn('#content', 800);
$data['fade_out'] = $this->jquery->_fadeOut('#content', 800);
$data['toggle'] = $this->jquery->_toggle('#content');
$data['slide_up'] = $this->jquery->_slideUp('#content',800);
$data['slide_down'] = $this->jquery->_slideDown('#content',800);
$data['slide_toggle'] = $this->jquery->_slideToggle('#content',800);