Trabajando con JQuery sin escribir nada con IxEdit

Muchas veces me puse a pensar, si hay un montón de programas que nos ayudan a no escribir código porque nunca vi algo parecido con Jquery u otro como el de arrastrar y poner botones o imágenes que tan bien suelen hacer en otros programas, bueno la verdad que busque en la WEB y no encontré mucho o no busque bien si es que existe alguno por ahí, pero encontré algo que es muy fácil de usar a mi gusto, que no necesita de tanto que se llama IxEdit, esta maravillosa herramienta nos permite poner una muy buena funcionalidad a nuestra página, pero vamos a la cancha y dejemos de hablar tanto.

1. Primero entramos a la pagina de IxEdit y descargamos los archivos.

image

2. Una vez descargado vamos a crear una página o utilizan alguna que ya tengan creada, por ejemplo yo utilizo una página que he creado que ya tiene cargado un titulo, un párrafo, un botón, un texbox, y un div.

image

3. En la archivo comprimido descargado encontraran según el que descarguen (ixedit-1.0pb6.zip o ixedit-1.0pb6.packed.zip) uno con un único archivo ixedit.js y en el otro encontraran un ejemplo completo. En este caso yo elegí el archivo comprimido que tiene el ejemplo completo de donde extraigo las carpetas ixedit y jquery que ya traen los archivos necesarios.

image

4. Donde los deposito en mi página.

image

5. En la parte de código agregamos las siguientes líneas en el Head y ejecutamos.

<script type=”text/javascript” src=”jquery/jquery-plus-jquery-ui.js”></script>
<script type=”text/javascript” src=”ixedit/ixedit.packed.js”></script>
<link type=”text/css” href=”ixedit/ixedit.css” rel=”stylesheet” />

6. Una vez que abrimos nuestra página WEB según nuestro explorador nos va a pedir que utilicemos el plugin Gears de Google, en mi caso tengo IE9 y me salió un cartel donde me dice de donde descargar el plugin y una vez hecho esto solo tuve que habilitarlo.

image

Después una vez instalado el plugin si ejecutamos nuevamente nuestra WEB verán que nos pide que le demos permiso a este js de utilizar el plugin Gears, le damos permiso y listo.

image

7. En está parte verán una herramienta movible que se pone delante de nuestra página donde en formato de diseño podemos seleccionar nuestras etiquetas html y generar o elegir que efectos quieren hacer.

image

8. En esta parte verán un botón en la herramienta de IxEdit que dice New, donde agregamos una nueva acción y las que quieran, yo he agregado algunos como de ejemplo, que mas abajo tienen para descargar.

image

9. Después de agregar los efectos presionan donde dice deploy.

image

10. Esto muestra el código generado donde lo copian y pegan entre head.

image

11. Una vez pegado el código eliminan las dos líneas que hacen vinculo con el js y el css de IxEdit.

image

Y esto es todo lo que hay que hacer cuando no sabemos mucho de JQuery, habría que ver un poco mas en detalle esta herramienta ya que se le pueden sacar muchas más funcionalidades.

Archivo para descargar aquí del ejemplo de arriba.

Aquí abajo les dejo algunos videos que muestran mas ejemplos.

 

IxEdit en Joomla

Espero les guste mi aporte que a mi me sirvió bastante a la hora de empezar con JQuery.

Anuncios

6 Comentarios Agrega el tuyo

  1. Mary dice:

    Es posible generar un formulario (MVC – C#) cuyos campos sean cargados desde una base de datos sql (algo así como una base de “plantillas” de formularios) y aparezcan textboxes para completar al lado de cada campo. Sería como un formulario generado dinámicamente, en función de la plantilla elegida.

    Muchas gracias!!!

    1. La verdad que no hice nada parecido, pero se me ocurre tener tipo plantillas y de ahí guardarlas, osea guardar el html que te genera, podes interactuar con el html despues por medio de JavaScript, total toda la funcionalidad que le pongas que haga referencia a los métodos va a seguir estando.
      Fíjate este post de como se trabaja con Template Razor http://geeks.ms/blogs/etomas/archive/2011/01/25/asp-net-mvc3-razor-templates.aspx
      Espero haberte ayudado, un abrazo Mary

      1. Mary dice:

        Muchas gracias por tu ayuda, Moisés!!

        Abrazos.

      2. Gracias a vos por pasar por mi blog.

  2. Mario dice:

    Muy bueno el post compadre! y lo felicito por la web! voy a empezar a verlo seguido asi que siga asi nomás.
    Bajando y probando el finde con fernet de por medio. AbrazooO!

    1. Cha gracias compadre, ya hacia bastante que queria hacer algo así, sucede que voy aprendiendo y cada vez que aprendo algo nuevo ya me olvido lo que aprendí anteriormente jaja, así que viene bien postear lo que uno aprende por ahi también le viene bien a otros.
      Che y gracias por el comentario, saludo, nos vemos compadre.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s