插件描述：为 Web 应用提供了一些基础的 UI 组件，主要应用于 PC 界面。我们将大部分原先组件需要编写多行 HTML 代码才能实现的效果，封装为单行或少量的 HTML 代码，并且提供了部分 API 用于实现组件，另外我们还将持续优化和更新更多的 UI 组件。
更新时间：2020-10-11 23:14:10
演示只列出个别事例，请下载查看全部
JView UI
JView UI，是一套基于 JQuery 的开源 UI 组件库，为 Web 应用提供了一些基础的 UI 组件，主要应用于 PC 界面。我们将大部分原先组件需要编写多行 HTML 代码才能实现的效果，封装为单行或少量的 HTML 代码，并且提供了部分 API 用于实现组件，另外我们还将持续优化和更新更多的 UI 组件。
概要
简短精悍、可识别度高的组件 HTML 标签
减少编写的 HTML 代码量，尽量避免冗余且庞大的结构
非常适合于小中型网页的使用
细致、漂亮的 UI
事无巨细的文档
友好的 API
安装
CSS 文件
将 JView 的 CSS 文件以 <link> 标签的形式添加到 <head> 标签中，并放置在所有其它样式表之前。
1 | <link rel="stylesheet" href="JView.min.css"></link> |
JS 文件
JView 所提供的许多组件都依赖与 jQuery 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到页面 <body> 标签之前即可起作用。引入顺序为： 先引入 jQuery，然后是 我们的 JavaScript 插件。
1 2 | <script src="JView.min.js"></script> |
组件示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- alert组件示例 --> <j-alert message="Hello, world! 这是一条提示消息来自alert组件"></j-alert> <!-- 1.引入jQuery --> <!-- 2.引入JView Js --> <script src="JView.min.js"></script> <script> $(() => { // Message组件示例 $.Message.info("这是一条消息提示，来自Message组件"); //Notice 组件示例 $.Notice.info("这是一条通知提醒，来自Notice组件"); }); </script> </body></html> |
JView 使用示例
Alert 警告提示
概述
警告提示，展现需要关注的信息。
代码示例
基础用法
最简单的用法，适用于简短的警告提示。
1 | <j-alert message="成功提示的文案" type="success"></j-alert> |
四种样式
有四种样式可以选择 info、success、warning、error。
1 2 3 4 | <j-alert message="成功提示的文案" type="success"></j-alert><j-alert message="消息提示的文案"></j-alert><j-alert message="警告提示的文案" type="warning"></j-alert><j-alert message="错误提示的文案" type="error"></j-alert> |
含描述信息
通过设置属性 desc 展示描述内容。
或者通过添加标签 <slot name="desc"></slot> 设置描述内容，会覆盖原先的 desc 属性的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <j-alert message="成功提示的文案" desc="This is the message of success description. This is the message of success description" type="success"></j-alert><j-alert message="消息提示的文案" desc="This is the message of info description. This is the message of info description"></j-alert><j-alert message="警告提示的文案" desc="This is the message of warning description. This is the message of warning description" type="warning"></j-alert><j-alert message="错误提示的文案" desc="This is the message of error description. This is the message of error description" type="error"></j-alert><j-alert message="错误提示的文案" type="error"> <slot name="desc" >This is the message of error description. This is the message of error description</slot ></j-alert> |
图标
通过设置属性 data-show-icon="true" 且根据 type 属性自动添加不同图标
可以通过属性 data-icon 自定义图标，或者使用 slot 标签 <slot name="icon"></slot>，自定义的图标会替换原先的关闭图标
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <j-alert message="成功提示的文案" type="success" data-show-icon="true" data-banner="true"></j-alert><j-alert message="消息提示的文案" data-show-icon="true"></j-alert><j-alert message="警告提示的文案" type="warning" data-show-icon="true"></j-alert><j-alert message="错误提示的文案" type="error" data-show-icon="true"></j-alert><j-alert message="成功提示的文案" desc="Detailed description and advice about successful copywriting." type="success" data-show-icon="true"></j-alert><j-alert message="消息提示的文案" desc="Additional description and information about copywriting." data-show-icon="true"></j-alert><j-alert message="警告提示的文案" desc="This is a warning notice about copywriting." type="warning" data-show-icon="true"></j-alert><j-alert message="错误提示的文案" desc="This is an error message about copywriting." type="error" data-show-icon="true"></j-alert><j-alert message="自定义图标" desc="Custom icon copywriting. Custom icon copywriting. Custom icon copywriting." data-show-icon="true" data-icon="<i class='jv-icon icon-paper-plane'></i>"></j-alert> |
可关闭的警告提示
通过设置属性 data-closable="true" 显示关闭按钮，点击可平滑、自然的关闭警告提示。
可以通过设置属性 data-close-text 自定义关闭文字，自定义的文字会替换原先的关闭图标。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <j-alert message="成功提示的文案" type="success" data-closable="true"></j-alert><j-alert message="警告提示的文案" desc="This is a warning notice about copywriting." type="warning" data-closable="true"></j-alert><j-alert message="消息提示的文案" data-closable="true"> </j-alert><j-alert message="自定义 close-text" data-closable="true" data-close-text="知道了"></j-alert> |
顶部公告
设置属性 data-banner="true" 可以应用页面顶部通告形式。
1 | <j-alert message="顶部通告提示文案" type="warning" data-banner="true"></j-alert> |
Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 警告提示样式，可选值为info、success、warning、error | String | info |
| message | 警告提示内容 | String | - |
| desc | 警告提示的辅助性文字介绍 | String | - |
| data-closable | 是否可关闭 | Boolean | false |
| data-close-text | 关闭按钮自定义文本，data-closable 为 true 时有效 | String | - |
| data-show-icon | 是否显示图标 | Boolean | false |
| data-icon | 自定义图标，data-show-icon 为 true 时有效 | String | - |
| data-banner | 是否用作顶部公告 | Boolean | false |
Slot
| 名称 | 说明 |
|---|---|
| message | 警告提示标题 |
| desc | 警告提示辅助性文字介绍 |
| icon | 自定义图标内容 |
控制 alert 在合适的时机显示隐藏
通过给 alert 标签设置外层容器，用于显示隐藏
设置属性 data-toggle="display" 会自动根据 点击的 data-target 目标元素的 display 属性判断是否显示或隐藏
1 2 3 4 5 6 7 8 9 10 | <button class="jv-btn jv-btn-default" data-toggle="display" data-target="#demoShowHiddenAlert"> 显示alert</button><div style="display:none;" id="demoShowHiddenAlert"> <j-alert message="这是一条消息提示文案"></j-alert></div> |
Avatar 头像
概述
用来代表用户或事物，支持图片、图标或字符展示。
代码示例
基础用法
头像有四种尺寸，两种形状可选，默认为圆形。
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="jv-avatar jv-avatar-circle jv-avatar-huge" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-circle jv-avatar-large" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-circle jv-avatar-medium" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-circle jv-avatar-small" ><i class="jv-icon icon-user"></i></span> |
方形
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="jv-avatar jv-avatar-square jv-avatar-huge" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-square jv-avatar-large" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-square jv-avatar-medium" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-square jv-avatar-small" ><i class="jv-icon icon-user"></i></span> |
类型
支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="jv-avatar jv-avatar-circle jv-avatar-medium" ><i class="jv-icon icon-user"></i></span><span class="jv-avatar jv-avatar-circle jv-avatar-medium" ><img src="./images.jpg"/></span><span class="jv-avatar jv-avatar-circle jv-avatar-medium" style="background: #a123f1;"> <span class="jv-avatar-text">瑞</span></span><span class="jv-avatar jv-avatar-circle jv-avatar-medium" style="background: #6bc800;"> <i class="jv-icon icon-user"></i></span> |
自动调整字符大小
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
1 2 3 4 5 6 | <span class="jv-avatar jv-avatar-circle jv-avatar-medium" ><span class="jv-avatar-text">Usase</span></span><span class="jv-avatar jv-avatar-circle jv-avatar-medium" ><span class="jv-avatar-text">USER</span></span> |
BackTop 返回顶部
概述
当页面内容冗长，需要快捷返回顶部时使用，一般放置在页面右下角位置。
代码示例
基础用法
默认位置距离页面右部和底部 30px，滚动至距顶端 400px 时显示。
1 2 3 4 5 6 | <j-backtop id="backTop"></特别申明：
|