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');
    });
  • 相关阅读:
    npm 中设置环境NODE_ENV变量,判断失败打印process.env.NODE_ENV确实是"development",但是判断process.env.NODE_ENV === "development" 是false
    NuxtJS踩坑日记,一步一步爬出我自己挖的坑。
    Django模型层1
    Django模板层2
    Centos 6.5 版本的下载教程
    上传文件到github
    CSS完整
    前端之JavaScript
    CSS
    多表 查询习题
  • 原文地址:https://www.cnblogs.com/lightsong/p/7604427.html
Copyright © 2011-2022 走看看