PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航

黄舟
黄舟 原创
2017-02-15 13:18:30 1185浏览

一、页眉

1、添加页眉和页脚

	
		

第 1 页

	
		

页面脚注

默认的页眉在屏幕的顶部边缘显示,而且在在屏幕滚动时,页眉会滑出屏幕之外,通过添加data-position属性可以创建一个固定的页眉

	
		

第 1 页

	
		

页面脚注

可以使用date-theme属性来调整页眉的主题,默认主题是黑色data-theme="a"

 



jQuery Mobile Web 应用程序




   

第 1 页

  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  •             
  • 第 2 页
  •             
  • 第 3 页
  • 第 4 页
  • 页面脚注

    第 2 页

    内容

    页面脚注

    第 3 页

    内容

    页面脚注

    第 4 页

    内容

    页面脚注


    在页面容器中添加data-fullscreen="true"后点击屏幕会出现页眉页脚,再次点击会消失。

    二、添加返回按钮

    	
        	返回
    		

    第 1 页

            


    左边是文本图标按钮,右边是纯图标按钮。

    三、添加分段工具栏

    	
        	返回
    		

    第 1 页

                                  菜单一             菜单二             菜单三         

    
    	.segment-control{text-align:center;margin:0.2em;}
    	.ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}
    	.ui-control-active{background:#BBB;}
    	.ui-control-inactive{background:#DDD;}
    



    四、标签导航栏

    	
    		
            	
                  
    • A
    •                 
    • B
    •                 
    • C
    •                 
    • D
    •                 
    • E
    •             
            



    以上就是小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!





    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。