JQueryMobile入门2

Bar工具栏

jqm提供了两种标准类型的工具栏:

Headers bar充当视图页面的标题作用,位于一个页面或者视图的顶部,属于该页面或者视图的第一个元素,通常包含一个标题和两个按钮(分别在标题两侧)
Footer bar 位于页面或者视图底部,属于其最后一个元素;内容和功能相比于Headers bar更广泛,除了包含文本和按钮外,还允许放置导航条、表单元素如选择菜单等

  • Headers bar
    添加后退按钮:

    back

    后退视图标题


  • 多按钮的footer工具栏
    在footer工具栏中添加的按钮会被自动设置成inline模式,并自适应文本宽度

    在footer元素上设置class样式属性为“ui-bar”,会使页面更美观。
  • 导航条工具栏组件:navbar
    一般导航工具栏位于header或者footer工具栏内
JQueryMobile入门2_第1张图片
Paste_Image.png

添加图标和位置

  
  • 固定页头或页尾
    页头


    这是内容页


JQueryMobile入门2_第2张图片
Paste_Image.png

内容区域格式布局

  • 网格布局
    两列网格布局


    a block content

    b block content








JQueryMobile入门2_第3张图片
Paste_Image.png

多列布局,目前支持最多5列:ui-grid-d

  • 折叠块功能



    sssssssssaaaaass


    sssssssssaaaaass




    sssssdddssssss


    sssssdddssssss




    ssssssssdfsfsssss


    ssssssssdfsfsssss





    aaaaaaaa


    aaaaaaaa


    aaaaaaaa


    aaaaaaaa



JQueryMobile入门2_第4张图片
Paste_Image.png

你可能感兴趣的:(JQueryMobile入门2)