Asegúrese de que el cursor está en una ubicación de la página en la que desee insertar el widget.
Última actualización el
30 abr 2026
Aprenda a añadir funcionalidad similar a las de las aplicaciones a sus proyectos web de Dreamweaver utilizando la interfaz de usuario y widgets móviles de jQuery. Introduzca acordeones, pestañas, reguladores y cuadros de texto de completado automático sin necesidad de escribir código.
Los widgets son pequeñas aplicaciones Web escritas en lenguajes como DHTML y JavaScript que pueden insertarse y ejecutarse dentro de una página web. Entre otras cosas, los widgets Web ayudan a ofrecer un modo de reproducir experiencias de escritorio en una página web.
Los widgets de IU de jQuery, como acordeón, fichas, selector de fecha, regulador y completar automáticamente, llevan la experiencia de escritorio a la Web.
Por ejemplo, el widget de Fichas puede usarse para imitar la función de ficha de cuadros de diálogo de las aplicaciones de escritorio.
Dreamweaver también incluye un conjunto de widgets móviles de jQuery que puede utilizar para crear elementos de formulario y otras funciones que se usan habitualmente en aplicaciones web móviles. Por ejemplo, puede usar el widget de jQuery Mobile para agregar elementos de formulario compatibles con dispositivos móviles, como áreas de texto y casillas de verificación.
Inserción de un widget jQuery
Cuando se inserta un widget jQuery, se añade automáticamente al código lo siguiente:
- Referencias a todos los archivos dependientes
- Etiqueta script con la API jQuery para el widget. Los widgets adicionales se agregan a la misma etiqueta de script.
Para obtener más información sobre los widgets de jQuery, consulte http://jqueryui.com/demos/
Nota
Para los efectos jQuery, no se añade referencia externa a jquery-1.8.24.min.js porque este archivo se incluye automáticamente cuando se añade un efecto.
Seleccione Insertar > IU de jQuery y elija el widget que desea insertar.
Si utiliza el panel Insertar, los widgets están presentes en la sección IU de jQuery del panel Insertar.
Cuando seleccione un widget jQuery, se mostrarán sus propiedades en el panel Propiedades.
Puede obtener una vista previa de los widgets jQuery en la Vista en vivo o en un navegador que admita widgets jQuery.
Modificar widgets de jQuery
Seleccione el widget que desea modificar.
Modifique las propiedades en el panel Propiedades.
Por ejemplo, para añadir una ficha adicional al widget Fichas, seleccione el widget y haga clic en "+" en el panel Propiedades.
Insertar widgets de jQuery Mobile
Antes de poder usar cualquiera de los widgets de jQuery Mobile, primero debe definir una página de jQuery Mobile seleccionando Insertar > jQuery Mobile > Página.
Se abre el cuadro de diálogo Archivos de jQuery Mobile.
Cambie la configuración predeterminada en el cuadro de diálogo de archivos de jQuery Mobile o déjela establecida en las rutas predeterminadas, y haga clic en Aceptar.
En el cuadro de diálogo Página que se abre, escriba un nombre en el campo ID y seleccione o anule la selección de las casillas de verificación junto a Cabecera y Pie de página según si desea secciones de cabecera y pie de página en su página móvil.
En la página que se abre en Dreamweaver, reemplace el texto Cabecera, Contenido y Pie de página con el texto, imágenes y otros elementos que desee en su página móvil.
Nota
Mantenga el texto breve y las imágenes pequeñas para mostrar en pantallas móviles pequeñas.
Agregue otros widgets de jQuery Mobile según sea necesario.
Previsualice la página en un dispositivo.
Para obtener más información, consulte Previsualizar páginas web de Dreamweaver en múltiples dispositivos.
Guarde la página de jQuery Mobile y todos los archivos relacionados.
Los temas de jQuery Mobile no se aplican con versiones más recientes de jQuery
Problema
Los temas de jQuery Mobile, incluidas las muestras y los paneles, no se aplican al usar versiones más recientes de jQuery, como jQuery 3.7.1. Como resultado, los temas de jQuery pueden no mostrarse correctamente o comportarse como se espera.
Causa
jQuery Mobile ha quedado obsoleto y ya no se mantiene activamente. No es compatible con las versiones de jQuery 3.x, lo que genera problemas de compatibilidad con las versiones más recientes.
Resolución/solución
Para continuar usando las funciones de jQuery Mobile (temáticas, muestras y paneles), utilice una versión anterior compatible de jQuery.
Versión recomendada: jQuery 1.11.1 (u otras versiones 1.x compatibles)
Ejemplo
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Añadir una versión de jQuery compatible. Por ejemplo, 1.11.1.
Asegúrese de que la biblioteca jQuery mobile se cargue después del Script de jQuery.
Recargar la Página y verificar que las temáticas, Muestras y panel se procesen correctamente.
Nota
Dado que jQuery Mobile está obsoleto y ya no se actualiza, continúe usando una versión heredada de jQuery compatible para proyectos de jQuery Mobile existentes.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
