EUI

EUI.CSS

常用基础、扩展性高的CSS模块库V0.2.0

引入EUI下一个WEB项目就从EUI开始吧

页面中引入EUI

在你自己项目的样式表之前使用<link>引入EUI到你页面的<head>中。

<link rel="stylesheet" href="../css/eui-min.css">

EUI引用路径修改成你自己的。

从Github上下载EUI

EUI是基于base.css添加了HTML元素的布局和样式，以及常用的UI组件。EUI提供最基础的样式，具有很高的扩展性，鼓励你基于此写出自己的样式。

按钮简单的CSS按钮样式

默认状态

给 <a> 或者 <button> 元素添加class eui-btn，可实现默认按钮样式。

EUI按钮 
<a href="#" class="eui-btn">EUI按钮</a>
<button class="eui-btn">EUI按钮</button>

禁用状态

先添加class eui-btn，再加 eui-btn-disabled。

EUI按钮禁用 
<a href="#" class="eui-btn eui-btn-disabled">EUI按钮禁用</a>
<button class="eui-btn eui-btn-disabled">EUI按钮禁用</button>

激活状态

先添加class eui-btn，再加 eui-btn-active，就可以看到“激活/按下”的效果。

EUI按钮激活 
<a href="#" class="eui-btn eui-btn-active">EUI按钮激活</a>
<button class="eui-btn eui-btn-active">EUI按钮激活</button>

常用的几种状态

根据常用状态，我们预定义了6种按钮样式：

<button class="eui-btn">默认样式</button>
<button class="eui-btn eui-btn-primary">首选项(Primary)</button>
<button class="eui-btn eui-btn-success">成功(Success)</button>
<button class="eui-btn eui-btn-info">一般信息(Info)</button>
<button class="eui-btn eui-btn-warning">警告(Warning)</button>
<button class="eui-btn eui-btn-danger">危险(Danger)</button>

自定义：eui-btn 只提供最基础简单的样式，自定义新的按钮非常的便捷，在添加class eui-btn 的基础上，再添加自己的class，只需要定义背景颜色、边框颜色以及字体颜色就行了。上面除了默认样式之外的其他5种预定义样式就是这样实现的。

自定义大小

根据常用状态，我们预定义了5种大小的按钮：

<button class="eui-btn btn-xs">很小按钮</button>
<button class="eui-btn btn-sl">小按钮</button>
<button class="eui-btn">正常按钮</button>
<button class="eui-btn btn-lg">大按钮</button>
<button class="eui-btn btn-xl">很大按钮</button>

添加图标

EUI提供了一套讯飞教育云项目的图标可以直接使用，也可以引入其他第三方框架的图标。在 eui-btn 里加个 <i> 元素。

暂无

表单简单的CSS表单样式

默认表单

给form添加class eui-form 就可以创建默认的单行表单。

一个简单的单行表单 
<form class="eui-form">
  <fieldset>
    <legend>一个简单的单行表单</legend>
    <input type="text" placeholder="帐号">
    <input type="password" placeholder="密码">
    <label for="remember">
      <input id="remember" type="checkbox"> 记住我
    </label>
    <button type="submit" class="eui-btn eui-btn-primary">登录</button>
  </fieldset>
</form>

上下式

先添加class eui-form，再加 eui-form-vertical。

上下式表单 
<form class="eui-form eui-form-vertical">
  <fieldset>
    <legend>上下式表单</legend>
    <label for="username">帐号：</label>
    <input id="username" type="text" placeholder="帐号">
    <label for="password">密码：</label>
    <input id="password" type="password" placeholder="密码">
    <label for="state">类型：</label>
    <select id="state">
      <option>学生</option>
      <option>教师</option>
      <option>管理员</option>
    </select>
    <label for="remember1" class="eui-block">
      <input id="remember1" type="checkbox"> 记住我
    </label>
    <button type="submit" class="eui-btn eui-btn-primary">登录</button>
  </fieldset>
</form>

左右式

先添加class eui-form，再加 eui-form-aligned。

