Geo Programando: Fácil instalación de jquery

Después de la instalación de codeigniter, he configurado mi servidor (xampp) para que tenga la siguiente estructura:

htdocs/blog/
--------------application
--------------system

Para "instalar" jquery solo creo una carpeta en este caso "js" en la raíz de la aplicación y copio los archivos contenidos en el archivo comprimido de la siguiente manera:

htdocs/blog/
--------------application
--------------system
--------------js/ (en esta carpeta pondré también los javascripts que vaya realizando)
----------------jquery-ui-1.8.17.custom.min.js
---------------jquery-1.7.1.min.js
---------------css (esta carpeta ya viene incluida en el zip solo copiarla entera)

sencillo no?

Pero falta, vamos a crear una vista y un controller para probar que nuestra "instalación de jquery" ha funcionado, debe quedar de la siguiente manera:

htdocs/blog/
------------application/
-------------------------controllers/
--------------------------------------testjquery.php (mi controller)
-------------------------views/
--------------------------------testjquery_view.php (mi vista, siempre le añado _view a las vistas algo como un estándar que he puesto en todos mis proyectos, nótese que no he hecho lo mismo con el controller)

A continuación incluyo el contenido de la vista y el controller, no voy a explicar profundamente porque toda la información está en los manuales de jquery y codeigniter.

testjquery.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Testjquery extends CI_Controller {

    public function index()

    {

        $this->load->view('testjquery_view');

    }

}

/* End of file testjquery.php */

/* Location: ./application/controllers/testjquery.php */

En la vista cargamos las librerías de jquery usando las rutas ya definidas anteriormente, y los css correspondientes al tema que hayamos escogido
Dentro de la vista creamos un datepicker (vease documentación del ui de jquery),

testjquery_view.php

<!doctype html>
<html lang="es">
    <head>
        <link type="text/css" href="../js/css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
         <script type = "text/javascript">
          jQuery(document).ready(function()
          {
             $( "#datepicker" ).datepicker();
          });
        </script>
    </head>
    <body>
    <div>
    <input id="datepicker" type="text">
    </div>
    </body>
</html>

Y este debería se el resultado al hacer click sobre el datepicker ejecutando la dirección url http://localhost/blog/index.php/testjquery

Realmente sencillo integrar jquery a nuestros proyectos de codeigniter, lo siguiente sería desarrollar diferentes componentes que se pudieran reutilizar, usando ajax, json , bases de datos, etc.

Manos a la obra!!!!!

Geo Programando

Páginas

miércoles, 8 de febrero de 2012

Fácil instalación de jquery

No hay comentarios:

Publicar un comentario