JavaScript State Manager是一种轻量级的、易于运用的状况管理器,重要用于相应式网站。它不须要任何的JavaScript框架。你能够定义断点将运转在当前断点的JavaScript代码打包在一起。
我为何要运用SimpleStateManager而不是媒体查询?
媒体查询许可您转变一个网站是基于一系列的前提,相反,SimpleStateManager许可你转变你的网站的功用。如许,媒体查询和SimpleStateManager赞美对方,在状况你转变网站的表面也能够转变功用。
重要特征
超轻量级
不依赖任何第三方类库
支撑差别状况增加删除 – add/remove,具有一个完全的API文档
支撑扩大
示例代码
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()方法来触发,以下:
ssm.ready();
支撑链式操纵,以下:
ssm.addState({
id: 'mobile',
maxWidth: 767,
onEnter: function(){
document.getElementById('hero').style.backgroundColor = "#daa23e";
}
}).ready();
当屏幕大于979px的时刻:
当小于979px的时刻就会给他增加一些事宜: