Jquery Mobile入门笔记

1、初始化移动浏览显示

2、引入jquery mobilecss文件和js文件 

3、HTML5 date=*属性用于通过jquery mobile为移动设备创建交互外观

示例:

标题

内容

页脚

在一个html文件中可以放多个date-page,但默认显示第一个data-page

可以通过href的形式进行跳转,示例:

页面跳转

4、设置页面过度效果data-transition

页面跳转

包括:slide/slideup/slidedown/pop/fade/flip/none

5、事件

(1)页面初始化事件:pagebeforecreate,pagecreate,pageinit

(2)页面加载事件:pagebeforeload,pageload

(3)页面过度事件:pagebeforeshow,pageshow,pagebeforehide,pagehide

示例:

$(document).on(“pagebeforecreate”,function(){

//do something

})

$(document.on(“pagebeforehide”,”#index”,function(){

//do something[index页面消失时]

})

6、jquery moblie按钮

示例:”ui-btn”>按钮

  //JQM直接添加了一些样式

让多个按钮并排显示(ui-btn-inline)

按钮”ui-btn ui-btn-inline”>按钮

此外还有不同样式:ui-btn-a;ui-btn-b;ui-corner-all;ui-shadow

7、导航栏制作示例:

data-icon可以设置导航图标,还可以自己制定

8、设置标题和当行蓝位置固定

设置data-position=”fixed”

9、列表

  • 列表1
  • 列表2
  • 列表3
  • listview指定列表样式;data-inset设置为true使列表留边距显示

        复杂的列表:(详情见api

  • G1

    北京-大连

    大连-北京

    9:00

    //设置为右上角显示

  • 10、表单:直接使用html的默认表单就可以

    表单自适应功能:ui-feild-content

    11、表格

    你可能感兴趣的:(javascript,前端开发常用技巧经验记录)