Esta sencilla librería permite la carga de hojas de estilos CSS y archivos JavaScript dentro de vistas de CodeIgniter con la finalidad de solo utilizarlas en donde se necesite de manera sencilla y no tenerlas disponibles en vistas que no requieran tales archivos.
También permite la inclusión de métodos jQuery.
- Copiar el archivo
Resources.phpdentro deapplication/libraries/. - Autocargar la librería mediante
$autoload['libraries'] = 'resources';en el archivoapplication/config/autoload.php.
- Agregar el llamado a
$this->resources->css();dentro de la etiqueta<head>. - Agregar el llamado a
$this->resources->js();antes del cierre de la eiqueta<body>(Recomendado para mejorar la carga del sitio web aunque también se puede agregar dentro de<head>). - Opcional - Agregar el llamado a
$this->resources->functions();luego del llamado a$this->resources->js();.
NOTA IMPORTANTE: Aunque la librería dispone de un método para cargar métodos jQuery mediante $this->resources->functions(); no es recomendable utilizarla para garantizar el fácil mantenimiento del código. Se recomienda en su lugar crear archivos .js con tales métodos para luego cargarlos a la vista.
Implementar la librería es muy sencillo, los pasos descritos a continuación deben ubicarse en un controlador antes de cargar la vista. Se utiliza el arreglo $config a modo ilustrativo, puede llamarlo de la manera que lo desee.
Por defecto la ruta para las hojas de estilo CSS es assets/css/ y para los archivos JavaScript es assets/js/ las cuales son relativas al root del sitio web, pero se pueden especificar rutas diferentes de la siguiente manera:
$config['css_path'] = 'ruta/hojas/estilo/';
$config['js_path'] = 'ruta/archivos/javascript/';
Estos índices del arreglo $config deben especificarse antes de inicializar los parámetros de la librería con $this->resources->initialize($config);.
IMPORTANTE: Las rutas deben finalizar obligatoriamente en /, de lo contrario no funcionarán.
Para cargar hojas de estilo CSS se debe crear un arreglo de configuración de la manera que se muestra a continuación:
$config['css'] = array('styles','template','default');
$this->resources->initialize($config);
NOTA: No es necesario agregar la extensión .css.
Esto produce en la vista, donde se encuentre el llamado a $this->resources->css(); lo siguiente:
<link href="http://sitioweb.com/assets/css/styles.css" rel="stylesheet">
<link href="http://sitioweb.com/assets/css/template.css" rel="stylesheet">
<link href="http://sitioweb.com/assets/css/default.css" rel="stylesheet">
Para cargar hojas de estilo CSS con rutas diferentes para cada archivo se debe crear un arreglo asociativo de configuración de la manera que se muestra a continuación:
$config['css'] = array('styles' => 'path/styles/', 'template' => 'path/template/', 'default' => 'path/default/');
$this->resources->initialize($config);
Como se puede apreciar el índice del arreglo sería el archivo a cargar y se le asigna la ruta donde se encuentra dicho archivo.
Esto produce en la vista, donde se encuentre el llamado a $this->resources->css(); lo siguiente:
<link href="http://sitioweb.com/path/styles/styles.css" rel="stylesheet">
<link href="http://sitioweb.com/path/template/template.css" rel="stylesheet">
<link href="http://sitioweb.com/path/default/default.css" rel="stylesheet">
Para incluir archivos CSS desde una url asoluta o desde un CDN basta con indicarlo de la siguiente manera:
$config['css'] = array('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
$this->resources->initialize($config);
En la vista observaríamos lo siguiente
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
IMPORTANTE: Se debe incluir la extensión del archivo.
NOTA SOBRE CDN'S: Algunos servicios de CDN poseen direcciones que comienzan por // como en el caso de Bootstrap, cuya dirección de CDN es //maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css, en esos casos debemos agregar el http: o https: al indicar la ruta en el arreglo de configuración de la librería. En futuras versiones esto no será necesario.
Para cargar scripts se usa el mismo procedimiento utilizado para cargar CSS, solo se debe especificar de manera diferente el arreglo de configuración:
$config['js'] = array('jquery.min','functions');
$this->resources->initialize($config);
NOTA: No es necesario agregar la extensión .js.
Esto produce en la vista, donde se encuentre el llamado a $this->resources->js(); lo siguiente:
<script src="http://sitioweb.com/assets/js/jquery.min.js"></script>
<script src="http://sitioweb.com/assets/js/functions.js"></script>
Para cargar scripts con rutas diferentes para cada archivo se debe se crear un arreglo asociativo de configuración de la manera que se muestra a continuación:
$config['js'] = array('jquery.min' => 'path/jquery/', 'functions' => 'path/functions/');
$this->resources->initialize($config);
Al igual que para cargar estilos CSS, el índice del arreglo sería el archivo a cargar y se le asigna la ruta donde se encuentra dicho archivo.
Esto produce en la vista, donde se encuentre el llamado a $this->resources->js(); lo siguiente:
<script src="http://sitioweb.com/path/jquery/jquery.min.js"></script>
<script src="http://sitioweb.com/path/functions/functions.js"></script>
Para incluir archivos JS desde una url asoluta o desde un CDN demebos indicarlo de la siguiente manera:
$config['js'] = array('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js');
$this->resources->initialize($config);
En la vista observaríamos lo siguiente
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
IMPORTANTE: Se debe incluir la extensión del archivo.
NOTA SOBRE CDN'S: Algunos servicios de CDN poseen direcciones que comienzan por // como en el caso de Bootstrap, cuya dirección de CDN es //maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js, en esos casos debemos agregar el http: o https: al indicar la ruta en el arreglo de configuración de la librería. En futuras versiones esto no será necesario.
Para cargar métodos jQuery en una vista se debe especificar la configuación de la siguiente manera:
$config['functions'] = array('$("#boton").click(function() {show_alert();});','function show_alert() { alert("Click al botón");}');
$this->resources->initialize($config);
El código anterior crea dos métodos. El primero es una acción de clic sobre un elemento con id="boton" que hará el llamado al segundo método llamado show_alert() que se encargará de mostrar un simple alert en pantalla.
Esto produce en la vista, donde se encuentre el llamado a $this->resources->functions(); lo siguiente sin ningún tipo de espaciado ni identación:
<script> $(function() { $("#boton").click(function() { show_alert(); });function show_alert() { alert("Click al botón"); } });
</script>
Como se puede observar en el ejemplo es un método un poco complicado de utilizar, por lo tanto es totalmente recomendable utilizar en su lugar la carga de archivos .js.