组件 / Components v1.0.0

无数可复用的组件,包括表单组、网格布局、导航、警告框、弹出框、窗口、遮罩等功能及已设计好的常用类。

提示:部分组件需配合 (gQueryUI) GQUI.js 使用。

文本 / Text

拥有 0~12 种不同的字体大小型号,从 12px 到 3.5rem,能满足设计时的绝大部份字体大小需求。

.fs-0gQuery
.fs-1gQuery
.fs-2gQuery
.fs-3gQuery
.fs-4gQuery
.fs-5gQuery
.fs-6gQuery
.fs-7gQuery
.fs-8gQuery
.fs-9gQuery
.fs-10gQuery
.fs-11gQuery
.fs-12gQuery
.fwgQuery
.fcgQuery
.frgQuery
.t-hgQuery
.t-linegQuery gQuery gQuery

文稿 / Article

在文章、介绍、详情等图文类页面都可使用该组件,且仅需给内容元素的父级容器添上 .article 即可。在 .article 内的 h1 \ h2 \ h3 \ h4 \ h5 \ p \ a \ ul li 等常用标签都将被统一样式。

h1 ~ h5 对应五种大小的标题样式,其中 h2 和 h4 区分于其他标题,并且 h2 会向上留白 80px 用于 # 锚点跳转后友好显示。

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

此外,在文稿容器里的 ul 列表也将被美化,若需对 ol 或外部列表进行美化,请为其添加 .gl-list class。

  • gQuery
  • gQuery UI
  • made with ❤
  • by Ganxiaozhe
  • 你好gQuery
  • gQuery UI
  • made with ❤
  • by Ganxiaozhe
  • gQuery
  • gQuery UI
  • made with ❤
  • by Ganxiaozhe
  • gQuery
  • gQuery UI
  • made with ❤
  • by Ganxiaozhe

当为 table 添加 .gl-list class 时:

类型CPU内存SSD上传宽带下载宽带
纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+
类型CPU内存SSD上传宽带下载宽带
纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+
类型CPU内存SSD上传宽带下载宽带
纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+
类型CPU内存SSD上传宽带下载宽带
纯净服2.5+ GHz10 GB+60 GB+30 MBps+15 MBps+
插件服2.5+ GHz10 GB+120 GB+30 MBps+15 MBps+
MOD服3+ GHz10 GB+200 GB+150 MBps+100 MBps+

其中 .ox-wrapper 配合有最小宽度属性的表格,用于解决表格过宽在移动端(窄屏)无法友好显示的问题。

代码 / Code

对于代码展示,GQUI 提供了行内代码、代码块以及代码列三种方式得以适应不同环境。

代码列支持通过 GQUI.js 自动生成。并且支持自动适配 highlight.js 完成代码高亮,您只需在引入 GQUI.js 之前引入 highlight.js 即可。

这是一个行内代码:inline-code
我是一个代码块
1我是一个代码列
2我是一个代码列
我是一个自动生成的代码列
我是一个自动生成的代码列
# 我支持"#"注释
这是一个行内代码:inline-code
我是一个代码块
1我是一个代码列
2我是一个代码列
我是一个自动生成的代码列
我是一个自动生成的代码列
\# 我支持"#"注释

按钮 / Button

默认提供四种不同尺寸,其中 .fluid 支持和其他三种尺寸组合:



以及三种风格的外衣,其中按钮 .line 在鼠标悬停时显示的背景色来源于变量 --primary-0



四种不同状态:



借助伪类选择器,使得它们在 disabled 状态下也可得以区分:



同时,通过丰富的 bg 背景色,可满足绝大部分的设计需求。需要注意的是,在使用渐变背景色时,可通过添加 .nbr 以避免 transparent 漏色情况。(如果你、客户或产品经理有强迫症的话)

下拉框组件通过 GQUI.js 提供比 <select> 更丰富的视图及功能,一个基础的下拉框由 inputicontext 以及 select-list 组成,获取下拉框的值只需获取其中 input 的值即可。

select-list 中仅有 i 类元素可供选择,tag 类选项将作于分类标题。若相应的元素没有 data-value 属性,则将用其文本内容作为值。



当选择元素过多时,可以通过添加搜索框以过滤数据:



