Skel

Skel是一个用于构建响应式网站和Web应用程序的轻量级框架。功能包括

- 通过JS访问CSS断点（启用类似的东西if (skel.breakpoint(“small”).active) { /* do something specific for small displays */ }）。

- Events, 事件，包括常用的（load，ready）和特殊的断点（+breakpoint，-breakpoint）。

- Vars,用于方便地访问有关客户端浏览器，操作系统等的信息。

- 可通过模块扩展（如Layout和Viewport）。

用法

加载skel.min.js（在标记中或之前- 无关紧要）以创建全局skel对象：

<script src="skel.min.js"></script>

然后使用skel.breakpoints()来定义断点 breakpoints (每个断点由a name 和a _media query_组成):

skel.breakpoints({
    xlarge: "(max-width: 1680px)",
    large:  "(max-width: 1280px)",
    medium: "(max-width: 980px)",
    small:  "(max-width: 736px)",
    xsmall: "(max-width: 480px)"
});

现在可以执行以下操作：:

skel
    .on("ready", function() {

        /* do DOM ready stuff */

        if (skel.breakpoint("small").active) {
            /* do something specific for small displays */
        }

        if (skel.vars.touch) {
            /* enable feature for devices with a touchscreen */
        }

        if (skel.vars.IEVersion < 9) {
            /* apply workaround for IE<9 */
        }

    })
    .on("+large", function() {
        /* do something when "large" breakpoint becomes active */
    })
    .on("-large !large", function() {
        /* do something when "large" breakpoint is (or becomes) inactive */
    });

Breakpoints

Skel的主要功能是能够通过JS访问CSS断点。要进行此设置，只需skel.breakpoints()使用以下格式调用媒体查询列表（可能是镜像CSS中的查询:

skel.breakpoints({
    name: "media query",
    name: "media query",
    name: "media query",
    ...
});

其中name是每个断点的唯一标识符（例如medium）。例如，以下定义了5个断点（xlarge，large，medium，small，和xsmall）：

skel.breakpoints({
    xlarge: "(max-width: 1680px)",
    large:  "(max-width: 1280px)",
    medium: "(max-width: 980px)",
    small:  "(max-width: 736px)",
    xsmall: "(max-width: 480px)"
});

有了这些，可以使用以下方法检索单个断点对象skel.breakpoint()，例如:

// Get the "small" breakpoint object.
var x = skel.breakpoint("small");

断点对象具有以下属性:

• active(bool)

true: 断点当前处于活动状态 (即视口的当前状态是否满足其媒体查询), false 与之相反.

• wasActive(bool)

Set to true 最后的断点开边之前是活跃的, false 与之相反.

• name(string)

断点的名称。.

• media(string)

断点的媒体查询。.

Events

Skel提供一小组常见和断点导向的事件。处理程序可以绑定到这些事件skel.on()，如下所示:

skel.on("event", function() {
    /* do stuff */
});

您还可以通过在空格分隔的列表中提供单个处理程序将它们绑定到多个事件:

skel.on("event1 event2 ...", function() {
    /* do stuff */
});

目前支持以下事件:

• change

  当一个或多个断点变为活动或非活动时触发。.

skel.on("change", function() {
    alert("Breakpoints changed!");
});

• init

  Skel初始化时触发.

skel.on("init", function() {
    alert("Initialized!");
});

• ready

DOM准备就绪时触发。

skel.on("ready", function() {
    alert("DOM is ready!");
});

• load

  页面加载时触发。

skel.on("load", function() {
    alert("Page has finished loading!");
});

• +breakpointName

breakpointName激活时触发。例如:

skel.on("+small", function() {
/* Turn on feature for small displays */
});

• -breakpointName

breakpointName变为非活动状态时触发。例如:

skel.on("-small", function() {
/* Turn off feature for small displays */
});

• !breakpointName

如果breakpointName在未激活，则触发skel.breakpoints():

skel.on("!small", function() {
/* Turn on feature for non-small displays */
});

Vars

Skel通过skel.vars属性公开有关客户端（例如其浏览器和操作系统）的基本信息。例如:

alert("Your browser is " + skel.vars.browser);

目前提供以下变量:

• browser(string)

  客户端的浏览器和对应的值:

• browserVersion(float)

  客户端的浏览器版本.

• IEVersion(float)

  如果客户端使用任何版本的IE，则将其设置为其版本号（例如，8对于IE8，11对于IE11）。但是，如果他们使用任何其他比IE，这将被设置为99，有效地降低了传统IE检查一个条件。例如:

if (skel.vars.IEVersion < 9) {
    /* This will only execute if the client's using IE AND its version is <9 */
}

• os(string)
  操作系统和对应的值:

• osVersion(float)

  客户端的操作系统版本.

• touch(bool)

  true:客户端使用的设备具有触摸屏,false: 与之相反.

注意: true并不能意味着鼠标和键盘的abscence.

• mobile(bool)

  true:客户端使用的是移动端系统,false: 与之相反.:

(skel.vars.os == "wp" || skel.vars.os == "android" || skel.vars.os == "ios" || skel.vars.os == "bb")

• stateId(string)

  当前状态ID。Skel术语中的状态是活动断点的特定组合，状态ID是用于在内部引用该状态的唯一标识符。例如，给定断点medium，small和xsmall（以确切顺序定义）:

虽然stateId主要用于Skel自己的内部使用，但它可以在其他地方派上用场（例如，当非常特定的断点组合处于活动状态时执行操作）.

• lastStateId(string)

stateId 上次状态更改之前的值，或者null状态尚未更改的值。

英文文档