CodeIgniter - Thêm JS & CSS

Thêm tệp JavaScript và CSS (Cascading Style Sheet) trong CodeIgniter rất đơn giản. Bạn phải tạo thư mục JS và CSS trong thư mục gốc và sao chép tất cả các tệp .js trong thư mục JS và các tệp .css trong thư mục CSS như trong hình.

Ví dụ: giả sử bạn đã tạo một tệp JavaScript sample.js và một tệp CSS style.css. Bây giờ, để thêm các tệp này vào chế độ xem của bạn, hãy tải trình trợ giúp URL trong bộ điều khiển của bạn như được hiển thị bên dưới.

$this->load->helper('url');

Sau khi tải trình trợ giúp URL trong bộ điều khiển, chỉ cần thêm các dòng đã cho bên dưới vào tệp dạng xem, để tải tệp sample.js và style.css trong dạng xem như được hiển thị bên dưới.

<link rel = "stylesheet" type = "text/css" 
   href = "<?php echo base_url(); ?>css/style.css">

<script type = 'text/javascript' src = "<?php echo base_url(); 
   ?>js/sample.js"></script>

Thí dụ

Tạo một bộ điều khiển có tên Test.php và lưu nó vào application/controller/Test.php

<?php 
   class Test extends CI_Controller {
	
      public function index() { 
         $this->load->helper('url'); 
         $this->load->view('test'); 
      } 
   } 
?>

Tạo một tệp dạng xem có tên test.php và lưu nó tại application/views/test.php

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>CodeIgniter View Example</title> 
      <link rel = "stylesheet" type = "text/css" 
         href = "<?php echo base_url(); ?>css/style.css"> 
      <script type = 'text/javascript' src = "<?php echo base_url(); 
         ?>js/sample.js"></script> 
   </head>
	
   <body> 
      <a href = 'javascript:test()'>Click Here</a> to execute the javascript function. 
   </body>
	
</html>

Tạo một tệp CSS có tên style.css và lưu nó tại css/style.css

body { 
   background:#000; 
   color:#FFF; 
}

Tạo một tệp JS có tên sample.js và lưu nó tại js/sample.js

function test() { 
   alert('test'); 
}

Thay đổi routes.php trong tập tin application/config/routes.php để thêm tuyến đường cho bộ điều khiển trên và thêm dòng sau vào cuối tệp.

$route['profiler'] = "Profiler_controller"; 
$route['profiler/disable'] = "Profiler_controller/disable"

Sử dụng URL sau trong trình duyệt để thực hiện ví dụ trên.

http://yoursite.com/index.php/test

CodeIgniter - Thêm JS &amp; CSS

Thí dụ

CodeIgniter - Thêm JS & CSS