在Windows Phone中使用JQueryMobile

Jump to: navigation, search

文章信息

文章

翻译:

翻译自: JQueryMobile for Windows Phone

由 WS - OtomiiLu

最后由 hamishwillee 在 30 Nov 2012 编辑

这篇文章讲解怎样用JQueryMobile开发具有Metro用户体验的应用程序。针对那些想要建立移动应用程序的网页开发者。

说明

这篇文件针对开发移动网站和移动网页应用程序做一个简短的介绍，尤其带有一种朴素的感觉和外观。由于网页开发者精通HTML，JS和CSS技术，这个文件对他们来说很容易理解。按照这条路线，网页开发者创造了许多给人一种朴素的感觉和经历本地应用程序，为了达到同样的目的，我们使用JqueryMobile技术.

什么是JQueryMobile

对于网页开发者来说，JQueryMobile是一种建立在IQuery UI基础上开放的移动UI框架。实际上，人们可以声称这就是JQuery UI的移动版本。所以你从下载得到的许多图像、css和JS文件，这在一起使UI组件看起来更像按钮、复选框、窗体元素、导航栏。JQueryMobile是高度自定义的，你可以有选择性的为web应用程序导入必要的控件，根据你的喜好为他们选择皮肤，动画或者过渡效果。一般下载的IQueryMobile组件类似于iOS的本地组件。除此之外，JQueryMobile提供了在低性能浏览器上的优秀的性能。由于它基于浏览器，写很少，做得更多是原理上的应用，你可以看到在你的手机、平板电脑和桌面任何设备上运行，能够呈现HTML5编写时的最新版本是版本1.1。　

JqueryMobile Theme for WP, 下载

针对Windows手机，Metro是用户熟悉的用户界面。由于默认情况下JQueryMobile不提供此外观和体验。我们应该下载可用的CSS表。为了激发网页开发人员使用微软的移动平台，这个项目得到了微软的支持。这个主题仍然在发展中，一些本地的组件如透视表或全景图，呈现在本地的Silverlight工具包中，当写这篇文章时它已经不存在了。在这你是否渴望看到这个美丽的项目，这就是这个项目的一些图片。 1 2

安装程序和基本要素

我会鼓励你从先前部分的链接中下载这个主题。此下载为初学者附带了两个HTML文件的样本。这样做的时候，我们已经包括了必要的JS,CSS和图片，同时我们基本的框架已经准备就绪。在这个示例中，我们展示怎样为卖智能手机的电子商店创建一个简单的命令页面。任何网页都是基于div建立，同样的div在我们的案例中也形成构建模块。

页面

页面将是我们HTML页面正文标记内的第一要素，每页都有３款标题、内容和页脚。但是如何提及Webkit引擎，这将是一个页面吗？使用数据－角色有助于这样做。标头是我们Metro样式网页的头部。在这儿你可以显示页标题和应用程序名称（与本地Silverlight工具包相比）头部内部的任何h1标签将成为页标题。

<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
    <span class="ui-app-title">Online Store</span>
    <h1>Nokia Lumia range</h1>
</div><!-- /header -->
</div><!-- /page-->

简单的UI组件

IQueryMobile 提供的要素如按钮、进度栏、滑块、textfields、下拉菜单。其中的大部分和桌面的要素具有很大的相似性。就像网页、按钮。

TextFields

TextFields 没有改变。你可以有密码类型的字段等。到目前为止，数字类型的输入字段不被支持。在iOS中弹出数字类型的虚拟键盘，但是在WP中没有观察到这种现象。这是整体的UI（内部BODY标签）

<body>
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
    <span class="ui-app-title">Online Store</span>
    <h1>Nokia Lumia range</h1>
</div><!-- /header -->
 
<div data-role="content" data-theme="a">
<div class="content-primary">
 
    <label for="phoneSelect" class="select">Choose your Lumia</label>
    <select name="phoneSelect" id="phoneSelect" data-native-menu="false">
        <option>Click to choose</option>
        <option value="900">Lumia 900</option>
        <option value="800">Lumia 800</option>
        <option value="710">Lumia 710</option>
        <option value="610">Lumia 610</option>
    </select>
	</br>
	</div>
	<fieldset data-role="controlgroup">
		<legend>Accesories</legend>
		<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked />
		<label for="checkbox-1a">Charger</label>
 
		<input type="checkbox" name="checkbox-2a" id="checkbox-2a" checked />
		<label for="checkbox-2a">Headset with MIC</label>
 
		<input type="checkbox" name="checkbox-2a" id="checkbox-3a"  />
		<label for="checkbox-3a">Extra Batteries</label>
	</fieldset>
 
	<div id='cost'></div>
 
	</br>
 
	<label for="name">Name</label>
    <input type="text" name="name" id="name" value="" />
 
	<label for="name">Address</label>
    <input type="text" name="addr" id="addr" value="" />
 
	<label for="name">Postal Code or PIN</label>
    <input type="number" name="pin" id="pin" value="" />
 
	</br>
 
	<a href="#" data-role="button" data-inline="true" id="purchase">Purchase</a>
    <div data-role='progress-bar' value='30' min='0' max='100' indeterminate='true' id="progressBar1" style="display:none"></div>
