JqueryMobile主题选择

来源：互联网发布：网络教育需要多少钱编辑：程序博客网时间：2024/06/04 00:26

一直在纠结jquerymobile页面的主题风格，不知道怎么切换，应用。为此，我花了差不多几个小时来琢磨这个，虽然是一个很小的东西，但是对于一个不是很懂设计，但是又想学习移动开发的人来说也算是比较重要的。不说废话了，进入主题。

1.打开官网，http://jquerymobile.com/ 官网有点慢，进入http://themeroller.jquerymobile.com/ 。在慢慢进入的时候，唠叨几句，开发确实很累，google不能用，国外网址很慢，有时候还要偷偷的墙。

2.正式开始设计jm的样式了。

(1)选择A样式进行编辑

(2)我们来看下A下面有哪些样式可以编辑的呢，用过JqueryMobile的都知道这些东西就是JqueryMobile的核心样式，万变不离其宗啊。我想这些弄好之后，都不用美工设计啦，想到这里还是有点小激动了，程序员和美工的矛盾就是这么深啊(个人观点啊)。

(3)开始编辑样式，我这里举个小例子，不做详细说明。随便改了一些样式，就可以在线预览效果，有点重口味，为了能够看清楚。

4.接下来就是如何把主题样式弄到本地了。

5.这样就下载到本地了，下面就说下怎么使用，有时候需要点耐心，国外的网站，大家都懂的。下载下来的是一个压缩包，解压之后是这个样子的。

6.如何你很好奇你可以点开index.html预览下效果，当然这里就可以直接进入代码了。

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery Mobile: Theme Download</title><link rel="stylesheet" href="themes/mofijeck.min.css" /><link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" data-theme="a"><div data-role="header" data-position="inline"><h1>It Worked!</h1></div><div data-role="content" data-theme="a"><p>Your theme was successfully downloaded. You can use this page as a reference for how to link it up!</p><pre><strong><link rel="stylesheet" href="themes/mofijeck.min.css" /></strong><strong><link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /></strong><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></pre><p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p><label for="slider1">Input slider:</label><input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" /><fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain"><legend>Cache settings:</legend><input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" /><label for="radio-choice-a1">On</label><input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  /><label for="radio-choice-b1">Off</label></fieldset></div></div></body></html>

大家可以看上面的源码关键的两点

(1)主题样式引入

<link rel="stylesheet" href="themes/mofijeck.min.css" /><link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

(2)主题的使用，因为我们选择的是A主题然后下载，所以这里就是data-theme="a"等于A了

<pre name="code" class="html"><div data-role="page" data-theme="a">

到这里就结束了，JqueryMobile主题应用是很方便的，JqueryMobile团队现在是做的越来越好啦，希望他们能够做的更好。

0 0