zoukankan      html  css  js  c++  java
  • 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');
    });
  • 相关阅读:
    java.lang.NoClassDefFoundError: org/hibernate/service/ServiceRegistry] 类似问题
    哪些window你不知道的却实用的小技巧----window小技巧
    windows命令快捷启动应用-----window小技巧
    cmd窗口关闭 -----window小技巧!
    Eclipse错误笔记!
    如何在WIndows电脑上安装 SVN Server 实现代码版本控制
    linux之应用开发杂记(一)
    面试知识点汇总
    Android技术面试整理
    MYSQL常用操作语句
  • 原文地址:https://www.cnblogs.com/lightsong/p/7604427.html
Copyright © 2011-2022 走看看