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

查看演示立即下载

插件描述：为 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="/"></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="/"></script>
    <!-- 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。

<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`、`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 属性判断是否显示或隐藏

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

特别申明：
			本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
			本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
			如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com


					
												
							
						        上一个特效：
						        jQuery日历（时间走动）						    
							
						        下一个特效：
						        require模拟购物车功能						    
						
					
				
			
			
									
				    
				        				            
				                
				                    
				                    jQuery单选框复选框美化插件cform.js
				                
				            
				        				            
				                
				                    
				                    新拟物化登陆UI设计
				                
				            
				        				            
				                
				                    
				                    CSS3打造的漂亮的动画按钮-ANIMATED BUTTONS
				                
				            
				        				            
				                
				                    
				                    炫酷的html5注册登录
				                
				            
				        				            
				                
				                    
				                    ipput上传样式
				                
				            
				        				        
				    
							
		

		





		2018-2023 凤凰网络版权所有.