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

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'); });

 

转载于:https://www.cnblogs.com/lightsong/p/7604427.html