<form class="eui-form eui-form-aligned">
  <fieldset>
    <div class="eui-control-group">
      <label class="eui-aligned-label" for="name">帐号</label><input id="name" type="text" placeholder="帐号">
    </div>
    <div class="eui-control-group">
      <label class="eui-aligned-label" for="password">密码</label><input id="password" type="password" placeholder="密码">
    </div>
    <div class="eui-control-group">
      <label class="eui-aligned-label" for="email">邮箱地址</label><input id="email" type="text" placeholder="邮箱地址">
    </div>
    <div class="eui-control-group">
      <label class="eui-aligned-label" for="langword">很长很长的文字是什么样的</label>
      <input id="langword" type="text" placeholder="输入框">
    </div>
    <div class="eui-controls">
      <label for="cb" class="eui-block">
        <input id="cb" type="checkbox"> 我已阅读条款和条件
      </label>
      <button type="submit" class="eui-btn eui-btn-primary">提交</button>
    </div>
  </fieldset>
</form>

input大小

EUI为Input 元素设置了6种大小，添加class： eui-input-* 就可以了。

6种大小分别是：100%eui-input-1、75%eui-input-3-4、66%eui-input-2-3、50%eui-input-1-2、33%eui-input-1-3、25%eui-input-1-4







<form class="eui-form">
  <input class="eui-input-1" type="text" placeholder=".eui-input-1"><br>
  <input class="eui-input-3-4" type="text" placeholder=".eui-input-3-4"><br>
  <input class="eui-input-2-3" type="text" placeholder=".eui-input-2-3"><br>
  <input class="eui-input-1-2" type="text" placeholder=".eui-input-1-2"><br>
  <input class="eui-input-1-3" type="text" placeholder=".eui-input-1-3"><br>
  <input class="eui-input-1-4" type="text" placeholder=".eui-input-1-4"><br>
</form>

input分组

标签 <fieldset> 加class eui-group 然后把input或textarea包起来，可实现分组的效果。

<form class="eui-form">
  <fieldset class="eui-group">
    <input type="text" class="eui-input-1-2" placeholder="帐号">
    <input type="password" class="eui-input-1-2" placeholder="密码">
    <input type="email" class="eui-input-1-2" placeholder="邮箱">
  </fieldset>
  <fieldset class="eui-group">
    <input type="text" class="eui-input-1-2" placeholder="另一个组">
    <textarea class="eui-input-1-2" rows="3" placeholder="多行填空"></textarea>
    <input type="text" class="eui-input-1-2" placeholder="其他选项">
  </fieldset>
</form>

禁用状态

添加 disabled 属性，禁止输入，禁止复制。

<form class="eui-form">
  <input type="text" placeholder="这个被禁用了" disabled>
  <textarea rows="2" placeholder="这个也被禁用了" disabled></textarea>
</form>

只读状态

添加 readonly 属性，禁止输入，但是可以选择复制。

<form class="eui-form">
  <input type="text" placeholder="这个是只读的" readonly>
  <textarea rows="2" placeholder="这个也是只读的" readonly></textarea>
</form>

圆角效果

添加class eui-input-rounded 可实现圆角效果。

<form class="eui-form">
  <input type="text" class="eui-input-rounded">
  <button class="eui-btn eui-input-rounded">查询</button>
</form>

表格简单的CSS表格样式

默认表格

给table添加class eui-table 可以添加默认的padding、border，同时突出表头。

序号 产品 任务名称 项目名称
1 智慧课堂 教师机 教学通及中心运营平台4.0
2 基线 DEMO畅言 科大讯飞区域教育 云平台4.0
3 英语考试 智能制卷工具 教育考试题库系统 1.0 
<table class="eui-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>任务名称</th>
      <th>项目名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>智慧课堂</td>
      <td>教师机</td>
      <td>教学通及中心运营平台4.0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>基线</td>
      <td>DEMO畅言</td>
      <td>科大讯飞区域教育 云平台4.0</td>
    </tr>
    <tr>
      <td>3</td>
      <td>英语考试</td>
      <td>智能制卷工具</td>
      <td>教育考试题库系统 1.0</td>
    </tr>
  </tbody>
</table>

有边框的表格

先添加class eui-table，再加 eui-table-bordered。

