RSS

[Ajax] mcDropdown: Mejorando las listas desplegables con Jquery

Lun, Jun 30, 2008

Ajax, Ajaxman, Javascript, Jquery, Programacion

Después de varios días sin postear por tener mucho trabajo, vuelvo a escribir, y saben postear y trabajar es complicado, creo que debería dejar de trabajar y dedicarme ha escribir post's :-) .

Vía Hotajax(un blog bastante interesante sobre Ajax), me acabo de enterar de un importante plugin para que podamos mejorar bastante nuestras listas desplegables.

Esta funcionalidad nos permite generar submenus desplegables desde un combobox, osea elegir y desde ahí volver a elegir otra opción, además de que todo esto lo guarda en un "historial" para saber donde andamos, les pongo una imagen para que vean a lo que me refiero.

mcdropdown_preview

Para hacer uso de este plugin vamos a necesitar descargarnos  mcdropdown, el cual ya trae todos los script necesarios para que funcione.

Codigo despues del salto

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <title>Giva Labs - mcDropdown jQuery Plug-in | Giva</title>
  7. <!-- Llamamos a los scripts  que vamos a ocupar //-->
  8.     <script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
  9.     <script type="text/javascript" src="./lib/jquery.mcdropdown.min.js"></script>
  10.     <script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>
  11. <!--Tambien llamamos a el css que necesitaremos //-->
  12.     <link type="text/css" href="./css/jquery.mcdropdown.min.css" rel="stylesheet" media="all" />
  13.  
  14.     <script type="text/javascript">
  15.     <!--//
  16.     // on DOM ready
  17.        //este es el codigo que funcionara con jquery y mcdropdown
  18.     $(document).ready(function (){
  19.         $("#current_rev").html("v"+$.mcDropdown.version);
  20.         $("#category").mcDropdown("#categorymenu");
  21.     });
  22.     //-->
  23.     </script>
  24. </head>
  25.  
  27.  
  28.            
  29.             <h3 id="example">Example</h3>
  30.                       <!--// El codigo de ejemplo, es un iput y una lista //-->
  31.             <p>
  32.  
  33.                 Please select a category:<br />
  34.                 <input type="text" name="category" id="category" value="" />
  35.             </p>       
  36.            
  37.  
  38.             <ul id="categorymenu" class="mcdropdown_menu">
  39.                 <li rel="1">
  40.                     Arts &amp; Humanities
  41.                     <ul>
  42.                         <li rel="2">
  43.                             Photography
  44.                             <ul>
  45.                                 <li rel="3">
  46.                                     3D                </li>
  47.  
  48.                                 <li rel="4">
  49.                                     Digital        </li>
  50.                             </ul>
  51.                         </li>
  52.                         <li rel="5">
  53.                             History      </li>
  54.                         <li rel="6">
  55.                             Literature            </li>
  56.  
  57.                     </ul>
  58.                 </li>
  59.                 <li rel="7">
  60.                     Business &amp; Economy        </li>
  61.                 <li rel="8">
  62.                     Computers &amp; Internet                </li>
  63.  
  64.                 <li rel="9">
  65.                     Education            </li>
  66.                 <li rel="11">
  67.                     Entertainment
  68.                     <ul>
  69.                         <li rel="12">
  70.                             Movies            </li>
  71.                         <li rel="13">
  72.  
  73.                             TV Shows                        </li>
  74.                         <li rel="14">
  75.                             Music                  </li>
  76.                         <li rel="15">
  77.                             Humor                  </li>
  78.                     </ul>
  79.                 </li>
  80.  
  81.                 <li rel="10">
  82.                     Health        </li>
  83.             </ul>
  84.             <!--//Fin del codigo de ejemplo //-->
  85.  
  86. </body>
  87.  
  88. </html>

Vía | http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
Y ejemplo vía | Example mcDropdown

, , , , ,

This post was written by:

Ajaxman - who has written 571 posts on Ajaxman.


Contact the author

Leave a Reply