Jquery mobile: struttura

Un primo semplicissimo esempio di formattazione per device mobile usufruendo dei preset di Jquery mobile, libreria formidabile che se ben utilizzata permette lo sviluppo di Apps complesse.

Come si vede dal listato di esempio utilizziamo una struttura con header e footer fruedo dei CSS di Jquery.

Partendo da questa base possiamo integrare regole di CSS personalizzate per raggiungere facilmente effetti e presentazioni idonee alle nostre scelte grafiche.

La documentazione completa su Jquery mobile la trovate qui.

‹!DOCTYPE html›

‹html›

‹head›

‹title›Layout mobile‹/title›

‹meta name="viewport" content="width=device-width, initial-scale=1"›

‹link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /›

‹script src="https://code.jquery.com/jquery-1.9.1.min.js"›‹/script›

‹script src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"›‹/script›

‹/head›

‹body›

‹div data-role="page"›

‹div data-role="header"›

‹h1›Benvenuto‹/h1›

‹/div›

‹div data-role="content"›

‹p›Testo introduttivo qui‹/p›

‹/div›

‹div data-role="footer"› ‹h3›‹i›Copyright dominio.tld‹/i›‹/h3› ‹/div›

‹/div›

‹/body›

‹/html›