partial.js client-side routing

https://github.com/petersirka/partial.js-clientside

Framework supports the HTML 5 History API, for older browsers (IE8+) URL hashtag is automatically enabled. This plugin is a little big cannon for the web development. Works best with jQuery.

  • easy to use
  • minified only 9.5 kB (without GZIP compression)
  • great functionality
  • great use
  • works in IE 8+
  • no dependencies
  • DEMO EXAMPLE

小巧 易用 功能强大, 兼容性好, 对于老的浏览器, 即不支持HTML5 SPA 历史API的浏览器, 自动降级为 hash方式的路由。

查看例子页面:

http://source.858project.com/contact/

Simple example

// ===========================
// DEFINE ROUTING
// =========================== // framework === global variable framework.route('/homepage/', view_homepage, ['contact']);
framework.route('/services/', view_services, ['contact']);
framework.route('/contact/', view_contact, ['empty']);
framework.route('/products/{category}/', view_products, ['latest']); // ===========================
// DEFINE PARTIAL CONTENT
// =========================== framework.partial('contact', function() {
$('#panel').html('PANEL CONTACT');
}); framework.partial('empty', function() {
$('#panel').html('PANEL EMPTY');
}); framework.partial('latest', function() {
$('#panel').html('PANEL LATEST');
}); // ===========================
// DEFINE VIEWS
// =========================== function view_homepage() {
$('#content').html('HOMEPAGE');
} function view_services() {
$('#content').html('SERVICES');
} function view_contact() {
$('#content').html('CONTACT');
} function view_products(category) {
$('#content').html('PRODUCTS –> ' + category);
} // ===========================
// DEFINE EVENTS
// =========================== framework.on('ready', function() {
$('.menu').on('click', 'a', function(e) {
e.preventDefault();
e.stopPropagation();
framework.redirect($(this).attr('href'));
});
framework.redirect('/homepage/');
}); framework.on('location', function(url) {
var menu = $('.menu');
menu.find('.selected').removeClass('selected');
menu.find('a[href="' + url + '"]').parent().addClass('selected');
});

partial.js client-side routing(客户端路由-基于HTML5 SPA特性的历史API)的更多相关文章

  1. 译:4.RabbitMQ Java Client 之 Routing(路由)

    在上篇博文 译:3.RabbitMQ 之Publish/Subscribe(发布和订阅)  我们构建了一个简单的日志系统 我们能够向许多接收者广播日志消息. 在本篇博文中,我们将为其添加一个功能 - ...

  2. 处理ASP.NET Core中的HTML5客户端路由回退

    在使用由Angular,React,Vue等应用程序框架构建的客户端应用程序时,您总是会处理HTML5客户端路由,它将完全在浏览器中处理到页面和组件的客户端路由.几乎完全在浏览器中... HTML5客 ...

  3. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  4. RabbitMQ --- Routing(路由)

    目录 RabbitMQ --- Hello Mr.Tua RabbitMQ --- Work Queues(工作队列) RabbitMQ --- Publish/Subscribe(发布/订阅) 前言 ...

  5. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  6. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  7. LVS Direct Routing 直接路由

    1. Direct Routing 直接路由 director分配请求到不同的real server, real server处理请求后直接回应给用户,这样director负载均衡器仅处理客户机与服务 ...

  8. 《SPA设计与架构》之客户端路由

    原文 简书原文:https://www.jianshu.com/p/4d83475f71da 大纲 1.传统路由 2.SPA导航 3.客户端路由器的工作机制 1.传统路由 在传统Web应用程序中,导航 ...

  9. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

随机推荐

  1. luogu3674 小清新人渣的本愿 (bitset+莫队)

    对于加减,用bitset维护当前每个数有没有 对于乘,暴力枚举约数 然后莫队 复杂度$O(m(\sqrt{n}+\frac{c}{64}))$ #include<bits/stdc++.h> ...

  2. [SCOI2014]方伯伯的OJ(线段树)

    方伯伯正在做他的Oj.现在他在处理Oj上的用户排名问题.Oj上注册了n个用户,编号为1-n“,一开始他们按照编号排名. 方伯伯会按照心情对这些用户做以下四种操作,修改用户的排名和编号: 1.操作格式为 ...

  3. hdu 1024 Max Sum Plus Plus(m段最大和)

    Problem Description Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To b ...

  4. ACM-ICPC 2018 南京赛区网络预赛 G Lpl and Energy-saving Lamps(线段树)

    题目链接:https://nanti.jisuanke.com/t/30996 中文题目: 在喝茶的过程中,公主,除其他外,问为什么这样一个善良可爱的龙在城堡里被监禁Lpl?龙神秘地笑了笑,回答说这是 ...

  5. 关于python的GIL全局解释器锁的简单理解

    GIL是解释器内部的一把锁,确切一点说是CPython解释器内部的一把锁,所以要注意区分 这和我们在Python代码中使用线程锁Lock并不是一个层面的概念. 1. GIL产生的背景: 在CPytho ...

  6. 如何设计出优秀的Restful API?

    https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw==&mid=2247485240&idx=1&sn=b5b9c8c41659d2 ...

  7. JS截取文件后缀名

    let fileName = this.file.name.lastIndexOf(".");//取到文件名开始到最后一个点的长度 let fileNameLength = thi ...

  8. A1066. Root of AVL Tree

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  9. 斯坦福大学公开课机器学习: advice for applying machine learning - evaluatin a phpothesis(怎么评估学习算法得到的假设以及如何防止过拟合或欠拟合)

    怎样评价我们的学习算法得到的假设以及如何防止过拟合和欠拟合的问题. 当我们确定学习算法的参数时,我们考虑的是选择参数来使训练误差最小化.有人认为,得到一个很小的训练误差一定是一件好事.但其实,仅仅是因 ...

  10. 初始redis数据库

    redis就是一个类似于存储在内存中的大字典 安装: windows下安装redis: 你需要在你的环境下安装: pip install redis 以上是在你的全局环境安装, 你如果用的是虚拟环境你 ...