UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

JView UI是一套基于 JQuery 的开源 UI 组件库

所属分类：UI,输入-布局,定制和风格

 17990  126  查看评论 (12)
分享到微信朋友圈
X
JView UI是一套基于 JQuery 的开源 UI 组件库 ie兼容8
 查看演示  website  立即下载

更新时间：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> 标签中，并放置在所有其它样式表之前。

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

JS 文件

JView 所提供的许多组件都依赖与 jQuery 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到页面 <body> 标签之前即可起作用。引入顺序为： 先引入 jQuery，然后是 我们的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="JView.min.js"></script>

组件示例

<!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 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <!-- 2.引入JView Js -->
    <script src="JView.min.js"></script>
    <script>
      $(() => {
        // Message组件示例
        $.Message.info("这是一条消息提示，来自Message组件");
        //Notice 组件示例
        $.Notice.info("这是一条通知提醒，来自Notice组件");
      });
    </script>
  </body>
</html>

JView 使用示例

Alert 警告提示

概述

警告提示，展现需要关注的信息。

代码示例

基础用法

最简单的用法，适用于简短的警告提示。

<j-alert message="成功提示的文案" type="success"></j-alert>

四种样式

有四种样式可以选择 info、success、warning、error。

<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 属性的内容

<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>，自定义的图标会替换原先的关闭图标

<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 自定义关闭文字，自定义的文字会替换原先的关闭图标。

<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" 可以应用页面顶部通告形式。

<j-alert message="顶部通告提示文案" type="warning" data-banner="true"></j-alert>

Attributes

属性说明类型默认值
type警告提示样式，可选值为info、success、warning、errorStringinfo
message警告提示内容String-
desc警告提示的辅助性文字介绍String-
data-closable是否可关闭Booleanfalse
data-close-text关闭按钮自定义文本，data-closable 为 true 时有效String-
data-show-icon是否显示图标Booleanfalse
data-icon自定义图标，data-show-icon 为 true 时有效String-
data-banner是否用作顶部公告Booleanfalse

Slot

名称说明
message警告提示标题
desc警告提示辅助性文字介绍
icon自定义图标内容

控制 alert 在合适的时机显示隐藏

通过给 alert 标签设置外层容器，用于显示隐藏

设置属性 data-toggle="display" 会自动根据 点击的 data-target 目标元素的 display 属性判断是否显示或隐藏

<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 头像

概述

用来代表用户或事物，支持图片、图标或字符展示。

代码示例

基础用法

头像有四种尺寸，两种形状可选，默认为圆形。

<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>

方形

<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 和字符型可以自定义图标颜色及背景色。

<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>

自动调整字符大小

对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。

<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 时显示。

<j-backtop id="backTop"></j-backtop>
<script>
  $(() => {
    $("#backTop").backTop();
  });
</script>

自定义位置

可改变 backTop 组件的位置

<j-backtop id="backTop"></j-backtop>
<script>
  $(() => {
    $("#backTop").backTop({
      bottom: 100,
      right: 60,
    });
  });
</script>

相关插件-布局,定制和风格
查看更多

jQuery bootstrap响应式设计类网站模板

 jQuery bootstrap响应式设计类网站模板，整站页面全。
  布局
 18487  241

jQuery自适应无限滚动瀑布流

 结合minigrid.js做的一个简单响应瀑布流
  布局
 37327  390

一款精美的bootstrap UI 模板

 一款精美的bootstrap UI 模板
  布局
 36066  547

高端出彩大气宽屏网站模板

 全站模版可直接套用
  布局
 38572  548

讨论这个项目（12）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xta fnhc tewq 0
    2020/10/16 17:19:39
    想问下作者，将自动义元素添加到注释元素中与直接`remove`自定义元素有什么区别？ 回复
    xta fnhc tewq 1
    2020/10/16 16:59:41
    建议把每个功能都拆分出来(js、css独立)，就跟demo文件夹一样，这样用起来就更方便了，有时候可能只想用你的某几个控件，如果不单独拆分出来，那么只有引入全部的代码，这样非常的浪费。
    然后再用webpack或其他工具打包一个全部的
        niuGrandpa10
        2020/10/16 17:23:00
        做的并不是太正式，有点仓促希望谅解哈
    回复
    xta fnhc tewq 1
    2020/10/16 16:47:48

    最近发现一个问题，在JView自定义组件上定义的属性在转换成真实dom后会丢失，如：

    ```
<j-collapse data-set-active-key="1" id="test_j" data-my-data="asfsdfds">
  <j-collapse-panel data-key="1" title="维克多? 雨果">
    
      居克多?褚里?雨果
    
  </j-collapse-panel>
  <j-collapse-panel data-key="2" title="海伦凯勒">
    
      海伦?凯勒
    
  </j-collapse-panel>
</j-collapse>
```

    在上述代码中在`<j-collapse>`组件中定义的`id`、`data-my-data`属性在转换成真实dom后会消失
    看了下源代码，作者没有对这块的内容做任何处理，希望作者能够改进

        niuGrandpa11
        2020/10/16 17:22:12
        谢谢你的指正，在后续重做的新的一版我会加以改进的。你说的那些问题都是我没有考虑周全导致的
    回复
    cm16 0
    2020/10/14 12:25:01
    楼主这个支持IE9吗？还有JView.bundle.js和JView.js是啥关系？ 你是用ES5还是ES6写的？
        niuGrandpa11
        2020/10/14 12:33:25
        JView.bundle.js是JView.js 编译成ES5后的结果，后者是用ES6写的，用JView.bundle.js是可以兼容ie的
        cm160
        2020/10/14 12:49:32
        哦，谢谢答复，我正好需要几个message和notice插件等弹层插件，这个感觉还不错，要是有原生的js版就好了，JView.bundle.js代码也基本min了。👍
        niuGrandpa10
        2020/10/14 15:19:00
        基于原生js的现在正在制作中⭐
    回复
    xta fnhc tewq 0
    2020/10/13 18:42:33
    看了下这套UI感觉作者写的很好哦，如果有机会使用到jQuery可以使用下这套UI，问下作者有将这套UI放到GitHub上去吗？把这套UI放到GitHub然后写个完善点的文档，相信使用人数会不少哦~

    目前发现还缺少`radio、checkbox、select、级联选择、(日期、时间、日期时间)选择、表格、tag标签、tree树形菜单、tabs选项卡`控件

    还有一个UI不是很好的地方，就是多个在一行的按钮，中间的按钮总是会缺少一个边框，这种效果并不是很好
        niuGrandpa10
        2020/10/13 19:21:32
        谢谢你的指正哦⭐
        niuGrandpa10
        2020/10/13 19:33:04
        如果可以的话，你也可以对一些不完善的控件进行开发😀
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复