润物无声 » jQuery http://blog.zhourunsheng.com 天空一朵雨做的云 Sat, 08 May 2021 05:17:21 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.1.41 利用 jQuery Mobile 制作 wordpress 手机主题 http://blog.zhourunsheng.com/2012/03/%e5%88%a9%e7%94%a8-jquery-mobile-%e5%88%b6%e4%bd%9c-wordpress-%e6%89%8b%e6%9c%ba%e4%b8%bb%e9%a2%98/ http://blog.zhourunsheng.com/2012/03/%e5%88%a9%e7%94%a8-jquery-mobile-%e5%88%b6%e4%bd%9c-wordpress-%e6%89%8b%e6%9c%ba%e4%b8%bb%e9%a2%98/#comments Tue, 06 Mar 2012 13:59:46 +0000 http://blog.zhourunsheng.com/?p=1338 jQuery Mobile 作为一款十分优秀的 Javascript 开发框架，可以用来方便的开发面向手持设备 […]

利用 jQuery Mobile 制作 wordpress 手机主题，首发于润物无声。

]]> jQuery Mobile 作为一款十分优秀的 Javascript 开发框架，可以用来方便的开发面向手持设备的网站和Web APP。

本文就带领大家使用 jQuery Mobile 来制作一款 wordpress 的手机主题。

示例代码演示效果如下

jquery-mobile-wordpress-theme

主题制作步骤

1. 我们可以从头开始来制作一款主题，不过为了节省制作主题的时间，示例代码是通过客制化另外一款主题来实现的，首先需要下载一款 BLANK-Theme 的 wordpress 主题，该主题除了样式 style 没有定义以外，其他的功能都基本已经实现了，通过修改文件 style.css，您可以修改该主题的名字，也可以客制化该主题的样式。

2. 修改 Header 和 Footer

既然要制作手机主题，首先需要引用 jQuery 和 jQuery Mobile 开发库，您可以把这些开发库下载到自己的Server上，也可以利用JQuery的CDN Server，推荐利用CDN加速，这些库的加载速度会快很多，同时也可以为您的服务器节省流量。

修改 header.php 文件， 在<head> 和</head> 的标签中添加如下代码：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

因为 jQuery Mobile 使用 HTML5, 我们需要修改 doctype。更新 Header 如下:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

接下来，替换从 <body <?php body_class(); ?>> 标签开始的全部内容如下：

<body <?php body_class(); ?>>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1><?php bloginfo('name'); ?></h1>
</div>

<div data-role="content">

然后开始修改 footer.php 文件，替换为如下内容：

</div><!-- data role content-->

<div data-role="footer" class="ui-bar">
<a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
<?php wp_footer(); ?>
</div><!-- data role content-->
</body>
</html>

3. 更新主页 homepage

设计手机主题的目标就是要求简洁，所以我们将用列表来展示最新发布的博文。

修改文件 index.php中 loop 循环的内容如下：

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

按照同样的方法修改 search.php 和 archive.php。

4. 更新 Post 和 pages 文件

为了提高手持设备的用户体验，我们默认将评论列表窗口收缩，以节省屏幕空间，只有当用户需要查看评论的时候，才会点击展开，修改方法如下，更新文件 comments.php：

<?php if ( have_comments() ) : ?>

<span style="color: #3068ff;"><div data-role="collapsible" data-state="collapsed"></span>

... ...

<span style="color: #3068ff;"></div></span>

<?php else : // this is displayed if there are no comments so far ?>

5. 更新搜索表单文件

更新 searchform.php 文件，替换为如下内容：

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" name="s" id="search" value="" />
</div>
</form>

为了将搜索 Bar 加入到主界面中，您需要修改 index.php 文件，在 get_header() 函数之后加入如下代码：

<?php include('searchform.php'); ?>

6. 样式修正

主页面中您可能会发现，搜索框的宽度没有文章列表的宽度长，看起来不太美观，解决的方法比较简单，修改 style.css 文件，加入样式定义：

