CodeIgniter - Aggiunta di JS e CSS

L'aggiunta di file JavaScript e CSS (Cascading Style Sheet) in CodeIgniter è molto semplice. Devi creare la cartella JS e CSS nella directory principale e copiare tutti i file .js nella cartella JS e i file .css nella cartella CSS come mostrato in figura.

Ad esempio, supponiamo di aver creato un file JavaScript sample.js e un file CSS style.css. Ora, per aggiungere questi file alle visualizzazioni, carica l'helper URL nel controller come mostrato di seguito.

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

Dopo aver caricato l'helper URL nel controller, aggiungi semplicemente le righe indicate di seguito nel file di visualizzazione, per caricare il file sample.js e style.css nella vista come mostrato di seguito.

<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>

Esempio

Crea un controller chiamato Test.php e salvalo in application/controller/Test.php

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

Crea un file di visualizzazione chiamato test.php e salvalo in 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>

Crea un file CSS chiamato style.css e salvalo in css/style.css

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

Crea un file JS chiamato sample.js e salvalo in js/sample.js

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

Cambiare il routes.php file in formato application/config/routes.php per aggiungere il percorso per il controller di cui sopra e aggiungere la riga seguente alla fine del file.

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

Utilizza il seguente URL nel browser per eseguire l'esempio precedente.

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

↰ Previous page Next page ↱

CodeIgniter - Aggiunta di JS e CSS

Esempio

Tutorial CodeIgniter