序号 产品 任务名称 项目名称
1 智慧课堂 教师机 教学通及中心运营平台4.0
2 基线 DEMO畅言 科大讯飞区域教育 云平台4.0
3 英语考试 智能制卷工具 教育考试题库系统 1.0 
<table class="eui-table eui-table-bordered">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>任务名称</th>
      <th>项目名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>智慧课堂</td>
      <td>教师机</td>
      <td>教学通及中心运营平台4.0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>基线</td>
      <td>DEMO畅言</td>
      <td>科大讯飞区域教育 云平台4.0</td>
    </tr>
    <tr>
      <td>3</td>
      <td>英语考试</td>
      <td>智能制卷工具</td>
      <td>教育考试题库系统 1.0</td>
    </tr>
  </tbody>
</table>

有水平边框的表格

先添加class eui-table，再加 eui-table-horizontal。

序号 产品 任务名称 项目名称
1 智慧课堂 教师机 教学通及中心运营平台4.0
2 基线 DEMO畅言 科大讯飞区域教育 云平台4.0
3 英语考试 智能制卷工具 教育考试题库系统 1.0 
<table class="eui-table eui-table-horizontal">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>任务名称</th>
      <th>项目名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>智慧课堂</td>
      <td>教师机</td>
      <td>教学通及中心运营平台4.0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>基线</td>
      <td>DEMO畅言</td>
      <td>科大讯飞区域教育 云平台4.0</td>
    </tr>
    <tr>
      <td>3</td>
      <td>英语考试</td>
      <td>智能制卷工具</td>
      <td>教育考试题库系统 1.0</td>
    </tr>
  </tbody>
</table>

条纹状表格

为了让比较大的表格看起来容易区分行。隔行添加class eui-table-odd 可实现条纹状的效果。

注意: 支持CSS3 伪类选择器 nth-child 的浏览器，给table添加class eui-table-striped 就可以自动生成条纹状效果，IE8及以下版本不支持。

序号 产品 任务名称 项目名称
1 智慧课堂 教师机 教学通及中心运营平台4.0
2 基线 DEMO畅言 科大讯飞区域教育 云平台4.0
3 英语考试 智能制卷工具 教育考试题库系统 1.0
4 架构平台 讯飞教育开放平台 畅言基础服务平台4.0 
<table class="eui-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>任务名称</th>
      <th>项目名称</th>
    </tr>
  </thead>
  <tbody>
    <tr  class="eui-table-odd">
      <td>1</td>
      <td>智慧课堂</td>
      <td>教师机</td>
      <td>教学通及中心运营平台4.0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>基线</td>
      <td>DEMO畅言</td>
      <td>科大讯飞区域教育 云平台4.0</td>
    </tr>
    <tr  class="eui-table-odd">
      <td>3</td>
      <td>英语考试</td>
      <td>智能制卷工具</td>
      <td>教育考试题库系统 1.0</td>
    </tr>
    <tr>
      <td>4</td>
      <td>架构平台</td>
      <td>讯飞教育开放平台</td>
      <td>畅言基础服务平台4.0</td>
    </tr>
  </tbody>
</table>

鼠标悬停

先添加class eui-table，再加 eui-table-hover。

序号 产品 任务名称 项目名称
1 智慧课堂 教师机 教学通及中心运营平台4.0
2 基线 DEMO畅言 科大讯飞区域教育 云平台4.0
3 英语考试 智能制卷工具 教育考试题库系统 1.0 
<table class="eui-table eui-table-hover">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>任务名称</th>
      <th>项目名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>智慧课堂</td>
      <td>教师机</td>
      <td>教学通及中心运营平台4.0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>基线</td>
      <td>DEMO畅言</td>
      <td>科大讯飞区域教育 云平台4.0</td>
    </tr>
    <tr>
      <td>3</td>
      <td>英语考试</td>
      <td>智能制卷工具</td>
      <td>教育考试题库系统 1.0</td>
    </tr>
  </tbody>
</table>

菜单简单的CSS菜单样式

纵向菜单

菜单默认就是纵向的，添加class eui-menu 就可以了。为了方便扩展这里尽量少的定义默认样式。默认情况下，菜单项是容器宽度的100%，所以一般需要设置宽度或 inline-block 。

畅言云 
<style>
  .custom-restricted-width {
      display: inline-block;
      /* or */
      /* width: 10em; */
  }
</style>
<div class="eui-menu custom-restricted-width">
  <span class="eui-menu-heading">畅言云</span>
  <ul class="eui-menu-list">
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">资源</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">空间</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">E学校</a></li>
    <li class="eui-menu-heading">应用中心</li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">撰写备课</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">课堂授课</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">辅导答疑</a></li>
  </ul>
