jquery mobile(JQM)
官网:http://jquerymobile.com/
jquery mobile需要依赖于jQuery 具体看官网下载下方会有提示需要什么版本以上的jQuery
如何编写一个基础的web app
Examples
我是标题
我是内容
我是底部
当需要多页面时,在body中编写为
页面过渡效果:
这时简单的页面切换淡入淡出就已经做成了
如果你想让切换时的效果不同时可以在a标签中编写
index 这时就是翻页效果
当然效果有什么多，比如: fade:默认值,渐变褪色的动画效果
slide:从右往左滑动的动画效果
slideup:向上滑动的动画效果
slidedown:向下滑动的动画效果
pop:以弹出的效果打开页面
flip:旧页飞出，新页飞入的动画效果
jquery mobile页面事件
页面初始页面
Page Initalization - 在页面创建前，当页面创建时，在页面初始化后
(pagebeforecreate, pagecreate, pageinit)
js编写:
$(document).on('pagebeforecreate',fn)
页面加载事件
Page Load/Unload - 当外部页面加载时，卸载时或遭遇失败时
(pagebeforeload, pageload)
页面过渡事件
Page Transition - 在页面过渡之前和之后
(pagebeforeshow, pageshow, pagebeforehide, pagehide)
js编写:
$(document).on('pagebeforeshow',id,fn) 在页面过渡时需要添加id
jquery mobile 创建按钮
通过给a、button或者input元素添加样式
(或者增加data-role="button"),可以创建按钮
按钮
data-role="button" 是优化过的哦
如果想自己设置按钮也是可以的，在class中添加
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-inline 按钮并排显示
ui-btn-a 按钮不同的样式(白色按钮)
ui-btn-b 按钮不同的样式(黑色按钮)
jquery mobile 创建导航栏
导航栏中的链接会自动转换为按钮
使用data-role="navbar"属性来定义导航栏
如果想让上下导航栏固定在上下
就在header和footer中添加data-position="fixed"属性就可以固定了
当按钮大于5个时 按钮会进行换行
如何添加导航栏图标
data-icon属性
jquery mobile 列表
如需创建列表，需向或元素添加data-role="listview"
如需使这些项目可点击，在每个列表项- 中规定链接
ul中输入data-inset="true" 列表不会贴边显示
如果想让ui中的内容浮动到右上角 需要在内容元素中添加class="ui-li-aside"
jquery mobile 表单
使用原生的HTML即可
如需自适应
宽屏幕为:480px以上
窄屏幕为:480px以下
编写代码为:class="ui-field-contain"
***要保证表单的ID为唯一的
jquery mobile 表格
reflow table mode 回流表格模式
编码样式
jquery mobile 事件
在jquery mobile 中可以使用任何标准的jQuery事件
jquery mobile 还提供若干为移动浏览定制的事件
触摸事件 - 当用户触摸屏幕时触发(敲击和滑动)
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载或卸载时触发
Touch事件在用户 触摸屏幕(页面)时 触发
tap事件在用户 敲击某个元素时 触发
taphold事件在用户 长按时 被触发
swipe事件在用户 在某个元素上水平滑动超过30px 时被触发
scrollstart事件在用户 开始滚动页面 时被触发
scrollstop事件在用户 停止滚动页面 时被触发......
事件中特别注意
在jQuery中:
$(document).ready(function(){
//此处是jQuery事件
})
在jquery mobile中:
$(document).on("pageinit","#page",function(){...})
建议用pageinit
jquery mobile Ajax
jquery mobile使用Ajax和在jQuery中一致
如果在请求时想显示转圈加载的样式
在点击按钮时Ajax获取前编写:$.mobile.loading("show");
获取后编写:$.mobile.loading("hide");
小赠品http://www.webxml.com.cn/