CodeIgniter - Añadiendo JS y CSS
Agregar archivos de JavaScript y CSS (hoja de estilo en cascada) en CodeIgniter es muy simple. Debe crear la carpeta JS y CSS en el directorio raíz y copiar todos los archivos .js en la carpeta JS y los archivos .css en la carpeta CSS como se muestra en la figura.
Por ejemplo, supongamos que ha creado un archivo JavaScript sample.js y un archivo CSS style.css. Ahora, para agregar estos archivos a sus vistas, cargue URL helper en su controlador como se muestra a continuación.
$this->load->helper('url');Después de cargar el asistente de URL en el controlador, simplemente agregue las siguientes líneas en el archivo de vista, para cargar el archivo sample.js y style.css en la vista como se muestra a continuación.
<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>Ejemplo
Crea un controlador llamado Test.php y guárdalo en application/controller/Test.php
<?php
class Test extends CI_Controller {
public function index() {
$this->load->helper('url');
$this->load->view('test');
}
}
?>Crea un archivo de vista llamado test.php y guárdalo en 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 archivo CSS llamado style.css y guárdalo en css/style.css
body {
background:#000;
color:#FFF;
}Crea un archivo JS llamado sample.js y guárdalo en js/sample.js
function test() {
alert('test');
}Cambiar el routes.php presentar en application/config/routes.php para agregar una ruta para el controlador anterior y agregar la siguiente línea al final del archivo.
$route['profiler'] = "Profiler_controller";
$route['profiler/disable'] = "Profiler_controller/disable"Utilice la siguiente URL en el navegador para ejecutar el ejemplo anterior.
http://yoursite.com/index.php/test