JQ Mobile框架

了解了一下jq的移动端框架，因为年代久远，让我怀念曾经的时代，是何其的辉煌。

首先由于年代久远，jq的版本需要使用1.0.1版本，然后下载jquery.mobile - 1.4. 5.zip，里面会有很多文件，我们需要拿两个主要文件，还有图片就行，文件分别为：

1. jquery.mobile-1.4.5.min.css
2. jquery.mobile-1.4.5.min.js

一个css文件，一个js文件，然后引入顺序为，css，jq，jq.mobile

使用方法：

通过自定义的元素属性来配置，基本结构如下

<div data-role="page">
    <div data-role="header">
        <h1>标题</h1>
    </div>
    <div data-role="content">
        <p>内容</p>
    </div>
    <div data-role="footer">
        <h4>footer</h4>
    </div>
</div>

通过一个div元素包裹，这个div元素设置data-role="page"，然后就是三个基本架构，header,content,footer

如果页面宽度移动端显示变成的缩小的页面，那应该是meta没有设置好页面的大小，在head中添加这句话：

<meta name="viewport" content="width=device-width, initial-scale=1">

这句话在适配响应式的时候也是需要的，大部分的代码编辑器已经会自动添加好这句。

效果图：

该框架还有很多预设的样式，基本原理都是通过添加自定义的属性来控制，如：data-role="button"表示的就是一个按钮，然后他还有很多，这里就不一一举例了，毕竟这是一个过去式的东西了，了解一下就行，不过这种模式，在现在很多框架中都能看到一些相同的影子。

官网

官网

其他框架

1. jqMobi
2. Sencha Touch
3. Zepto
4. PhoneGap

这些框架我也没去看了，也不知道现在是死是活，有兴趣的可以自己百度搜一下看看。