移动互联网的发展,促生了各种各样的移动Web框架。jQuery是继Prototype之后又一个优秀的JavaScript框架。通过jQuery,我们能够快速地处理HTML文档、控制事件、给页面添加动画和Ajax效果。在Web设计中,我们通常会将设计转化成代码。但是这个过程通常是漫长而又反复,更悲剧的是,代码的可用性还要打个问号。而通过jQuery插件,我们只需在短短的几分钟内就能解决以往需要几小时甚至是几天的问题。
2. CSS定位
我们CSS代码中并没有太多复杂的内容。大多数的定位工作都是通过手动完成的,完成之后才会交由jQuery来操作。同样,这里也有一些我们要注意的代码片段。
/** @group core body **/
#w #pagebody {
position: relative;
left: 0;
max-width: 640px;
min-width: 320px;
z-index: 99999;
}
#w #navmenu {
background: #475566;
height: 100%;
display: block;
position: fixed;
width: 300px;
left: 0px;
top: 0px;
z-index: 0;
}
上面的这段代码分别定义了页面中两个部分的样式。导航菜单的宽度为300px,这样一来,就为我们浏览页面内容留下了一点空间,打开和关闭菜单按钮也固定在左侧。这里最重要的部分就是导航菜单的z-index的属性值和位置(z-index: 0;position: fixed)。
我们顶部栏标题也是一个有趣的部分。它被放置在一个固定的位置,会随着页面内容的滚动而滚动,大多数的iOS App上都有这个效果。
/** @group header **/
#w #pagebody header#toolbarnav {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
background: #0b1851 url(‘img/tabbar-solid-bg.png‘) top left no-repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
height: 44px;
width: 100%;
max-width: 640px;
}
#w #pagebody header#toolbarnav h1 {
text-align: center;
padding-top: 10px;
padding-right: 40px;
color: #e6e8f2;
font-weight: bold;
font-size: 2.1em;
text-shadow: 1px 1px 0px #313131;
}
移动规则
很容易注意到,在背景上我使用了蓝色的横条作为标题栏。这个标题栏的大小为640x44px,从而能够与页面的布局保持吻合。不仅如此,我还为iPhone/iPad视网膜显示屏设计了一张@2x图片。大家可以从上图看到这些图片,或者从SOURCE CODE中获取。
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#w #pagebody header {
background-size: 640px 44px;
}
#w #pagebody header #menu-btn {
background-size: 53px 30px;
}
}
菜单箭头的设计
在导航菜单方面,我为每个菜单链接的右侧设计了一个指向右方的箭头图标。相信大多数CSS3的爱好者都会喜欢这么做,这确实是一个不错的创意。
我使用transform变量在导航内容后面创建一个小边框,所以我们可以在左边的框架内任意的移动,除此之外,在悬停状态下我们可以很方便地改变边框的颜色和样式。更令人惊叹的是,你只需要使用基本的HTML5和CSS3样式就可以完成这些边框地设计。
但首先,我们要进入JavaScript编码世界。
#w #navmenu ul li a::after {
content: ‘‘;
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }
3. jQuery动画设计
在编写这些自定义代码过程中,我新建了一个script.js文件。大家可以根据自己的需要来直接编写<script> 标签,也可以从SOURCR CODE中直接下载我的模板。
$(document).ready(function(){
var pagebody = $("#pagebody");
var themenu = $("#navmenu");
var topbar = $("#toolbarnav");
var content = $("#content");
var viewport = {
width : $(window).width(),
height : $(window).height()
};
// retrieve variables as
// viewport.width / viewport.height
在开始之前,我设置一些页面变量,如此一来,我们就可以更为方便地引用文档中的变量。我从没用过视口值,但是如果你想调整动画阶段,设置视口值可以帮你一个大忙。例如:通过视口值,你可以检查当前浏览器的宽度,并能够的对你的菜单栏进行相应地缩放。
function openme() {
$(function () {
topbar.animate({
left: "290px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "290px"
}, { duration: 300, queue: false });
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px"
}, { duration: 180, queue: false });
});
}
接下来,我为打开和关闭菜单定义了两个重要的函数。除非我们确实需要两种截然不同的动画元素,否则我们可以在一个单一的函数和回调切换中完成此项设计,但不幸的是, jQuery并不能帮助我们解决这个问题,所以我们需要求助于其它的替代语法。
这两个函数我暂且命名为topbar和pagebody。内容区域的白色背景就是pagebody;我们把标题栏放置在页面的顶部。这就意味着每当我们点击打开或者关闭按钮时,我们需要把topbar和pagebody向左和向右平移290px。
4. 加载动态内容
理论上,上述代码基本上就能满足大部分人创建一个简单移动的需求,但是,在这里我还想添加一些另外的东西。
每当用户点击一个菜单链接,页面会自动关闭当前的导航栏目和显示一个加载的GIF图像。当页面内容加载完成时,页面会去除GIF图片,并且显示已加载好的内容。通过使用static .htm,我们可以很轻松的完成这项工作,从而避免了PHP、Ruby、Perl或者任何后端语言所带来的困扰。
点击设置
首先,我们需要测试导航按钮。当用户点击导航按钮,页面会停止href的正常加载,此时,我们可以利用函数来显示外部内容。
// loading page content for navigation
$("a.navlink").live("click", function(e){
e.preventDefault();
var linkurl = $(this).attr("href");
var linkhtmlurl = linkurl.substring(1, linkurl.length);
var imgloader = ‘<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>‘;
通过上段代码,每当用户点击导航菜单链接时,我们会停止当前页面加载并且设置一个完整的URL变量。此外,我还创建一个包含标准图像Loader的HTML变量。如果你想定制自己的图像加载方式,Ajaxload会是一个很不错的助力。
Ajax.Load()
要实现这个功能我们需要两段不同的代码,下面这段代码不仅能帮助我们关闭导航菜单和滑动文档窗口,而且还能帮助我们使用一个较小的加载动画来替代当前页面内的主体内容。
closeme();
$(function() {
topbar.css("top", "0px");
window.scrollTo(0, 1);
});
当外部页面的内容加载完成时,我们要用外部的加载页面来取代页面上的加载动画。通常情况下,这将只需要几百毫秒甚至更快,所以我设置了超时功能。
content.html(imgloader);
setTimeout(function() { content.load(linkhtmlurl, function() {
/* no callback */
}) }, 1200);