jquerymobile模版，jquery mobile app

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

jquery mobile怎么开发APP应用

jQuery Mobile是一个基于jquery的html 5移动网站框架，用它做出来的网站界面和App风格类似。

jQuery Mobile文档,内容不多，耐心看完只需要1个小时，大体分成8大功能点

page：最基准单元，包括header,footer,导航栏

dialog：对话框,在手机屏幕弹出dialog来交互，我觉得不是很友好

transitions：转场效果

form:表单

button：大button，小button(放在各种栏上的都是小button)，还提供了若干内置标准icon

listview：列表，这是jquery mobile的核心UI，提供了10几种类型的List，简单好用

event：各种滚动，滑动，拖拽事件

Theming：官方提供了5种皮肤，也有工具可以自定义，切换皮肤只需要改动一个class

jQuery Mobile全面支持ajax，但也可以当做普通html模板在后端渲染数据，我选择后面一种

相关问答

Q1: 怎么引用jquery mobile 框架

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

CSS文件jquery.mobile-1.0a1.min.css

jQuery library jquery-1.4.3.min.js

jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。这样jQuery Mobile就会知道哪些内容需要处理。

说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。

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

方法/步骤

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

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

在写移动端的网站的时候，一定要写一个meta的name为viewport的属性，因为该属性代表着网站页面的自适应。简单的写法为：meta name="viewport" content="width=device-width, initial-scale=1" 代表着网站为驱动设备的宽度。

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

稍微说明一下。

data-role="page" 是代表着一个页面可以看做该内容下是一个页面显示的内容

data-role=”header"代表着页面的页头，就是页面的最上面显示的内容这里需要注意，里面要加上子标签内容，要不然，就不会居中显示内容了。推荐使用h1.

data-role="footer"代表着页脚的内容。也是网站的一个说明信息。或者是一个底部导航菜单。还有一部分，就是data-role="content" 是代表着页面内容部分，主要的内容在这里面显示。

这3个部分构成了一个简单的页面。所以，现在可以体验到它的强大，不用写太多的代码一个简单的框架就好了，下面继续增加一个listveiw的列表视图。

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

关于jquerymobile模版和jquery mobile app的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。