jQuery Mobile基础 学习笔记

1.了解jQuery Mobile

1.认识与下载jQuery Mobile

认识jQuery Mobile
1.jQuery Mobile:
    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile给主流移动平台带来jQuery核心库.与jQuery核心库一样,您不需要安装任何东西;只需将*.js和*.css文件直接包含到您的web页面中即可.这样,jQuery Mobile的功能就好像被放到了您的指尖,供您随时使用.
2.jQuery Mobile事件:
    jQuery Mobile也提供了针对移动端浏览器的事件:
        触摸事件 - 当用户触摸屏幕时触发
        滑动事件 - 当用户上下滑动时触发
        定位事件 - 当设备水平或垂直翻转时触发
        页面事件 - 当设备显示,隐藏,创建,加载或未加载时触发
3.下载:http://jquerymobile.com/download/

2.创建移动设备

1.模拟器(Android/Iphone/aPad)
    快速:genymotion
    高级:eclipse+SDK
2.真机
    同一局域网访问,localhost改为本机ip
*.测试不用服务器不行,本人用的tomcat,结尾有整理下载

3.使用jQueryMobile

head:

body:

    

        
头部
    
    

        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
        
内容部分
    
    

        
底部
    

测试:Android Pad

2.jQuery Mobile Widgets

1.page

 

        

            
欢迎来到主页
        
        

            　
            跳转到第二个页面
            
            打开dialog
        
        

            
这是底部
        
    

    

        

            
欢迎来到主页
        
        

            返回到第一个页面
        
        

            
这是底部
        
    

测试:Android Pad

2.button

    

        
头部
    
   
    
    

        按钮1
        
        
        按钮3 
        
        按钮

        
        按钮A
        按钮B
        按钮C

        

            按钮1
            按钮1
            按钮1
        
        

            按钮A
            按钮B
            按钮C
        

        
        

            按钮A
            按钮B
            按钮C
        

        
        默认主题
        黑色主题
    
    

        
底部
    

测试:WP8(IE11)

3.checkboxradio

    

        
header
    
    

        复选框:
        apple

        

            m1
            m2
            
            m3
        

        

            m1
            m2
            m3
        

        单选框:
        A
        B

        

            一组的A
            一组的B
        

    
    

        
footer
    

测试:Android Pad

4.collapsible

    

        
head
    
    

        

            
heading

            
我展开了
        

        
        

            
heading
            
我展开了
        

        
        

            
heading
            
默认展开
        

        

            
系列
            

                
item 1
                
item 2
                
item 3
            
        

        

            
系列
            
            

                
item 1
                
item 2
                
item 3
            
        
    
    

        
foot
    

测试:Android Pad

5.grid

    
    

        
ui-bar-a是主题a
    

    
    

        
ui-bar-b是主题b
    

    
    

        
ui-bar-b是主题b
    

    
    

        
ui-bar-inherit是主题
    

    

    
    

        
第1列第2行
    

    
    

        
第2列第2行
    

    
    

        
第3列第2行
    

    
    

        
第4列第2行
    

    

        

            
            
            
        
        

            
            
            
        
    
    

        

             class="ui-grid-solo"  1列
        
    

测试:Android Mobile

6.listview

    
A
    
B
    
C
    
D


    
a
    
b
    
c
    
d


    
a
    
    
b
    
c
    
d





    
am
    
b
    
c
    
pm



    



    
am
    
b
    
c
    
pm




    
am
    
an
    
bm
    
pn

测试:Android Pad

7.navbar

    

        
        
one
        
two
        
three
        
four
    


    
头部

    

        

            
one
            
two
            
three
            
four
        
    


    
脚部

    

        

            
one
            
two
            
three
            
four
        
    



 
    

        

            
data-icon
            
加入系统图片
            
hehe
        
    

测试:Android Mobile

8.popup

弹出窗口


    
弹出的窗口内容



    


    close
   
    

测试:WP8.1(IE11)

9.selectmenu

    
        第一个
        第二个
        disabled不能选
        第四个
    

测试:Android Mobile

10.theme

    

        
data-theme="b"黑色主题
    
    

        按钮
    
    

        
data-theme="c"黑色边框主题
    

测试:Android Mobile

3.事件

		

			
header
		
		

			
点击隐藏tao
			
长按隐藏taphold
			
滑动隐藏swipe
			
左滑隐藏swipeleft
			
右滑隐藏swiperight
			.. 
 
 
 

			
 
 
 
 
 
 

			
 
 
 
 
 
 

			
 
 
 
 
 
 

			
 
 
 
 
 
 

			
 

		
		

			
footer
		
	

$(document).on("pageinit", function() {
		//           alert("页面加载完成");
		$("#p1").on("tap", function() {//点击事件
			$(this).hide(1000);
		});

		$("#p2").on("taphold", function() {//长按事件
			$(this).hide(1000);
		});

		$("#p3").on("swipe", function() {//滑动事件
			$(this).hide(1000);
		});

		$("#p4").on("swipeleft", function() {
			$(this).hide(1000);
		});

		$("#p5").on("swiperight", function() {
			$(this).hide(1000);
		});

		$(document).on("scrollstart", function() {//开始滚动
			//              alert("滑动开始");
			$("#p0").html("滑动中");
		});

		$(document).on("scrollstop", function() {//结束滚动
			//              alert("滑动结束");
			$("#p0").html("滑动结束");
		});

		/* $(document).on("orientationchange", function () {//错误
		                  alert("滑动结束");
		    $("#p0").html("屏幕翻转");
		});
		 */
		$(window).bind("orientationchange", function(event) {
			if (event.orientation) {
				if (event.orientation == 'portrait') {
					$("#p0").html("屏幕翻转-竖屏 ");
				} else if (event.orientation == 'landscape') {
					$("#p0").html("屏幕翻转-横屏  ");
				}
			}
		});
	});

测试:Android Mobile(QQ浏览器)

本页代码: http://download.csdn.net/detail/oyuemijindu/8449599