落崖惊风yxy
落崖惊风yxy

使用jquery mobile不可忽视的细节

jQuery Mobile 是创建移动WEB应用程序的框架。在学习和使用该框架的过程中，有一些心得想要和大家分享一下。

一、框架

因为是移动端开发，所以不要忘了下面这个重要的meta标签哦：

使用jquery mobile要引入相应的css文件：

jquery mobile依赖jquery，因此要先引入jquey.js再引入jquery.mobile.js：

在引用jquey.js文件的时候一定要注意版本，要在1.8以上，但也不能过高，3.0以下就可以了。##jquey.js文件版本要在1.8以上，3.0以下就可以。
落落一开始就引用了cdnj上的最高版本3.3.1，结果页面不能正常显示，出现了下图这样的异常情况：


使用jquery mobile不可忽视的细节_第1张图片
jquery版本过高.png

当落落把jquery.js版本换成1.8.3的，页面就正常显示了。


使用jquery mobile不可忽视的细节_第2张图片
页面正常显示.png

二、基本页面结构

h5 data-*属性用于通过jquery mobile为移动设备创建交互外观。


    

        
标题

    

    

        
内容

    

    

        
页脚

jqm中，可以在单一HTML文件中创建多个页面。
需要通过唯一的id来分隔每个页面，并使用href属性连接彼此。
例：


        

            
标题1

        

        

            
内容1

            
index2

        

        

            
页脚1

        

    

    

        

            
标题2

        

        

            
内容2

            
index

        

        

            
页脚2

关于页面内容部分，落落看到有两种写法：
写法一


    
内容1

    
index2

写法二


    
内容2

    
index

落落把两种写法都用了，发现视觉效果是一致的，在chrome浏览器上，第一种写法解析后如下：


    
内容1

    
index2

第二种写法解析后如下：


    
内容2

    
index

两种写法解析后，第二种写法少了data-role属性，其它则一致，展示的效果也一致。
落落查看了一下w3c文档，文档上使用的是第一种写法。

对于页面的页眉和页脚，一般都是固定的，不会随着页面的滚动而滚动。想要达成这样的效果在jqm里也很简单，只需要添加属性data-position="fixed"。
例：


    
标题1

关于如何从一个页面过渡到另一个页面，jqm有一系列效果，这些过渡效果可以用于任意连接，通过data-transition属性达成。例如data-transition="slide"。默认效果是淡入淡出，若data-transition属性值设置为none则没有效果。如果你想应用某个效果，那你需要做的就仅仅是设置相应的data-transition属性值。

三、页面事件

$(document).on("事件名称","#链接的id属性值",function(){})

w3c jQuery Mobile 事件参考手册详细列出了所有的 jQuery Mobile 事件，网址如下：
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp
请注意，要通过使用 on()方法来绑定事件哦。
关于事件pageinit和pageshow，一定要注意它们的区别哦。
pageinit：页面初始化之后，只执行一次。
pageshow：页面显示的时候，每次进入页面都会执行。

四、组件

1.按钮
通过给a、button、input元素添加类class="ui-btn"或者增加data-role="button"可以创建按钮。
例如：

我是按钮

jqm对input元素进行了优化，比如下面的代码，没有添加class="ui-btn"或者增加data-role="button"，但是它呈现的仍是按钮的样式，而且多了阴影、圆角等效果：

关于按钮还有以下样式：
ui-corner-all圆角
ui-shadow 阴影
ui-btn-inline并排显示
ui-btn-a
ui-btn-b
这些样式都要在使用了类ui-btn的基础上使用。关于后两种样式，分别使用在两个按钮上，两个按钮会呈现不同的效果，第一个按钮默认背景色白色，第二个按钮默认背景色黑色。如：

按钮1
按钮2

效果如下：

使用jquery mobile不可忽视的细节_第3张图片
两个按钮呈现不同效果.png

对于按钮的样式，除了通过添加以上类名来完成，还可以通过 data-*的方式达成：
data-inline=true"两个或多个按钮并排显示
data-corners true | false规定按钮是否有圆角。
data-mini true | false规定是否是小型按钮
data-shadow true | false 规定按钮是否有阴影。
如需创建后退按钮，使用 data-rel="back"属性（会忽略锚的 href 值） 

返回

还可以对按钮进行组合：
data-role="controlgroup" 属性与data-type="horizontal|vertical"一同使用，以规定水平或垂直地组合按钮。

默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。


按钮组合.png

注：w3c建议使用 data-role="button"的 元素来创建页面之间的链接，而 或