</div>

横向菜单

先添加class eui-menu ，再加 eui-menu-horizontal 即可实现横向菜单效果，选中菜单class： eui-menu-current ，激活(:hover)状态class eui-menu-active 。可以给菜单增加一个标题使用class eui-menu-heading 。

畅言云 
<div class="eui-menu eui-menu-horizontal">
  <a href="#" class="eui-menu-heading">畅言云</a>
  <ul class="eui-menu-list">
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-item eui-menu-current"><a href="#" class="eui-menu-link">资源</a></li>
    <li class="eui-menu-item eui-menu-active"><a href="#" class="eui-menu-link">空间</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">E学校</a></li>
  </ul>
</div>

分隔线

分隔线的class是 eui-menu-separator 。

<div class="eui-menu eui-menu-horizontal">
  <ul class="eui-menu-list">
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-separator"></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">资源</a></li>
    <li class="eui-menu-separator"></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">空间</a></li>
  </ul>
</div>

<div class="eui-menu custom-restricted-width">
  <ul class="eui-menu-list">
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-separator"></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">资源</a></li>
    <li class="eui-menu-separator"></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">空间</a></li>
  </ul>
</div>

下拉菜单

下拉菜单一般需要使用JavaScript配合，推荐使用JavaScript的方法。如果不使用JavaScript，鼠标移入同样也可以实现下拉效果，只要给下拉菜单容器的父级增加样式 eui-menu-allow-hover 即可。样式 eui-menu-has-children 会给链接增加图标。本例没有使用JavaScript：

<div class="eui-menu eui-menu-horizontal">
  <ul class="eui-menu-list">
    <li class="eui-menu-item eui-menu-current"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-item eui-menu-has-children eui-menu-allow-hover">
      <a href="#" class="eui-menu-link">资源</a>
      <ul class="eui-menu-children">
        <li class="eui-menu-item"><a href="#" class="eui-menu-link">小学资源</a></li>
        <li class="eui-menu-item"><a href="#" class="eui-menu-link">初中资源</a></li>
        <li class="eui-menu-item"><a href="#" class="eui-menu-link">高中资源</a></li>
      </ul>
    </li>
  </ul>
</div>

纵向下拉菜单

和横向下拉菜单使用方法一样，支持多级嵌套子菜单。

<div class="eui-menu custom-restricted-width">
  <ul class="eui-menu-list">
    <li class="eui-menu-item eui-menu-current"><a href="#" class="eui-menu-link">首页</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">资源</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">空间</a></li>
    <li class="eui-menu-item"><a href="#" class="eui-menu-link">E学校</a></li>
    <li class="eui-menu-item eui-menu-has-children eui-menu-allow-hover">
      <a href="#" class="eui-menu-link">更多</a>
      <ul class="eui-menu-children">
        <li class="eui-menu-item"><a href="#" class="eui-menu-link">应用中心</a></li>
        <li class="eui-menu-item"><a href="#" class="eui-menu-link">撰写备课</a></li>
        <li class="eui-menu-item eui-menu-has-children eui-menu-allow-hover">
          <a href="#" class="eui-menu-link">更更多</a>
          <ul class="eui-menu-children">
            <li class="eui-menu-item"><a href="#" class="eui-menu-link">登录</a></li>
            <li class="eui-menu-item"><a href="#" class="eui-menu-link">注册</a></li>
            <li class="eui-menu-item"><a href="#" class="eui-menu-link">找回密码</a></li>
          </ul>
        </li>
      </ul>
  </ul>
</div>

表单美化简单的CSS表单美化样式

Checkbox

使用class eui-checkbox 包裹 chechbox 与样式操作区域 eui-check (默认为字符 \2713 ) 和文字说明区域 eui-caption (非必须)

<label class="eui-checkbox">
  <input type="checkbox" checked>
  <span class="eui-check"></span>
  <span class="eui-caption">多选框</span>
</label>
<label class="eui-checkbox">
  <input type="checkbox" disabled checked>
  <span class="eui-check"></span>
  <span class="eui-caption">多选框</span>
</label>
<label class="eui-checkbox">
  <input type="checkbox" disabled>
  <span class="eui-check"></span>
  <span class="eui-caption">多选框</span>
