jquery mobile学习

jQuery Mobile学习笔记
    jQuery Mobile 1.4.5对应jQuery1.11.1版本
    
    
    

    data-role="none"用于去除CSS样式

    form表单必须有method和action，并且每个表单元素如input必须对应一个label而且要有唯一id，id必须站点内不重复，placeholder可以作为默认提示语句。
    例子：
    

      

        全名：
               
        生日：
        
        电邮：
        
      
      
    

    使用ui-hidden-accessible可以隐藏label。
    例子：
    

        姓名：
        
    
    
    用带有 data-role="fieldcontain" 属性的 
 或 
 元素来包装 label 或表单元素可以使label 和表单元素在宽屏幕上显示正常。
    fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。
    当小于 480px 时，label 会被放置于表单元素之上。
    例子：
    

        

            First name:
            
            Last name:
            
        
    

    使用可以实现多行文本输入，文本框会自动扩大，以适应输入的文本行。
    例子：
    <form method="post" action="demoform.asp">
        <div data-role="fieldcontain">
            <label for="info">Additional Information:</label>
            <textarea name="addinfo" id="info">
        
    

    输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段。
    例子：
    

        

            Search:
            
        
    

    单选 添加type="radio"的input元素以及相应的label。在
元素中包装单选按钮。
    也可以增加一个
元素来定义
的标题。
    一般通过data-role="controlgroup"属性来组合这些按钮。
    例子：
    

        

            
Choose your gender:
            Male
            
            Female
             
        
    

    复选框
    例子：
    

        

            
Choose as many favorite colors as you'd like:
            Red
            
            Green
            
            Blue
             
        
    

    使用data-type="horizontal"属性可以实现单选框或复选框进行水平分组。
    例子：
    


    以使用域容器来包装 

    例子：
    

        

            
Choose your gender:
        
    

    默认选中某个选项的按钮，checked
    例子：
    
    
        
        
        
        
        
        

        

            

            
单选按钮和复选框
            

            

                

                

                
请选择您的性别：
                    Male
                    
                    Female
                    	
                

                

                
请选择您喜爱的颜色：
                    红色
                    
                    绿色
                    
                    蓝色
                    	
                
                
                
            
        

        
    

    下拉框选项使用和标签
    例子：
    

      

        选择天
        
         星期一
         星期二
         星期三
         星期四
         星期五
         星期六
         星期日
        
      
      
    

    下拉框列表中为了区分选项分类可以在中使用
    中必须包含label
    例子：
    
        
            Monday
            Tuesday
            Wednesday
        
        
            Saturday
            Sunday
        
    

    在所有移动设备上显示一致外观的选择菜单,可以使用jQuery 的自定义选择菜单，data-native-menu="false" 属性来组合这些按钮。
    例子：
    

    下拉框选取多个选项，在标签中加multiple属性
    例子：
    

    

    您可以选择多天：
    
        天
        星期一
        星期二
        星期三
        星期四
        星期五
        星期六
        星期日
    
    
    
    

    data-type="horizontal"可以水平地组合选择菜单
    例子：
    


    在中添加selected可以使预选择一个选项。
    例子：
    

      

        选择日期
        
          Monday
          Tuesday
          Wednesday
          Thursday
          Friday
          Saturday
          Sunday
        
      
      
    

    
可以实现折叠表单
    例子：
    

      

        
点击我 - 我可以折叠！
          全名：
          
          
喜爱的颜色：
        

          红色
          
          绿色
          
          蓝色
          
        
	
      
      
    

    可以用来创建滑块，input的标签中加data-highlight="true"可以实现滑块轨迹显示。
    input中属性，min指最小值，max指最大值，value指默认值，step指数字间隔。
    例子：
    

      

        Points:
        
      
      
    

    如需创建切换，请使用 data-role="slider" 的  元素，并添加两个  元素中包装单选按钮。
    只能有两个option，后面的option不会显示名称。加了selected的会默认显示。
    例子：
    

        

            Toggle Switch:
            
            On
            Off
            
        

jQuery Mobile提供了五种主题a,b,c,d,e.

. 默认的，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰)。也可以自己修改主题。 例子：

此处是页面标题

此处是内容。

按钮

此处是 链接！

此处是页脚文本

主题化的对话框，对话框主要是标签的data-rel="dialog"，主题是data-theme 例子： Go To The Themed Dialog Page

主题化的按钮图标，data-icon="plus"是设置图标类型，data-theme="e"是设置主题 Plus 主体化的导航栏，data-role="navbar"为申明为导航栏 例子：

Insert Footer Text Here

• Button 1
• Button 2
• Button 3
• Button 4

主题化的可折叠按钮和内容，data-role="collapsible"为申明Wie可折叠部分，data-theme="b"为按钮主题，data-content-theme="e"为内容主题。 例子：

点击我 - 我是可折叠的！

我是可折叠内容。

主题化的列表，data-role="listview"表示这是列表，如果li中有data-theme则使用li的，没有则使用ul的或者ol的。 例子：

• List Item
• List Item
• List Item
• List Item

tap 事件在用户敲击某个元素时触发。 例子： $("p").on("tap",function(){ $(this).hide(); }); taphold 事件在用户敲击某个元素并保持一秒时被触发 例子： $("p").on("taphold",function(){ $(this).hide(); }); swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发 例子： $("p").on("swipe",function(){ $("span").text("Swipe detected!"); }); swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发 例子： $("p").on("swipeleft",function(){ alert("You swiped left!"); }); swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发 例子： $("p").on("swiperight",function(){ alert("You swiped right!"); }); scrollstart 事件在用户开始滚动页面时被触发，注意iOS 设备会在滚动事件发生时冻结 DOM 操作， 这意味着当用户滚动时无法改变任何事物。不过 jQuery 团队正致力于解决该问题。 例子： $(document).on("scrollstart",function(){ alert("开始滚动！"); }); scrollstop 事件在用户停止滚动页面时被触发 例子： $(document).on("scrollstop",function(){ alert("结束滚动！"); }); 使用 orientationchange 事件，需将其添加到window对象，event.orientation会显示当前手机是垂直还是水平，垂直为portrait，水平为landscape。 例子： $(window).on("orientationchange",function(event){ alert("方向是：" + event.orientation); }); 由于 orientationchange 事件与 window 对象绑定，我们能够使用 window.orientation 属性来进行操作， 例如，设置不同样式以区分 portrait 和 landscape 视图，window.orientation 属性对 portrait 视图返回 0， 对 landscape 视图返回 90 或 -90。 例子： $(window).on("orientationchange",function(){ if(window.orientation == 0) // Portrait { $("p").css({"background-color":"yellow","font-size":"300%"}); } else // Landscape { $("p").css({"background-color":"pink","font-size":"200%"}); } }); taphold时间默认是按住不放750毫秒（ms）之后触发，还可以通过$.event.special.tap.tapholdThreshold 来改变触发的时间长短。注意想修改jQuery Mobile设置值必须将修改的script放在加载jQuery Mobile的js之前。 例子： $(document).on("mobileinit",function(){ $.event.special.tap.tapholdThreshold=3000; });