/x-eq

x Element Query

Primary LanguageJavaScript

x-eq

NPM version GitHub version

x Element Query.

Install

Node

npm install --save x-eq

Usage

新添加了四个 element query: max-width, max-height, min-width, min-height

div[max-width~=800px] {
  /* ... */
}

div[max-width~=600px] {
  /* ... */
}

Example

Notice

  • 因为需要用到属性选择器，所以最低支持到 IE7；另外 IE7 需要引入 jQuery 1.x.x，而且 IE7 中只能支持 px 单位，其它单位不支持
  • 跨域的 stylesheet 不会处理，带 data-xeq-bypass 属性的 stylesheet 也不会处理
  • 如果不想要脚本自动运行（通常 install/uninstall 之前需要禁止脚本自动运行），需要要引用此脚本之前设置 window.noAutoRunXEQ = true;

API

install(key, fn)

安装一个 key, fn 的参数是 (element, attribute)；

attribute 是一个 Object，包含下面几个属性

  • glue: 可以是 ''、'=', '*=', '^=', '$=', '~='
  • value: 当只有属性名时，此值是 true，否则是指定的字符串
  • numberValue: 如果 value 是个单位值，此值会将 value 转化成 px 单位，并只返回数字部分

当 fn 返回 true，表示需要添加此 attribute；否则删除此 attribute

uninstall(key)

删除安装了的 key

refresh()

当浏览器 resize 事件后，自动会执行 refresh；如果程序中有改变 DOM 大小，需要手动运行 refresh

run()

如果禁用了自动运行，或者有新的 key install，或有旧的 key uninstall，都需要重新 run

Reference

Browser CDN

x-eq.0.1.1.min.js

x-eq.0.1.1.js

x-eq.0.1.0.min.js

x-eq.0.1.0.js

x-eq.0.0.1.min.js

x-eq.0.0.1.js

License

Copyright (c) 2015 Zhonglei Qiu. Licensed under the MIT license.