基于jquerymobile网站模板,jquerymobile菜鸟教程

http://www.itjxue.com  2023-01-07 00:02  来源:未知  点击次数: 

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

简单的说明一下JQueryMobile.

它是一个很好的跨平台的移动端网站开发框架。 是一个前台的框架。现在要使用这个框架组一个界面,这个界面很简单, 但是麻雀虽小五脏俱全,

然后模板实现, 知识讲解完毕。html要使用HTML5的标准来写, 因为JQueryMobile是基于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效果就实现了。 这样我们一个简单的页面效果就实现了。

我想 用jQuery Mobile 制作 wordpress 手机主题,在设置修改页面模板 (page.php)遇到问题~~

用Firebug看一下空白时,页面没有加载到内容、是不是异步脚本的顺序不当

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模板在后端渲染数据,我选择后面一种

(责任编辑:IT教学网)

更多

推荐新书快递文章