Guía del usuario Cancelar

Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver

Buscar

Última actualización el 4 may. 2021

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 móvil de jQuery con el fin de añadir elementos de formulario fáciles de usar en 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 añaden a la misma etiqueta script.

Para obtener más información sobre widgets 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.

Asegúrese de que el cursor está en una ubicación de la página en la que desee insertar el widget.
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.

Modificación de widgets 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 móviles de jQuery

Antes de poder utilizar cualquiera de los widgets móviles de jQuery, debe definir en primer lugar una página de jQuery Mobile seleccionando Insertar > jQuery Mobile > Página.

Se abrirá el cuadro de diálogo de archivos de jQuery Mobile.

Cuadro de diálogo de 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 OK
En el cuadro de diálogo de la página que se abra, escriba un nombre en el campo ID, y seleccione o anule la selección de las casillas de verificación situadas junto al encabezado y pie de página en función de si desea que haya encabezados y pie de página en la página móvil.

Cuadro de diálogo de página
En la página que se abra en Dreamweaver, substituya el texto del encabezado, del contenido, y del pie por el texto, las imágenes y otros elementos que desee tener en su página móvil.

Nota:

Mantenga el texto de tamaño reducido y las imágenes pequeñas, para su visualización en pequeñas pantallas móviles.
Añada otros widgets de jQuery Mobile según sea necesario.
Previsualice la página en un dispositivo.

Para obtener más información, consulte Obtener una vista previa de páginas web de Dreamweaver en varios dispositivos.
Guarde la página móvil de jQuery Mobile y todos los archivos relacionados.