1. multi-view page <section data-role = "page" id = "firstview" data-title = "first view">
2. view switching animation <a href = "# secondview" data-rel = "dialog" data-transition = "pop"> pop slide slideup slidedown fade flip
3. dialog Box <a href = "# secondview" data-rel = "dialog" data-transition = "pop">
4. page topic <section data-role = "page" id = "firstview" data-title = "first view" data-theme = "a">
<! Doctype html>
<Html>
<Head>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1"/>
<Meta http-equiv = "Content-type" content = "text/html; charset = UTF-8">
<Title> PhoneGap </title>
<Link rel = "stylesheet" href = "jquery.mobile-1.3.1.css">
<Script type = "text/javascript" charset = "UTF-8" src = "jquery-1.9.0.min.js"> </script>
<Script type = "text/javascript" charset = "UTF-8" src = "jquery. mobile-1.3.1.js"> </script>
</Head>
<Body>
<Section data-role = "page" id = "firstview" data-title = "first view" data-theme = "a">
<Header data-role = "header" data-theme = "B"> <Article data-role = "content"> <a href = "# secondview" data-rel = "dialog" data-transition = "pop"> switch to the second View </> </article>
<Footer data-role = "footer" data-theme = "c"> </Section>
<Section data-role = "page" id = "secondview" data-title = "second view">
<Header data-role = "header"> second view <Article data-role = "content"> <a href = "# firstview" data-transition = "flip"> switch to the first View </a> </article>
<Footer data-role = "footer"> footer </footer>
</Section>
</Body>
</Html>