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

Posted 2023-02-21

方法/步骤
简单的说明一下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效果就实现了。 这样我们一个简单的页面效果就实现了。 参考技术A 用JQuery Mobile开发移动网站的方法：
1、添加框架和样式，代码如下：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
2、创建html页面。在这个html页面中，特殊标记的div就是这个应用程序的“页面”。在它的基础表单中，这样的“应用程序页面”如下所示：
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
3、创建菜单，需要添加一个ul列表。如下所示：
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li>
<li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
ul标签的参数：
◆data-role="listview"— 表示这是一个你想要应用样式的列表。
◆data-inset="true" — 非全屏显示一个列表，如果你的目的刚好相反，可以把它设置成“false”。
◆data-theme="a"- 使用哪个配色方案。
4、完整主页如下：

<div data-role="page" id="main_page" data-theme="b">
<div data-role="header" >
<h1 id="twi_acc">Home page</h1>
<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
</div>
<div data-role="content" >
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div data-role="footer">
</div>
</div> 参考技术B 方法/步骤

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

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

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

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效果就实现了。 这样我们一个简单的页面效果就实现了。