.ui-input-search{
width:88% !important;
}

7. 去掉 sidebar

更新 sidebar.php 文件，将输出都注释掉，方法如下：

<!-- sidebar的内容-->

总结

通过本文的整体流程，相信您已经学会了怎么样来制作一款 wordpress 手机主题了，接下来发挥您的想法，尽力去完善吧！

代码下载：

1. BLANK-Theme 主题

2. 本文制作的 JQuery Mobile Theme

参考文章：

1. how-to-create-a-mobile-wordpress-theme-with-jquery-mobile

利用 jQuery Mobile 制作 wordpress 手机主题，首发于润物无声。

]]> http://blog.zhourunsheng.com/2012/03/%e5%88%a9%e7%94%a8-jquery-mobile-%e5%88%b6%e4%bd%9c-wordpress-%e6%89%8b%e6%9c%ba%e4%b8%bb%e9%a2%98/feed/ 10 jQuery Mobile 教程 http://blog.zhourunsheng.com/2011/07/jquery-mobile-%e6%95%99%e7%a8%8b/ http://blog.zhourunsheng.com/2011/07/jquery-mobile-%e6%95%99%e7%a8%8b/#comments Tue, 05 Jul 2011 06:49:21 +0000 http://blog.zhourunsheng.com/?p=317 1.  Creating a Website Using JQuery Mobile 在本教程中将告诉您如何利 […]

jQuery Mobile 教程，首发于润物无声。

]]> 1.  Creating a Website Using JQuery Mobile

在本教程中将告诉您如何利用jQuery Mobile建立一个网站。这个教程的第一部分为您解释该网站的特点并且完成网站的主页。

Creating-a-Website-Using-JQuery-Mobile

2. jQuery Mobile: What Can It Do for You?

这是一篇介绍jQuery Mobile主要特性和优点的详细教程，举例说明了如何利用这个新架构帮助你快速建立优质移动应用。

jQuery-Mobile-What-Can-It-Do-for-You

3. Getting Started with jQuery Mobile & Rails 3

本教程教我们如何利用Rails 3和jQuery Mobile创建CRUD应用。该应用程序将允许我们通过移动设备创建，读取，更新和删除博客帖子。

Getting-Started-with-jQuery-Mobile-Rails-3

4. Creating a Simple App Using jQuery Mobile

在这篇文章中，我们将看看如何利用框架，动态（AJAX）的页面加载，iOS的风格设计和页面过渡等创建一个简单的移动网站。

Creating-a-Simple-App-Using-jQuery-Mobile

5. How to create a mobile WordPress theme with jQuery Mobile

本教程为您介绍如何创建一个移动优化WordPress主题。

How-to-create-a-mobile-WordPress-theme-with-jQuery-Mobile

6.Two-Minute Tutorial  1

这个两分钟教程展示了如何使用AppLaud和PhoneGap Media API播放音频文件，并使用jQuery Mobile实现按钮和文本显示。它也显示了两种方法来访问音频文件：网址或本地上传。

Two-Minute-Tutorial

7. jQuery Mobile Framework – A Forms Tutorial

jQuery Mobile是一个相对较新的移动网络框架，2010年10月首次发布。该框架有许多有趣的功能来支持移动应用开发。在本教程中，我们将集中于 jQuery Mobile的一些基本要素：页面结构，形式和Ajax提交表单。本教程是基于jQuery Mobile 1.0 alpha版本。

jQuery-Mobile-Framework-–-A-Forms-Tutorial

8. How to Build an RSS Reader with jQuery Mobile

本教程教我们如何使用PHP和jQuery Mobile建立一个简单的Tuts+ RSS阅读器。学习完这个教程，您可以轻而易举地在iPhone或Android手机上创建Tuts+ RSS阅读器。

How-to-Build-an-RSS-Reader-with-jQuery-Mobile

jQuery Mobile 教程，首发于润物无声。

]]> http://blog.zhourunsheng.com/2011/07/jquery-mobile-%e6%95%99%e7%a8%8b/feed/ 0