partial.js client-side routing(用戶端路由-基於HTML5 SPA特性的曆史API)

標籤：ie8   client   易用   dev   def   sel   can   on()   empty   

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 variableframework.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)