<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前台页面</title> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <link href="./css/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>标题</h1> <p><a href="#index2" data-transition="none">index</a></p> </div> <div role="main" class="ui-content"> <h1>内容</h1> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> <div data-role="page" id="index2"> <div data-role="header"> <h1>标题2</h1> <p><a href="#index">index</a></p> </div> <div role="main" class="ui-content"> <h1>内容3</h1> </div> <div data-role="footer"> <h1>页脚3</h1> </div> </div> <script src="./js/jquery.min.js"></script> <script src="./js/jquery.mobile-1.4.5.min.js"></script> <script> $(document).on("pagebeforehide","#index",function () { alert(4) }) $(document).on("pagehide","#index",function () { alert(4) }) $(document).on("pagebeforeshow","#index2",function () { alert(5) }) $(document).on("pageshow","#index2",function () { alert(5) }) // $(document).on("pagebeforecreate",function () { // alert(1) // }) // $(document).on("pagecreate",function () { // alert(2) // }) // $(document).on("pageinit",function () { // alert(3) // }) </script> </body> </html>
想要header和footer不随着页面滑动而动的话,就要在header后面加上data-position="fixed"
Ajax跨域资源共享
jqm Ajax
Ajax跨域
jq 事件使用
jqm 事件
jqm 事件 为移动浏览定制的事件
jqm 事件
jqm 表格 回流表格模式
jqm 表格
jqm 列表
按钮样式~
Page Load/Unload
jqm 页面过渡事件
jqm 页面加载事件
jqm 页面初始化事件
data-transition的属性值
jqm 过渡效果
标题,内容,页脚
基本的页面框架
jquery moblie 简介