更深入地了解 JQuery Mobile: 主题

分享于 

21分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

本系列的第一篇文章(。介绍 JQuery Mobile ) 主题looked主题的主题,以及在 JQuery Mobile ( jQM ) 中可用主题。 在这个关于jQM的3 篇文章中,我展示了如何使用主题滚子构建定制主题,以及查看允许移动Web应用程序更像 iPhone。Android或者 Windows Phone 应用程序的定制主题。

使用主题滚子生成自定义主题

构建jQM的自定义主题涉及创建 CSS。 手工创建CSS是一个漫长的过程,因此你可以使用主题滚轮来处理创建所需CSS文件和其他代码的细节。 开发人员或者设计人员只负责设置必要的值。

以下是创建和使用主题滚子的步骤:

  • 将你的浏览器指向主题滚子,如图 1所示。 ( 获取主题滚轮的URL在本文的参考资料中列出。)

图 1.jQM主题滚轮
  • 设置颜色。间距和其他属性的值后,单击页面顶部的下载按钮以显示显示的对话框,如图5 中的 对话框包含如何在页面中使用主题的说明。

图 2.下载主题对话框
  • 下载压缩文件后,将文件解压缩到它的各个部分。
  • 将项目导入到应用程序中。 你可以使用CSS或者类似的目录。
  • 通过添加样式表和必需页面到布局页面的header 中,开始使用应用程序中的代码,如下面的代码示例所示。
<head><metacharset="utf-8">..<metaname="viewport"content="width=device-width, initial-scale=1">..<title>jQuery Mobile: Theme Download</title>..<linkrel="stylesheet"href="css/themes/ugly.min.css"/>..<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-
 1.2.0.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.7.2.min.js"></script>..<scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head>

这个主题的结果显示在图 3。 我承认这不是最美丽的主题但我是开发人员而不是设计师。

图 3。Windows Phone 模拟器 中的自定义主题

Windows Phone/现代用户界面 JQuery Mobile 主题

主题是非常棒和酷的,但开发人员有一个未写入的规则: 用户希望应用程序与系统上所有其他应用程序相似。 实际上,to应用程序看起来不像设备上的它的他应用程序,它们具有过于普遍的外观。 那么开发者如何为他们的jQM应用程序创建一个更"本机"的外观? 对此有几个解决方案:

  • 创建自定义jQM主题。 主题滚轮使这个过程更加容易,但是仍然有很多工作要做。 ,主题是一个非常重要的工作,不应该不理解该选择支持的结果。
  • 使用预先生成的jQM主题。 尽可能地使用已知的现有代码,这是最好的。

幸好,微软已经创建了一个jQM主题,可以通过Nuget下载,然后在应用程序中非常快速和轻松地集成在应用程序中。 代码下载到项目后,需要在你的应用程序中设置以下代码:

<metacontent="text/html; charset=utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><title>jQM theme for Windows Phone</title><linkrel="stylesheet"href="css/metro/jquery.mobile.metro.theme.css"/><linkhref="css/progress-bar.css"rel="stylesheet"type="text/css"/><linkhref="css/toggle-button.css"rel="stylesheet"type="text/css"/><styletype="text/css">/* custom icons for toggle button*/. ui-icon-demo-help,
. ui-icon-demo-set {
 background-repeat: no-repeat;background-position: 50% 50% ;background-size: 30px 30px; }
. ui-toggle-button-a. ui-icon-demo-set,
. ui-toggle-button-b[checked='checked']. ui-icon-demo-set{
 /*background-image: url(Images/set.dark.png) ;*/background-image: url(data:image/png;base64,......);
 }
. ui-toggle-button-b. ui-icon-demo-set,
. ui-toggle-button-a[checked='checked']. ui-icon-demo-set{
 /*background-image: url(Images/set.light.png);*/background-image: url(data:image/png;base64,......);
 }</style><scriptsrc="js/jquery.js"type="text/javascript"></script><scriptsrc="js/jquery.mobile.js"type="text/javascript"></script><scriptsrc="css/metro/jquery.mobile.metro.theme.init.js"type="text/javascript"></script><scriptsrc="js/jquery.globalstylesheet.js"type="text/javascript"></script><scriptsrc="js/jquery.mobile.themeswitcher.js"type="text/javascript"></script><scriptsrc="js/progress-bar.js"type="text/javascript"></script><scriptsrc="js/toggle-button.js"type="text/javascript"></script><scripttype="text/javascript"> $.themesDir = 'css/';
 $(function() {
 $("#btn-dark").click(function(event) {
 $.addTheme("Dark", false);
 event.preventDefault();
 returnfalse;
 });
 $("#btn-light").click(function(event) {
 $.addTheme("Light", false);
 event.preventDefault();
 returnfalse;
 });
 });</script>