或者直接给 <select> 元素 dropdown 类,不过该方法不支持向选择列表嵌入图片等元素。

select 元素中第一个空值的 option 元素将作为 dropdown 的提示文本,其余空值元素将作为分类标题。





输入框 / Input

输入框通过 .input class 以对应:






相同的,提供多种不同尺寸:








通过 .input-group 创建输入框组,可在输入框前后两边加上文字或按钮,以实现对表单控件的扩展:

https://gxzv.com/u/
@gxzv.com
input-group
input-group
https://gxzv.com/u/
@gxzv.com
input-group
input-group


简单的 select 选择列表也可用此方法:

input-group
input-group


相比,小蔗更推荐使用 .select-list 实现,详见:下拉框 - Dropdown

  1. Select One
  2. Select Two
  3. Select Three
  4. Select Four
  1. Select One
  2. Select Two
  3. Select Three
  4. Select Four
  1. Select One
  2. Select Two
  3. Select Three
  4. Select Four
  1. Select One
  2. Select Two
  3. Select Three
  4. Select Four

除此之外,在使用 checkbox 时,给其 id 前缀 cb- 即可在其后紧跟一个 label 以自定义选择框控件样式。



其他控件也可用此类方法:

文件上传 / Input Upload

上面通过 label 的方法对文件拖拽上传并不友好,小蔗建议使用 .upload-wrapper 代替:

将文件拖拽到此,或单击直接上传
将文件拖拽到此,或单击直接上传

值得注意的是,.upload-wrapper 只提供容器及其容器内 input[type="file"] 元素的样式。

进度条 / Progress

25%
50%
68%
25%
50%
68%

单独使用:

88%
88%
100%
88%
88%
100%

标签 / Label

通过 .gl-label 可添加小、中、大三种标签:

Label
Label
Label
Label
Label
Label

通过配合其他组件,可轻松完成效果设计:

震惊!甘小蔗竟被...
New
3525
345
震惊!甘小蔗竟被...
New
3525
345

其中第三行的 .mt-sm-2text-align: right; 用于优化在移动端窄屏下的显示效果。


Ganxiaozhe Lv.1 VIP
乌云自己遮住了太阳,它却怨天空不够明朗。
Ganxiaozhe Lv.1 VIP
乌云自己遮住了太阳,它却怨天空不够明朗。

其中头像的 min-width: 64px; 用于防止 flex.nwp 的布局属性 flex-wrap: nowrap 导致图片挤压变形。

卡片 / Card

卡片组件由图片和文字部分组成,文字部分包括标题、小标题以及详细内容:

卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。

卡片设计通常搭配 Grid 网格布局使用:

卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。
卡片大标题
卡片小标题
卡片介绍卡片介绍卡片介绍,卡片大标题支持溢出两行自动换为省略号。

窗口 / Window

窗口组件由 header 和 body 组成,其中 header 由 .bullets \ .operation \ .title 三部分组成。

GQUI 窗口标题
一个简单的窗口
GQUI 窗口标题
一个简单的窗口

GQUI 窗口标题
猫猫日记
2020.12.28 晚 阴转多云
居然真的有男孩子愿意大晚上跑过来给我送吃的,我真的很感动,就是配送费贵了些。
GQUI 窗口标题
猫猫日记
2020.12.28 晚 阴转多云
居然真的有男孩子愿意大晚上跑过来给我送吃的,我真的很感动,就是配送费贵了些。

对话框 / Dialog

弹出框需要引入 GQUI.js 后使用,最基础的弹出框仅需标题及其内容:

$.ui.alert({
    title: '标题',
    message: '提示信息,支持 HTML'
});


自定义函数调用:

$.ui.alert({
    title: '标题',
    message: '提示信息,支持 HTML',
    yes: function(){
        alert('你知道了!');
    },
    no: function(){
        alert('你还没懂!');
    },
});

及其按钮样式:

$.ui.alert({
    title: '标题',
    message: '提示信息,支持 HTML',
    yes: function(){
        alert('你知道了!');
    },
    yes_btn: '我知道了',
    no: function(){
        alert('你还没懂!');
    },
    no_btn: '我还没懂'
});

同样的,支持依次传入多参数实现简写。比如上诉内容可用以下简写代码实现:

