響應式設計狀態管理Javascript類庫-JavaScript State Manager

JavaScript State Manager是一種輕量級的、易於使用的狀態管理器,主要用於響應式網站。它不須要任何的JavaScript框架。你能夠定義斷點將運行在當前斷點的JavaScript代碼打包在一塊兒。javascript

圖片描述

  • 我爲何要使用SimpleStateManager而不是媒體查詢?java

媒體查詢容許您改變一個網站是基於一系列的條件,相反,SimpleStateManager容許你改變你的網站的功能。這樣,媒體查詢和SimpleStateManager稱讚對方,在狀況你改變網站的外觀也可能改變功能。框架

主要特性網站

  • 超輕量級spa

  • 不依賴任何第三方類庫code

  • 支持不一樣狀態添加刪除 - add/remove,擁有一個完整的API文檔blog

  • 支持擴展事件

示例代碼圖片

ssm.addState({
        id: 'mobile',
        maxWidth: 767,
        onEnter: function(){
            console.log('enter mobile');
        }
    });
     
    ssm.addState({
        id: 'tablet',
        minWidth: 768,
        maxWidth: 1023,
        onEnter: function(){
            console.log('enter tablet');
        }
    });
     
    ssm.addState({
        id: 'desktop',
        minWidth: 1024,
        onEnter: function(){
            console.log('enter desktop');
        }
    });
添加多個狀態
    ssm.addStates([
        {
            id: 'mobile',
            maxWidth: 767,
            onEnter: function(){
                console.log('enter mobile');
            }
        },
        {
            id: 'tablet',
            minWidth: 768,
            maxWidth: 1023,
            onEnter: function(){
                console.log('enter tablet');
            }
        },
        {
            id: 'desktop',
            minWidth: 1024,
            onEnter: function(){
                console.log('enter desktop');
            }
       }
    ]);

ssm.removeState('mobile'); //刪除單個狀態
ssm.removeStates(['tablet', 'mobile']); //刪除多個狀態

態添加後,須要調用ready()方法來觸發,以下:ip

ssm.ready();
  • 支持鏈式操做,以下:

ssm.addState({
        id: 'mobile',
        maxWidth: 767,
        onEnter: function(){
            document.getElementById('hero').style.backgroundColor = "#daa23e";
        }
    }).ready();

當屏幕大於979px的時候:
圖片描述
當小於979px的時候就會給他添加一些事件:
圖片描述

相關文章
相關標籤/搜索