多语言展示
当前在线:953今日阅读:26今日分享:39

怎么使用JQuery Mobile开发移动网站

现在越来越多的人用网站来做手机app, 这样的好处是, 可以做一个网站,基本上可以做到多个平台android, ios, wp, 都可以使用。 这里使用JQueryMobile来当做前台的框架。 只是实现框架, 也就是前台的页面, 没有后台的代码。 这里使用html5的标准来书写该模板。 版本使用最新版的1.4.2, jquery版本使用1.10.2, 不用2.x的版本, 因为2.x的版本去除了ie6,7,8的兼容, 所以, 为了兼容性, 使用1.x的版本。
工具/原料
1

这里用的使用cdn的方式, 就是互联网有的连接方式使用JQueryMobile

2

JQueryMobile.com中, 下载最新的框架。 现在最新1.4.2

方法/步骤
1

简单的说明一下JQueryMobile. 它是一个很好的跨平台的移动端网站开发框架。 是一个前台的框架。现在要使用这个框架组一个界面,这个界面很简单, 但是麻雀虽小五脏俱全, 然后模板实现, 知识讲解完毕。html要使用HTML5的标准来写, 因为JQueryMobile是基于HTML5的。 书写html5的格式如图,

2

既然使用JQueryMobile就要有这个框架, 这里可以使用本地引用的方式, 和网上引用, 也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。 这里使用cdn的方式, 这样只要可以上网就可以使用该框架。

4

然后加入框架之后, 写一个简单的界面。 这里面JQueryMobile大量的使用了一个data-的属性, 这里使用最多的事data-role。 代表着他默认的样式规则。 就是提前定义好了很多的样式来供你使用。 常用的page. 代表着页面, listview, 代表着一个列表视图。下面是代码和效果图

5

稍微说明一下。 data-role='page' 是代表着一个页面可以看做该内容下是一个页面显示的内容data-role=”header'代表着 页面的页头, 就是页面的最上面显示的内容这里需要注意, 里面要加上子标签内容, 要不然, 就不会居中显示内容了。推荐使用h1.data-role='footer'代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分, 就是data-role='content' 是代表着页面内容部分, 主要的内容在这里面显示。 这3个部分构成了一个简单的页面。 所以, 现在可以体验到它的强大, 不用写太多的代码一个简单的框架就好了, 下面继续增加一个listveiw的列表视图。

6

完成列表视图的代码, 增加一个文章列举表的代码, 这里列表是使用data-role='listview' 来修饰样式。 然后这里只需要加上data-role='listview' 你发现想要的list效果就实现了。 这样我们一个简单的页面效果就实现了。

注意事项

如果有什么不明白的都可以留言询问。 现在所写的都是一些简单的东西, 就是记录一下曾经都是怎么来学习的这个。 帮到你是我的荣幸, 如果有任何的错误, 都请你帮我提出来。 谢谢。

推荐信息