Skel
Skel is a lightweight framework for building responsive sites and web apps. Features include:
skel是一個(gè)輕量級(jí)的構(gòu)建響應(yīng)式頁(yè)面的框架垛吗，特點(diǎn)包括：
Access to CSS breakpoints via JS (enabling stuff like
if (skel.breakpoint("small").active) { /* do something specific for small displays */ }).
通過js訪問css斷點(diǎn)，例如：if (skel.breakpoint("small").active) { /* do something specific for small displays */ }.表示在小型的屏幕上要做的事情Events, including the commonly used (
load,ready) and special ones just for breakpoints (+breakpoint,-breakpoint).
事件，包括經(jīng)常使用的“l(fā)oad”，“ready”，還有特殊的事件：“+breakpoint”,"-breakpoint"Vars, for convenient access to information about the client's browser, operating system, and more.
變量，為了方便訪問、連接客戶的瀏覽器的信息等Extendable with modules (like Layout and Viewport).
可拓展的模塊尾抑，例如layout和viewport
Usage-使用方法
Load skel.min.js (either in your <head> tag or before </body> -- doesn't matter) to create the global skel object:
加載skel.min.js歇父，無(wú)論在head標(biāo)簽中還是body標(biāo)簽中都不要緊，
<script src="skel.min.js"></script>
Then use skel.breakpoints() to define your breakpoints (each consisting of a name and a media query):
然后使用skel.breakpoints()方法來明確你的斷點(diǎn)再愈，（可以由 name 或者以媒體查詢組成）
skel.breakpoints({
xlarge: "(max-width: 1680px)",
large: "(max-width: 1280px)",
medium: "(max-width: 980px)",
small: "(max-width: 736px)",
xsmall: "(max-width: 480px)"
});
That's pretty much it. You can now do stuff like:
差不多就是這個(gè)樣子了榜苫，你可以想下面這樣做一些事情了：
skel
.on("ready", function() {
/* do DOM ready stuff
做DOM準(zhǔn)備工作
*/
if (skel.breakpoint("small").active) {
/* do something specific for small displays
做一些為小型顯示器特定的一些工作
*/
}
if (skel.vars.touch) {
/* enable feature for devices with a touchscreen
為觸摸設(shè)備寫一些特征
*/
}
if (skel.vars.IEVersion < 9) {
/* apply workaround for IE<9
針對(duì)IE9寫的一些方法
*/
}
})
.on("+large", function() {
/* do something when "large" breakpoint becomes active
當(dāng)large斷點(diǎn)變活躍時(shí)要做的事
*/
})
.on("-large !large", function() {
/* do something when "large" breakpoint is (or becomes) inactive
做一些事情當(dāng)large斷點(diǎn)為活躍或者要抵達(dá)這個(gè)斷點(diǎn)的時(shí)候*/
});
Breakpoints-斷點(diǎn)是什么？
Skel's primary feature is its ability to make CSS breakpoints accessible via JS. To set this up, simply call skel.breakpoints() with a list of media queries (presumably mirroring those found in your CSS) in the following format:
skel主要的特稱是通過js來控制css的斷點(diǎn)翎冲，通過簡(jiǎn)單的調(diào)用skel.breakpoints()垂睬，傳遞一個(gè)媒體查詢列表來設(shè)置斷點(diǎn)，格式如下
skel.breakpoints({
name: "media query",
name: "media query",
name: "media query",
...
});
Where name is a unique identifier for each breakpoint (eg. medium). For example, the following defines 5 breakpoints (xlarge, large, medium, small, and xsmall):
skel.breakpoints({
xlarge: "(max-width: 1680px)",
large: "(max-width: 1280px)",
medium: "(max-width: 980px)",
small: "(max-width: 736px)",
xsmall: "(max-width: 480px)"
});
With these in place, individual breakpoint objects can be retrieved using skel.breakpoint(), for example:
在這些地方抗悍， 私有的斷點(diǎn)對(duì)象可以檢索到斷點(diǎn)驹饺，使用skel.breakpoint(),例如：
// Get the "small" breakpoint object. 獲取small這個(gè)斷點(diǎn)的對(duì)象
var x = skel.breakpoint("small");
Breakpoint objects have the following properties:
斷點(diǎn)對(duì)象有下面這些屬性，active缴渊、wasActive赏壹、name、media
-
active(bool) Set to
trueif the breakpoint is currently active (ie. the current state of the viewport satisfies its media query), orfalseif not.布爾型對(duì)象衔沼，如果當(dāng)前斷點(diǎn)是活躍的蝌借，那么設(shè)置為true，當(dāng)前的時(shí)候狀態(tài)滿足媒體查詢的規(guī)定指蚁，如果不是菩佑，那么是false；
-
wasActive(bool) Set to
trueif the breakpoint was active before the last state change, orfalseif not.
布爾型凝化，如果目標(biāo)斷點(diǎn)在最后的狀態(tài)改變之前是wasactive的狀態(tài)稍坯，那就是true，反之是false缘圈； -
name(string) The breakpoint's name.
字符串，這個(gè)是斷點(diǎn)的名字袜蚕。 -
media(string) The breakpoint's media query.
字符串糟把，斷點(diǎn)是媒體查詢
Events-- 事件
Skel provides a small set of common and breakpoint-oriented events. Handlers can be bound to these events using skel.on(), like so:
skel.on("event", function() {
/* do stuff */
});
You can also bind a single handler to multiple events by providing them in a space-delimited list:
skel.on("event1 event2 ...", function() {
/* do stuff */
});
The following events are currently supported:
-
changeTriggered when one or more breakpoints become active or inactive.
skel.on("change", function() { alert("Breakpoints changed!"); }); -
initTriggered when Skel initializes.
skel.on("init", function() { alert("Initialized!"); }); -
readyTriggered when the DOM is ready.
skel.on("ready", function() { alert("DOM is ready!"); }); -
loadTriggered when the page loads.
skel.on("load", function() { alert("Page has finished loading!"); }); -
+breakpointNameTriggered when
breakpointNamebecomes active. For example:skel.on("+small", function() { /* Turn on feature for small displays */ }); -
-breakpointNameTriggered when
breakpointNamebecomes inactive. For example:skel.on("-small", function() { /* Turn off feature for small displays */ }); -
!breakpointNameTriggered if
breakpointNameis not active at the exact moment you callskel.breakpoints(). For example:skel.on("!small", function() { /* Turn on feature for non-small displays */ });
Vars
Skel exposes basic information about the client (such as its browser and operating system) through the skel.vars property. For example:
alert("Your browser is " + skel.vars.browser);
This information can, among other things, be used to apply browser (and even operating system) specific workarounds for those rare but frustratingly annoying moments where feature detection fails. The following vars are currently available:
-
browser(string) Client's browser, which can be any of the following:
Browser Value of browserFirefox firefoxChrome chromeSafari safariOpera operaInternet Explorer ieEdge edgeBlackBerry bbOther other -
browserVersion(float) Client's browser version.
-
IEVersion(float) If the client is using any version of IE, this will be set to its version number (eg.
8for IE8,11for IE11). However, if they're using anything other than IE, this will be set to99, effectively reducing legacy IE checks to a single condition. For example:if (skel.vars.IEVersion < 9) { /* This will only execute if the client's using IE AND its version is <9 */ } -
os(string) Client's operating system, which can be any of the following:
Operating System Value of osAndroid androidiOS iosWindows Phone wpMac OS X macWindows windowsBlackBerry bbOther other -
osVersion(float) Client's operating system version.
-
touch(bool) Set to
trueif the client is using a device with a touchscreen, orfalseif not.Note: A value of
truedoes not imply the abscence of a mouse and keyboard. -
mobile(bool) Set to
trueif the client is using what's considered a "mobile OS" (currently iOS, Android, Windows Phone, and BlackBerry), orfalseif not. Equivalent to:(skel.vars.os == "wp" || skel.vars.os == "android" || skel.vars.os == "ios" || skel.vars.os == "bb") -
stateId(string) Current state ID. A state, in Skel terms, is a specific combination of active breakpoints, and a state ID is the unique identifier used to reference that state internally. For example, given the breakpoints
medium,small, andxsmall(defined in that exact order):Active Breakpoints Value of stateIdmedium/mediumsmall/smallsmallandxsmall/small/xsmall(none) /While
stateIdis primarily meant for Skel's own internal use, it can come in handy elsewhere (eg. to perform an action when a very specific combination of breakpoints is active). -
lastStateId(string) The value of
stateIdbefore the last state change, ornullif the state hasn't changed yet.
Credits
- DOMReady (http://github.com/ded/domready | (c) Dustin Diaz | MIT license)
- matchMedia (http://github.com/paulirish/matchMedia.js | (c) Scott Jehl, Paul Irish, Nicholas Zakas, David Knight | Dual MIT/BSD license)
- UMD Wrapper (http://github.com/umdjs/umd/blob/master/returnExports.js | @umdjs + @nason)
License
Skel is released under the MIT license.
Copyright (c) skel.io
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