</label>

Radio

使用class eui-radio 包裹 radio 与样式操作区域 eui-check (默认为 #1d1d1d 纯色圆点，ie9+支持) 和文字说明区域 eui-caption (非必须)

<label class="eui-radio">
  <input type="radio" name="test-radio" checked>
  <span class="eui-check"></span>
  <span class="eui-caption">单选框</span>
</label>
<label class="eui-radio">
  <input type="radio" name="test-radio">
  <span class="eui-check"></span>
  <span class="eui-caption">单选框</span>
</label>
<label class="eui-radio">
  <input type="radio" name="test-radio" disabled>
  <span class="eui-check"></span>
  <span class="eui-caption">单选框</span>
</label>

Select

目前纯css方法美化Select控件并无什么好的方法，我们借助javascript来实现，使用一个Jquery插件。

使用方法：

  1. 在页面中引入Jquery及jquery.selectbeautify两个JS文件；
  2. 给正常的select增加class eui-select 即可。
<select class="eui-select" name="select1">
  <option>Select控件</option>
  <option>正常文字下拉</option>
  <option>文字超长菜单的菜单如何显示</option>
  <option>option子项1</option>
  <option>option子项2</option>
</select>

<select class="eui-select" style="width: 120px;" name="select2">
  <option>Select控件</option>
  <option>正常文字下拉</option>
  <option>文字超长菜单的菜单如何显示</option>
  <option>option子项1</option>
  <option>option子项2</option>
</select>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbeautify.js"></script>

备注：页面中出现多个select控件的时候，必须为每个select设置name或id。

Input[type=file]

上传控件默认的样式在不同的浏览器下表现不尽相同，可以通过css来统一显示效果。

EUI提供三种美化效果：

  1. 单按钮
  2. 文本框加文字
  3. 文本框加按钮

选择文件 

<a href="javascript:;" class="eui-file">选择文件<input type="file"></a>

<span class="eui-file">
  <input type="text" readonly id="viewfile" placeholder="请选择文件...">
  <label>选择文件</label>
  <input type="file" onchange="document.getElementById('viewfile').value=this.value;">
</span>

<span class="eui-file-btn">
  <input type="text" readonly id="viewfile1" placeholder="请选择文件...">
  <input type="button" value="上传">
  <input type="file" onchange="document.getElementById('viewfile1').value=this.value;">
</span>

单独使用

EUI的每个模块都可以单独出来独立使用，按钮、表单、表格、菜单四大基础模块不提供单独的下载，有需要的可以自行下载SASS源码进行生成。表单美化模块提供了单独使用的CSS。

  1. 未压缩版：eui-form-beautify.css，Github地址：eui-form-beautify.css
  2. 压缩版：eui-form-beautify-min.css，Github地址：eui-form-beautify-min.css

常用布局常用的一些布局及模块

登录
请输入账号！
找回密码
注册

（英文、数字和下划线组合，首字母为英文，不超过12位！
（密码长度6~15位）
UUBA
发送验证码
文字列表
图片列表
hot图片占位
这是图片列表演示
new图片占位
这是图片列表演示
图片占位
这是图片列表演示
图片占位
这是图片列表演示
图片占位
这是图片列表演示
图片占位
这是图片列表演示
图片占位
这是图片列表演示
图片占位
这是图片列表演示
图文列表
图片占位
这是图文列表演示

这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容

图片占位
这是图文列表演示

这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容这是图文列表演示内容

图片占位
其他
完善中...

常用插件常用的一些插件推荐

SuperSlide

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！还可以多个SuperSlide组合创造更多效果哦~（兼容包括ie6的绝大部分浏览器）点击直达 >>

Animate.css

Animate.css内置了很多典型的css3动画，兼容性好使用方便。Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。点击直达 >>

Perfect-Scrollbar

Perfect Scrollbar 是一个轻量级的（~14KB）的 jQuery插件，能够帮助你轻松创建出自定义风格的滚动条。它不会影响默认的布局，也不需要任何任何的 CSS 修改，该插件适用于任何大小的容器，并重新安排位置，如果容器大小发生变化会自动调整位置。此外，滚动条的风格可以完全通过 CSS 定制，另外还支持鼠标滚轮插件 – jquery-mousewheel。点击直达 >>

更多插件

等你推荐