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');
    });
  • 相关阅读:
    可能是最简单的解决本地开发接口请求跨域问题的方案
    《Visual Studio程序员箴言》笔记
    vue后台项目记录
    新版本微信导致的ios表单bug
    longzhuapp项目笔记
    Session、LocalStorage、SessionStorage、Cache-Ctrol比较
    css3实现不同进度条
    axios请求接口的踩坑之路
    实现不同尺寸的图片在固定的区块内实现水平垂直居中
    for循环查找元素怎么跳出for循环
  • 原文地址:https://www.cnblogs.com/lightsong/p/7604427.html
Copyright © 2011-2022 走看看