从微软 Windows Phone 主题的结果是一个应用,它比基于jQM的通用应用程序更本地的外观。 图 4 显示一些示例输出。

图 4 Windows Phone 主题的示例

iphone/ipad启发了 JQuery Mobile 主题

当然 Windows Phone 不是移动市场中唯一的设备。 智能手机围绕iPhone的旋转 crystalized,在 2007年推出。 根据各种统计调查,iPhone是目前美国两款智能手机,同时拥有移动设备的大部分网络通讯。 谢天谢地,创建看起来像本地iOS应用程序的jQM应用程序涉及到使用定制的jQM主题。 向应用程序添加jqm主题支持的步骤如下所示:

  • 下载of主题。它在github和本文末尾的资源中列出。
  • 将文件导入到项目中。
  • 将如下代码添加到必要的页或者布局文件中。 你可能需要更改这里代码以满足应用程序的特定要求。
<metaname="apple-mobile-web-app-capable"content="yes"><linkhref="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"rel="stylesheet"/><linkrel="stylesheet"href="css/iOS/styles.css"/><scriptsrc="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>// all dialog buttons should close their parent dialog $(".ui-dialog button").live("click", function () {
 $("[data-role='dialog']").dialog("close");
 });
 $(document).on("mobileinit", function () {
 $.mobile.defaultPageTransition = "slide";
 });
 </script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><style> #footerTabs {
 background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4); }
. ui-listviewsup {
 font-size: 0.6em;color: #cc0000; }
 </style>

将代码放入HTML页面的头部之后,应用程序看起来就像是的。 可以看到,用户显示的布局与本机 iPhone/iPad/iOS 应用程序非常相似。

图 5.自定义iOS主题的示例

Android全息 JQuery Mobile 主题

在美国,有一些关于Android是最受欢迎的智能手机的讨论。 在美国外,Android智能手机拥有广泛的margin 市场共享。 已经为这个平台创建了一个jQM主题。 按照前面描述的步骤执行主题。 下面是你将添加到必要页面或者布局 file: 中的代码示例

<metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="css/Android/android-holo-light.min.css"rel="stylesheet"/><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

结果是一个应用程序,它的一般外观如图 6所示。

图 6.Android光全息主题

将主题放在一起

构建看起来像iPhone应用并将它的部署到 Windows Phone 用户的jQM应用程序很可能会造成很多不愉快的用户。 开发者希望能够与用户拥有的本地平台一样看起来尽可能多的应用程序,但是他们不希望为每个平台创建单独的应用程序。 理想情况下,应用程序的用户界面可以是所有平台的标准,而需要更改的唯一部分是jQM主题。

在这个练习中,我们使用一个 ASP.NET 布局文件来指示一个用户所连接的移动设备。 在本示例中,应用程序涉及四个可能的平台: Windows Phone,iPhone,安卓和所有其它平台。 这个应用程序中,用户在 Windows Phone。iPhone和Android上拥有一个本地的应用程序。 在所有其他平台上,用户都有一个通用jQM用户界面。

<!DOCTYPEhtml><html><head><title>@Page.Title</title>@RenderSection("head", required: false)
@{
var ua = Request.UserAgent;
var pt = MobileHelper.TypeOfPhone(ua);
}
@{
if ( pt == MobileHelper.PhoneType.WindowsPhone )
{
 <text><metaname="viewport"content="width=device-width, initial-scale=1"/> 
 <linkrel="stylesheet"href="@Href("~/www/css/metro/jquery.mobile.metro.theme.css")"/><linkhref="@Href("~/www/css/progress-bar.css")"rel="stylesheet"type="text/css"/><linkhref="@Href("~/www/css/toggle-button.css")"rel="stylesheet"type="text/css"/><styletype="text/css">/* custom icons for toggle button*/. ui-icon-demo-help,
. ui-icon-demo-set {
 background-repeat: no-repeat;background-position: 50% 50% ;background-size: 30px 30px; }
. ui-toggle-button-a. ui-icon-demo-set,
. ui-toggle-button-b[checked='checked']. ui-icon-demo-set{
 /*background-image: url(Images/set.dark.png) ;*/background-image: url(data:image/png;base64,......);
 }
. ui-toggle-button-b. ui-icon-demo-set,
. ui-toggle-button-a[checked='checked']. ui-icon-demo-set{
 /*background-image: url(Images/set.light.png);*/background-image: url(data:image/png;base64,......);
 }
 </style><scriptsrc="@Href("~/www/js/jquery.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/js/jquery.mobile.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/css/metro/jquery.mobile.metro.theme.init.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/js/jquery.globalstylesheet.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/js/jquery.mobile.themeswitcher.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/js/progress-bar.js")"type="text/javascript"></script><scriptsrc="@Href("~/www/js/toggle-button.js")"type="text/javascript"></script><scripttype="text/javascript"> $.themesDir = @Href("~/www'css/");
 $(function () {
 $("#btn-dark").click(function (event) {
 $.addTheme("Dark", false);
 event.preventDefault();
 returnfalse;
 });
 $("#btn-light").click(function (event) {
 $.addTheme("Light", false);
 event.preventDefault();
 returnfalse;
 });
 });
 </script></text> 
}
if ( pt == MobileHelper.PhoneType.Other )
{
 <text><metaname="viewport"content="width=device-width, initial-scale=1"/> 
 <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.8.3.min.js"></script><linkrel="stylesheet"href=http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/> @if (IsSectionDefined("Head"))
 {
 @RenderSection("Head", false);
 }
 <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></text> }
 if ( pt == MobileHelper.PhoneType.iPhone )
 {
 <text><metaname="viewport"content="width=device-width, initial-scale=1"/> 
 <metaname="apple-mobile-web-app-capable"content="yes"><linkhref="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"rel="stylesheet"/><linkrel="stylesheet"href="@Href("~/css/iOS/styles.css")"/><scriptsrc="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>// all dialog buttons should close their parent dialog $(".ui-dialog button").live("click", function () {
 $("[data-role='dialog']").dialog("close");
 });
 $(document).on("mobileinit", function () {
 $.mobile.defaultPageTransition = "slide";
 });
 </script> @if (IsSectionDefined("Head"))
 {
 @RenderSection("Head", false);
 }
 <scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><style> #footerTabs {
 background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4); }
