Ventanas Modales, Como? jquery, colorbox, jqmodal

[PolloLetal]

Hola gente, estuve viendo toda la mañana, información para poder ir un
pasito mas alla y colocar esas ventanitas tipo popup en mi aplicación.
vi que hay varias librerias mas utilizadas, jquery, colorbox, jqmodal,
etc. que serian de las mas utilizadas y de las mas livianas.
Hasta ahi llegue, pero no logro integrarlas con mi aplicación.
Se incluir los js, que van en las vistas, pero de ahi llamarlos para
poder cargar mis views no puedo avanzar.

Seria mucho pedirles me den un ejemplo de como cargar una ventana
modal (que pueda mostrar o bien editar) y luego volver y/o actualizar.

Estuve haciendo el intento de arreglarmelas, pero esto del ajax, es un
tema pendiente desde hace tiempo y la verdad que me da bastante lio,
nunca JS fue mi amigo.

Leí que Julian M. recomienda el uso de colorbox, sera que puedo abusar
pidiendole una manito?

Gracias a toda la comunidad.

Pollo

[OmaR yepez]

Quizas jQuery4PHP te ayuda con el tema de ajax y de la nterfaz de usuario....

http://jquery4php.sourceforge.net/

http://sourceforge.net/projects/jquery4php

Pronto se publicara un articulo de como integrar jQuery4PHP con Codeigniter pero si quieres te lo envio a tu correo.

Ahora si quieres usar solo una libreria .js te recomiendo jquery UI

http://jqueryui.com/

Saludos.

--
---
Para anular la suscripción a este grupo, envía un mensaje a
codeigniter-spa...@googlegroups.com
Para obtener más opciones, visita este grupo en
http://groups.google.com/group/codeigniter-spanish?hl=es.

--
Omar Yepez
http://www.yepsua.com The YepSua team
http://jquery4php.sourceforge.net/ The jQuery4PHP project
Sigueme: http://twitter.com/oyepez003

[Julian Magnone]

Hola:

En realidad yo recomendé Colorbox porque es la que he venido utilizando... al menos resuelve lo que he necesitado, aunque asumo que debo haber otras alternativas interesantes. Colorbox necesita jQuery. Asegurate de meter además el CSS apropiado...

Te recomiendo ver aquí los ejemplos. Fijate el código fuente de cada ejemplo.

http://colorpowered.com/colorbox/core/example1/index.html

Un saludo!

Julián

2011/1/24 OmaR yepez <oyep...@gmail.com>

[PolloLetal]

Estoy mirando, pero hasta el momento no lo entiendo.

Gracias por tu respuesta Julian.

Saludos

Pollo

[Damian Fernandez]

Te voy a mostrar un ejemplo espero te sirva

yo lo utilizo cuando doy de alta un paciente se debe seleccionar financiador para eso
utilizo un buscador hecho en jquery

basicamente el plug un es un iframe con lo cual le paso la direccion de mi controlador (url)
y la misma se muestra en el , cual se hace click en el id seleccionado se cierra la ventana modal y se setea el numero de
financiador en al ficha del paciente.

Como dije antes espero te sirva este ejemplo si no es asi , tengo otros ejemplos.


Antes que nada el plug in lo baje de aca
http://tdryan.blogspot.com/2010/09/jquery-ui-frame-dialog-loading-pane.html

Demo (podes ver como funciona aca)
http://tdanryan.com/demo/framedialog/framedialogswing00.html
   

Te adjunto ls archivos para que puedas ver todo mas claro

/*
    Vamos con un poco de codigo
*/




-- Ficha del paciente --
Formulario Padre (desde el cual se llama a la ventana modal)
esto es la vista Persona_add.php (Dibujo1)

// nuevo va ok
$('#dialog_link').click(function(){
    var $dialogo =
       
       jQuery.FrameDialog.create({
     
          url: '<?= base_url();?>financiador/search/',
          loadingClass: 'loading-image',
          title: 'Buscador',
          width: 1100,
          height: 700,
          autoOpen: false,
          draggable: true,
          resizable: true,
          closeOnEscape: true,
          buttons: {}       
         
       });
      
       $dialogo.dialog('open');
       return false;
});

           


-- Buscador Financiador
es la ventana modal
Esto esta dendro del codigo que genera la vista del financiador
cmo veraz hay un vaja script asociado al class='id_td'


$elemento = 'obra_social'; // es el nombre del input en la html para setear con el numero de financiador

foreach ($result as $row){
           
    $tabla .= "<tbody>".
        "<tr>".
            "<td> <a href=# class='id_td' onclick= \"javascript: window.parent.document.forms[0].elements['$elemento'].value = '$row->id_financiador'\" '\"> $row->id_financiador </a> </td>".
            "<td>$row->descripcion</td>".
            "<td>$row->sigla</td>".
        "</tr>";
}


// vajascript html pantalla de busqueda financiador
finandiador_search.php

// al hacer click  ciarra la ventana
$('.id_td').click(function(){                                
    jQuery.FrameDialog.closeDialog();
    return false;
});


Saludos Damian.

Pollo

[PolloLetal]

Damian !
Me diste una ayuda impresionante !
Voy a ver lo que me enviaste y lo trato de implementar.

Un abrazo !! y gracias por compartir

Pollo

PD:se ve muy buena tu aplicación

[Damian Fernandez]

Perfecto ojala te sirva.
Cualquier duda no dudes en colsultarme.
Un Abrazo Damian.

--

[OmaR yepez]

Esta muy bueno ese plugin... esperamos implementarlo en jQuery4PHP

Saludos.

[Damian Fernandez]

Si la verdad debo decir de todas las cosas que he probado fue la implementacion mas facil y trasnparente para una ventana de tipo modal sin complicarse con nada raro ni usar ajax.

Damian.

[OmaR yepez]

Ya fue enviado el tutorial de integrar jquery4php y codeigniter a tu correo.

Saludos.

[Alejus]

Que buen feedback tiene la lista.

Estaría bueno ver al menos rápidamente como utilizar el que comentó Julian ( http://colorpowered.com/colorbox/core/example1/index.html ) ya que me parece bastante práctico y útil para otros casos.

Saludos a todos los CI Listeros.

Alejo

[Alejus]

Estuve viendo http://colorpowered.com/colorbox/ y aparentemente no tiene mucha complejidad, pero sí potencia.
En principio creo se deben cargar las librerias js en los cabezales o en las vistas desde donde llamarlo, luego desde ellas mismas se deberia hacer los llamados a las clases definidas, basta ver los ejemplos <a class='example6' , example5, etc..

Nada complejo, rápido y sencillo.

Lo que aun no me detuve a ver es como pasar los parámetros que se podrían necesitar en las diferentes páginas.

Es una excelente librería para hacerlo rápidamente y sin complicaciones.

También ví muy rápidamente, lo que comentaban mas arriba: jqmodal, facebox y thickbox creo que todas son herederas de JQuery y tienen mucha potencia, son las que destacan por su liviandad y por su facilidad de implementación.

Saludos a todos y que tengan muy buen año.

Alejo