JQuery或Zepto单页应用路由Router -

qq290063295

浏览: 14914 次
性别:
来自: 深圳

最近访客更多访客>>

xgwzw0011

u012947448

dinglei_123

seanloo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-08 ( 1)
更多存档...

JQuery或Zepto单页应用路由Router

博客分类：

jquery

Jquery zepto vipspa 单页路由

之前一直都是在用AngularJs在做前台开发，这几天要做移动版页面，所以前端采用了Zepto+WEUI CSS来做，主要是因为Zepto比较小巧，用起来也JQuery一样锋利。
用AngularJs时我们一直都是用ui-router做单页应用，为了保持PC端和移动链接地址一致，所以移动端也要采用ui-router风格的单页应用模式。找了一圈，发现vipspa可以实现这个功能，但跟我想要的还是有点儿不一样，于是拿来小改一下，改成ui-router风格的jquery或zepto的单页应用Router插件（见附件）。
这里主要介绍如何使用。
index.html

<html lang="zh-CN">
<header>
<meta charset="utf-8"/>
</header>
<body>
	<!-- header -->
	<header>
		This is header.
	</header>
	
	<!-- main -->
	<div id="main">
		<div class="ui-view"></div>
	</div>
	
	<!-- footer -->
	<footer>
		This is footer.
	</footer>
	
	<script src="static/lib/zepto/zepto.min.js" type="text/javascript"></script>
	<script src="static/lib/vipspa/vipspa.min.js" type="text/javascript"></script>
	<script src="static/js/index/app.js" type="text/javascript"></script>
</body>
</html>

js 文件结构
app.js

$(function() {
	vipspa.start({
		view: '.ui-view',// 装载视图的dom
		router: {
			'/home': {
				templateUrl: 'static/views/index/home.html',
				controller: 'static/js/index/controllers/home.js'
			},
			'/content': {
				templateUrl: 'static/views/index/content.html',
				controller: 'static/js/index/controllers/content.js'
			},
			'/component/:uuid/item/:itemid': {
				templateUrl: 'static/views/index/component.html',
				controller: 'static/js/index/controllers/component.js'
			},
			'defaults': '/home'// 不符合上述路由时，默认跳至
		},
		errorTemplateId: '#error'
	});
});

视图片段文件结构
每个视图就已经与每个Controller js绑定了，没个视图的展示与操作独立开来。
home

<p>home</p>

console.log('This is the page home.');

content

<p>content</p>

console.log('This is the page content.');

component

<h3>
这是器件页面
器件的uuid是：<span id="uuid"></span>，id是: <span id="itemid"></span>
</h3>

var obj = vipspa.params;// 通过路由传递的参数

$('#uuid').text(obj.uuid);// 由:uuid指定位置的参数
$('#itemid').text(obj.itemid);// 由:itemid指定位置的参数

效果
当我们打卡index路径时，默认跳至home页面
当我们进入index#/content路径是，我们可以进入content页面
当我们进入index#/component/uuid001/item/item002的路径是，进入到component的页面，并获得路径中的参数
这就是一个简单好用的Jquery router。

vipspa.min.zip (1.5 KB)
下载次数: 193

查看图片附件

分享到：

2016-08-09 15:17
浏览 14914
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery或Zepto单页应用路由Router

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery或Zepto单页应用路由Router

评论

发表评论

相关推荐

最近访客更多访客>>