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

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

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

 16290  125  查看评论 (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>

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

响应式后台管理模板Cameo Admin

 简洁大方的响应式后台管理模板Cameo Admin
  布局
 69838  591

bootstrap_admin后台管理模板

 jQuery bootstrap响应式后台管理模板
  布局
 90580  555

仿国外Tool网站

 这个插件主要是仿Tool网站来写，里面主要是做一些动画效果，用css3和jQuery来写，未使用任何外部插件
  布局
 33471  356

响应式企业网站模板

 响应式企业协作软件网站模板，适用于企业门户网站模板。包含了首页、博客列表、博客详情3个页面模板。
  布局
 41974  421

讨论这个项目（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
        如果可以的话，你也可以对一些不完善的控件进行开发😀
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复