JQuery或Zepto单页应用路由Router

最新推荐文章于 2023-03-23 07:11:53 发布
最新推荐文章于 2023-03-23 07:11:53 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： jquery 文章标签： Jquery zepto vipspa 单页路由 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11148/article/details/82671479
版权
  • 之前一直都是在用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
最低0.47元/天 解锁文章
iteye_11148
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQ 路由-简单原理-带源码下载
加金开发
02-26 241
JQ的路由实现
Routerjs:jQuery的路由器
05-16
路由器 jQuery的路由器最初，我开始启动此项目，以便像其他框架（Angularjs，Reactjs，Vue.js）一样在前端提供路由。 用户将可以将其与JQuery和其他JQuery插件一起使用。 它将为使用最受欢迎的JQuery库创建单页应用程序提供简单，最少和精巧的解决方案。 除了路由之外，它将提供页面的平滑过渡。 对于大多数混合应用程序开发，我们需要页面之间的平滑过渡。 因此，无需使用其他CSS库进行转换。 相应地，我们有四个过渡。 将来，我们将为路线添加更多动画。 模板，我正在使用处理程序栏。 因此，目前的依赖关系是JQuery和Handlerbar.js。 Routerjs的实际应用 检查实时示例： : 如何使用： 只需包含：具有相关性（JQuery，Handlerbars）的routes.css，routes.js到您的html < link rel =" sty
jquery中引入router.js_JQuery
weixin_30082413的博客
02-03 572
JQuery概述:jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do moreJQuery作用访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合jQuery能做的JavaScript也都能做，但使用jQuery能...
路由传值、JQ、fetch
吃蛋糕的居居
07-15 431
路由传值： 1.React路由取参数，有两种： (1)?a=1:这种属于search字符串，在location.search里取值. (2)/a/123:这种需要从match.params里取值. (3)但无论哪种，路由获取到的值，是跳转后的那一刻的值，而不是实时更新的最新值. 2.路由-props信息 (1)react-router的路由信息，都是存储在组件的props里. (2)由于我们写在父组件里的，是Route标签，我们需要显示的组件，是作为Route标签的属性而传进去的。所以作为Ro
urianchor
weixin_33726943的博客
04-12 119
《单页Web应用 JavaScript从前端到后端》的第三章提到了这个JQuery插件,但是书上提到的信息很少,所以我去github查看了该项目,学习后,发现好像有一些坑,特意来记录一下.urianchor主页 $.uriAnchor.setAnchor()方法 使用一个映射来修改anchor的值 有三个参数: 1. anchor_m...
jQuery、zepto、js常用小技巧
12-09
jQuery/zepto判断元素是否存在 // 判断长度是否存在, 正确 if ($elem.length) { } // 错误, 因为空数组也是true if ($elem) { } 合理判断数据类型 先看代码: function case(str) { return str.match(/reg/); } ...
countdown:带有 jquery 或 zepto 的倒计时插件
07-19
这个插件是为jQuery或Zepto这两个JavaScript库设计的，目的是帮助开发者轻松地在网页上实现动态的、可视化的倒计时效果。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互...
data-fn:jquery 或 zepto 的自动数据绑定
06-16
总的来说，"data-fn"为JavaScript开发提供了一种灵活的数据绑定机制，结合jQuery或Zepto，可以帮助我们构建响应式和动态的Web应用。但同时，也需要谨慎处理函数的引用和作用域，以确保代码的健壮性和可维护性。在...
SimpleSlideView：一个漂亮的小jQuery或Zepto插件，用于最简单的滑动视图
02-04
一个漂亮的jQuery或Zepto插件，用于最简单的滑动视图。 如果您的应用程序是 ，则可以通过在项目目录中运行bower install SimpleSlideView来安装此插件。 历史 1.1.2 修复了插件处于非活动状态时changeView方法中的...
基于jQuery load实现单页面路由嵌套管理及缓存
weixin_43374259的博客
06-08 795
基于jQuery load实现单页面路由嵌套管理及缓存 1.用法 主页面配置路由 根页面为div添加id = 'root’作为根路由容器渲染一级路由 嵌套路由容器：为div添加router-view类作为容器存放子路由 2.代码 //生成Router，路由控制类 (function (win) { let Router = function (routes) { //记录当前的路由位置 this.recentHashpath = '' this.
浅析vue-router jquery和params传参(接收参数)$router $route的区别
12-11
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。 1.jquery方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ this.$router 和this.$route有何区别？ 在控制台打印两者可以很明显的看出两者的一些区别： 1.$router为VueRouter实例，想要导航到不
vipspa.js jquery 用于局部路由，类似于vue route
05-21
用于局部路由，类似于vue route 大概使用方法： $(function(){ vipspa.start({ view: '#ui-view', //用于局部路由的div errorTemplateId: '#error', // 可选 router: { 'home': { templateUrl: 'views/home.html', controller: 'js/app/home.js', }, 'content': { templateUrl: 'views/content.html', controller: 'js/app/content.js' }, 'contact': { templateUrl: 'views/contact.html', controller: 'js/app/contact.js' }, 'user': { templateUrl: 'views/user.html', controller: 'js/app/user.js', subView: '#ui-sub-view', children: [ { name: 'login', templateUrl: 'views/login.html', controller: 'js/app/login.js', }, { name: 'regist', templateUrl: 'views/regist.html', controller: 'js/app/regist.js', } ] }, 'defaults': 'home' //默认路由 } }); });
简单好用的jQuery插件——Tdrag.js可以任意拖拽di
06-10
效果描述： 在网页中我们经常要用到拖拽效果，无论是pc客户端还是手机页面 今天再次给大家推荐一个非常好用的插件 简单好用，无需懂js的小白即可使用 使用方法： 保证页面引入jQuery以及本插件的基础上，然后将你需要拖动的div的class如此一下 例如：$(".lanren").Tdrag();
微信公众号自定义菜单jQuery插件
06-14
微信公众号自定义菜单jQuery插件，可以多账号使用， 消息包含：图文消息、图片、语音、视频、网页链接，编辑后可以实时在线预览功能，保存、同步、清空菜单等功能则需要自己实现后台代码。
基于Jquery的简单路由实现
weixin_42199478的博客
06-01 2074
基于Jquery的路由主要代码使用index.htmlpage1.htmlpage2.html 主要代码 //路由数据格式，不要重复，只有前面的会生效 // var urls = [{ // name: "", // path: "", // route: "" // }] /** * 初始化 * @urls 路由列表 * @viewbox 显示容器id，默认#view */ function $route(urls, viewbox = '#view') { va
JQuery&前后端分离
Han0221的博客
06-07 1189
前端
给你的jQuery项目赋予Router技能吧
weixin_33910385的博客
02-11 160
现在你不会React/Vue都不好意思说自己是前端，不过我相信很多前端项目还是基于jquery类库的传统模式的，假如你有追求的态度使用过requireJs这个库，你一定思考过一个问题，或者说一种组件化的雏形思维，那就是运用一个模板引擎如artTemplate+requireJs实现一个单页面组件化的开发模式（spa） 先贴一个目录结构 这是近段时间做的一个中后台系统的基本目录结构，就是使用上...
jquery中如何获取路由参数
qq_42931285的博客
03-23 806
jquery中如何获取路由参数
jQuery 简单路由
CrysSun的博客
01-17 6171
首页 个人 我的 var App = angular.module("App",["ngRoute"]); App.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/aaa1",{template:'aaaaaaa{{resu
在vue的index.html引入jquery Uncaught Error: jQuery or Zepto not found!
最新发布
06-02
在Vue的index.html中引入jQuery时，需要确保jQuery的引入顺序和引入位置正确。以下是可能会出现错误的情况及其解决方法： 1. jQuery文件未正确引入。请检查jQuery文件路径是否正确，并确认文件是否存在。 2. 引入顺序不正确。Vue.js的核心库需要在jQuery之前引入，因为Vue.js使用jQuery封装了一些方法。请将Vue.js库放在jQuery之前引入。 3. 引入位置不正确。请将jQuery的引入放在Vue.js库之后，以确保Vue.js能够正确使用jQuery。 4. jQuery版本过低。请确保使用的jQuery版本是1.9.0及以上版本，因为Vue.js不支持早期版本的jQuery。 如果以上方法均未解决问题，可以尝试使用CDN引入jQuery，例如： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 注意：使用CDN引入jQuery可能会受到网络环境的影响，建议在生产环境中使用本地引入方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值