</div><!--/content-primary -->
 
</div><!-- /content -->
 
</div><!-- /page -->
</body>

简单的交互

自从JQueryMobile建立JQuery UI以来，同样的编程方法已经不复存在，你可以使用选择器使用$，或者附加对任何更改或者用户操作附加事件监听器。在下面的编码中，我们改变了所选产品的价格。当购买按钮被按下时，我们将显示进度栏。

<script type="text/javascript">
        $(document).ready(function() {
			$('#purchase').on('click', function () {
				$('#progressBar1').show();
			});
			$('#phoneSelect').on('change', function () {
 
					$('#cost').html("<h2>The total cost is " + $('#phoneSelect').val() + '$</h2>' );				
 
			});
		});
    </script>

全部代码

给你一个完整的图片，这就是页面的全部代码。

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>JQM for WP - Demo</title>
    <link rel="stylesheet" href="css/metro/jquery.mobile.metro.theme.css"/>
    <link href="css/progress-bar.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
 
 
    </style>
 
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.js" type="text/javascript"></script>
    <script src="css/metro/jquery.mobile.metro.theme.init.js" type="text/javascript"></script>
    <script src="js/jquery.globalstylesheet.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>
    <script src="js/progress-bar.js" type="text/javascript"></script>
 
 
    <script type="text/javascript">
        $(document).ready(function() {
			$('#purchase').on('click', function () {
				$('#progressBar1').show();
			});
			$('#phoneSelect').on('change', function () {
 
					$('#cost').html("<h2>The total cost is " + $('#phoneSelect').val() + '$</h2>' );				
 
			});
		});
    </script>
 
</head>
<body>
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
    <span class="ui-app-title">Online Store</span>
    <h1>Nokia Lumia range</h1>
</div><!-- /header -->
 
<div data-role="content" data-theme="a">
<div class="content-primary">
 
    <label for="phoneSelect" class="select">Choose your Lumia</label>
    <select name="phoneSelect" id="phoneSelect" data-native-menu="false">
        <option>Click to choose</option>
        <option value="900">Lumia 900</option>
        <option value="800">Lumia 800</option>
        <option value="710">Lumia 710</option>
        <option value="610">Lumia 610</option>
    </select>
	</br>
	</div>
	<fieldset data-role="controlgroup">
		<legend>Accesories</legend>
		<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked />
		<label for="checkbox-1a">Charger</label>
 
		<input type="checkbox" name="checkbox-2a" id="checkbox-2a" checked />
		<label for="checkbox-2a">Headset with MIC</label>
 
		<input type="checkbox" name="checkbox-2a" id="checkbox-3a"  />
		<label for="checkbox-3a">Extra Batteries</label>
	</fieldset>
 
	<div id='cost'></div>
 
	</br>
 
	<label for="name">Name</label>
    <input type="text" name="name" id="name" value="" />
 
	<label for="name">Address</label>
    <input type="text" name="addr" id="addr" value="" />
 
	<label for="name">Postal Code or PIN</label>
    <input type="number" name="pin" id="pin" value="" />
 
	</br>
 
	<a href="#" data-role="button" data-inline="true" id="purchase">Purchase</a>
    <div data-role='progress-bar' value='30' min='0' max='100' indeterminate='true' id="progressBar1" style="display:none"></div>
</div><!--/content-primary -->
 
</div><!-- /content -->
 
</div><!-- /page -->
</body>
</html>

预览

上面的HTML在这里主办，下面是截屏。

如果你运用像FireBug或者Chrome Inspector的工具深入研究网页，你将看到JQueryMobile修改HTML的内容，给予这样的外观和感受。

杂项

Date Picker & Theme Picker当且仅当运行在应用程序环境内或不是作为一个HTML网页时才可使用。为了达到这种理想状况，你可以把网页打包成应用程序。使用诸如Phonegap. Phonegap打包你的网页，并使其成为市场上的.xap文件。对于Metro从项目拥有者自身而言，这是对JQueryMobile主体的另一种演示。

结论

这是一个描述JQueryMobile的早期文档，针对网页开发者。从GitHub上获取更多的信息或更新。

注：: JQueryMobile图片借用于他们的官方网站，我声明没有此所有权

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

In other languages

Namespaces

Variants

Views

Actions

Contents