. ui-listviewsup {
 font-size: 0.6em;color: #cc0000; }
 </style></text> 
 }
 if ( pt == MobileHelper.PhoneType.Android )
 {
 <text><metaname="viewport"content="width=device-width, initial-scale=1"> 
 <linkhref="@Href("~/css/Android/android-holo-light.min.css")"rel="stylesheet"/><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script> @if (IsSectionDefined("Head"))
 {
 @RenderSection("Head", false);
 }
 <scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></text> 
 }
 }</head><body><!-- User Agent: @ua -->@RenderBody()</body></html>

MobileHelper.cs 文件的代码显示在下一个代码清单中。 类包含一个 enum,它将使用浏览器用来加载页面的电话类型和确定手机类型的方法。 当然,有许多方法可以检测移动设备的类型。 这只是通过检查服务器检测到的User Agent 字符串来实现的一种方法。

publicclass MobileHelper
{
 public MobileHelper()
 {
 //// TODO: Add constructor logic here// }
 publicenum PhoneType { iPhone, Android, WindowsPhone, Other }
 publicstatic PhoneType TypeOfPhone(String userAgent)
 {
 var pt = PhoneType.Other;
 if (userAgent.IndexOf("Android") >= 0)
 {
 pt = PhoneType.Android;
 }
 if (userAgent.IndexOf("Windows Phone") >= 0)
 {
 pt = PhoneType.WindowsPhone;
 }
 if ((userAgent.IndexOf("AppleWebKit") >= 0) && 
 ((userAgent.IndexOf("iPad") >0) || 
 (userAgent.IndexOf("iPhone") >0)))
 {
 pt = PhoneType.iPhone;
 }
 return pt;
 }
}

这里代码的最终结果显示在图 7。 每个视图显示来自不同设备的输出。

图 7.基于设备动态应用主题的输出。 左上:Windows Phone ;右上: 安卓;左下角:iPhone ;右下角: IE 中的通用设备

开发人员的优点是可以用一个UI构建一个应用程序,然后将内容发送给用户一致的用户界面。 开发人员只有一个应用程序,用户得到与它的设备上它的他应用程序紧密相似的应用程序。 大家都高兴。

结束语

我希望你能为每个设备使用一个主题。 就像前面所说,用户希望应用程序看起来像所有其他应用程序。 开发者可以使用 ASP.NET Razor 布局页面和一些基本逻辑,轻松快速地构建针对所有预期设备进行优化的jQM应用程序。

引用

这篇文章最初是由 Wallace McClure撰写的。 Wallace是来自田纳西州的redneck,他找到了到亚特兰大和乔治亚的路。 他很幸运,可以从那里进入两次,用电气工程中的英语和。 虽然 he new,但他还是喜欢 mobile mobile microsoft microsoft microsoft microsoft beta beta beta beta beta beta beta beta beta beta beta beta beta beta beta beta beta。 在某个地方,他被一个表示出版商的人联系到了一个出版商,最终被约翰by和他们的Wrox分。 几本书之后,他运行了软件体系结构,以缩放应用程序。ADO.NET。SQL Server。Oracle。Web。AJAX和移动技术。 他已经为启动公司和许多不同的组织工作过,一直通过 美国 联邦政府机构。

在不写软件的情况下,谈谈软件,讨论软件或者想象他是一个演员,在健身球。

找找 Wally

theme  DEEP  风格  Jquery Mobile  div  
相关文章