木灵鱼儿

博客
正在进入:首页

更新于

JQ Mobile框架

发布于 / 分类: 锋利的JQuery / 仅有1条评论 / 阅读量: 160

了解了一下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

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

Info
Site Info

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了173篇文章

目录树
Archive
Article Archive
Weather
Weather

湿度
设置
配色方案

宽度

现在购买