$.ui.alert('标题', '提示信息,支持 HTML',
    function(){
        alert('你知道了!');
    }, function(){
        alert('你还没懂!');
    }
);
$.ui.alert('标题', '提示信息,支持 HTML',
    function(){
        alert('你知道了!');
    }, function(){
        alert('你还没懂!');
    }, '我知道了', '我还没懂'
);


对于更复杂的设计需求,可用 buttons 对象数组自定义按钮:

$.ui.alert({
    title: '标题',
    message: '提示信息,支持 HTML',
    buttons: [
        {val: '我知道了', func: function(){
            alert('你知道了!');
        }, class: 'info'},
        {val: '我还没懂', func: function(){
            alert('你还没懂!');
        }, class: 'cancel'},
        {val: '再说一遍', func: function(){
            alert('啊!?');
        }, class: 'danger'},
    ]
});

弹出框 / Alert

弹出框需要引入 GQUI.js 后使用,弹出框的用法和上面的对话框一致,只是多了 type:Stringposition:Stringtimer:Number 三个参数。

$.ui.alert({
    title: '标题',
    type: 'alert'
});

其中 message:String 变为了可选参数,在添加后其标题会变得更大更硬

$.ui.alert({
    title: '我更大了',
    message: '我是内容。I am content. Je suis content.',
    type: 'alert'
});

可通过 buttons: false 取消所有按钮:

$.ui.alert({
    title: '🦟 我只是一段文字',
    type: 'alert',
    buttons: false
});

不过对于这类既没有按钮又没有自动关闭时间的流氓弹出框,GQUI 会自动将其自动关闭时间设为 4000ms,或通过 timer:Number 属性自定义:

$.ui.alert({
    title: '👀 我眨眼一晃而过',
    type: 'alert',
    buttons: false,
    timer: 1000
});

其中,position:String 参数用于控制弹窗的位置,目前暂时支持 5 个不同位置,分别是:top-lefttop-rightcenterbottom-leftbottom-right

$.ui.alert({
    title: '🦟 我只是一段文字',
    type: 'alert',
    position: 'center'
});

提示气泡 / Poptip

提示气泡需要引入 GQUI.js 后使用。通过给需要弹出提示的元素添加 .poptip 类声明及 data-tip 属性控制弹出内容:


若当提示内容过多,或需使用变量时,可用过 {var} 调用全局变量,该方法使用 Function 而非 eval()

分页 / Pagination

分页组件非常简单,在简洁美观的同时满足易点击、易缩放、点击区域大等优点。同时,为了便于自定义,可以通过其他元素加上 .p 类以取代 a 元素。

« 1 2 3 4 5 »

在分页栏中,可给元素添加 .active 类以标注为当前页面,且建议将该元素用 span 取代,并添加 .p 类让其保持需要的样式而不能被点击。

« 1 2 3 4 5 »

该组件也提供大、中、小三种尺寸:

...
...
...



同时,GQUI.js 提供 $.ui.page() 自动生成分页栏,只需要传入需要输出分页的元素对象或选择器、当前页、总页数及查询构造即可。

$.ui.page({
    target: '#ex-p1',
    current: 7, total: 20,
    query: '/ui?page='
});

若要使用 Ajax 技术,只需对 query 属性传入处理函数即可:

let pageMgmt = {
    cur: 1,
    init: function(){
        let _this = this;
        $.ui.page({
            target: '#ex-p2',
            current: _this.cur, total: 20,
            query: function(){
                _this.goto(this.innerText);
            }
        });
    },
    goto: function(page){
        this.cur = page;
        console.log('跳转页面至:'+page);
        this.init();
    }
};
$(function(){
    pageMgmt.init();
});

零件 / Parts

类名作用效果
.hide隐藏If I should meet thee
.hide-pc在宽屏时隐藏After long years,
.hide-pe在窄屏时隐藏How should I greet thee?
.click鼠标可点击手型Click me
.nsel不可选中试试选中我
.gl-overlay 遮罩蒙版,通过 absolute 适应父级元素宽高,默认 z-index 为 0。 被遮罩元素
遮罩上元素
.gl-panel面板块设计组件
panel
.gl-shadow阴影
.gl-shadow-f阴影,支持不规则图形
.gl-avatar头像框