搜索
您的当前位置:首页正文

Vue使用zTree插件封装树组件操作示例

2023-12-07 来源:车融汽车网

本文实例讲述了Vue使用zTree插件封装树组件操作。分享给大家供大家参考,具体如下:

1.通过npm安装jquery

npm install jquery --save-dev

2.在build/webpack.base.conf文件当中引入jquery

module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery') } }, ...}

3.在项目根目录创建一个文件夹plugins,将zTree的js文件放进去

4.将zTree的样式文件放在static文件夹下(放在别的地方大饱之后会出现图片路径找不到等问题,放在static下打包时会避免ztree样式的压缩)。在main.js中引入该样式:

import '../static/zTreeStyle/zTreeStyle.css'

5.创建公共组件ztree>index.vue,下面为我的公共组件

html:

<template> <div class="ztree"> <el-row> <el-col :span="12"> <el-button icon="el-icon-plus" size="mini" type="text" @click="add">新增节点</el-button> </el-col> <el-col :span="12"> <el-button icon="el-icon-delete" type="text" size="mini" @click="remove">删除节点</el-button> </el-col> </el-row> <ul id="treeDemo" class="ztree"></ul> </div></template>

js:

<script>import '../../../plugins/zTree/jquery-1.4.4.min'import '../../../plugins/zTree/jquery.ztree.core'import '../../../plugins/zTree/jquery.ztree.excheck'import '../../../plugins/zTree/jquery.ztree.exedit'export default { props: { zNodes: { type: Array }, selectedNodeId: "" }, data() { return { selectedNode: {}, setting: { view: { showIcon: false }, edit: { enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { keep: { parent: true, leaf: true }, simpleData: { enable: true } }, callback: { onClick: this.zTreeOnClick, onRename: this.zTreeOnRename } } }; }, methods: { // 初始化ztree init() { $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); }, // 树节点点击事件 zTreeOnClick: function(event, treeId, treeNode) { this.selectedNode = treeNode; this.$emit("treeClick", treeNode); }, // 树节点编辑名称回调 zTreeOnRename(event, treeId, treeNode, isCancel) { this.$emit("addNode", treeNode); }, // 点击添加按钮事件 add() { let newCount = 1; let zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (treeNode) { if (treeNode.level === 2) { this.$message("分类不能超过三级"); return; } else { treeNode = zTree.addNodes(treeNode, { id: 100 + newCount, isParent: true, pId: treeNode.id, name: "new node" + newCount++ }); } } else { treeNode = zTree.addNodes(null, { id: 100 + newCount, isParent: true, pId: 0, name: "new node" + newCount++ }); } zTree.editName(treeNode[0]); }, // 点击删除按钮事件 remove() { let zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (nodes.length == 0) { this.$message("请先选择一个节点"); return; } else { this.$confirm("此操作将永久删除该节点, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$emit("removeNode", treeNode); }) .catch(() => {}); } } }, watch: { // 监听树节点的变化更新树 zNodes: function(val) { this.init(); }, }, mounted() { this.init(); }};</script>

希望本文所述对大家vue.js程序设计有所帮助。

小编还为您整理了以下内容,可能对您也有帮助:

vue封装树形组件

最近在做一个vue的项目,封装树形组件。

先说一下项目需求:

1.项目原型:

此树形结构分为:根节点,一级节点,二级节点,每个节点都可以选中或取消选中,父级节点选中,下级的所有节点也可全部选中。二级节点中有不可选中的节点

2.后台返回的数据结构:

this.menuList = [{id:1,menuName:'首页',type:1,parentId:0},

{id:2,menuName:'首页1',type:0,parentId:1},

{id:3,menuName:'首页2',type:0,parentId:1},

{id:5,menuName:'首页3',type:1,parentId:1},

{id:6,menuName:'报告看板',type:1,parentId:0},

{id:7,menuName:'看板1',type:2,parentId:6},

{id:8,menuName:'看板2',type:2,parentId:6},

{id:9,menuName:'数据中心',type:1,parentId:0},

{id:10,menuName:'数据中心1',type:1,parentId:9},

{id:10,menuName:'数据中心2',type:2,parentId:9}];

其中parentId为0 的为父节点,1为可以选择的子节点,2为已经选中的子节点

根节点为前端写死的节点

3.html页面

4.最终实现的效果

在vue中使用ztree树形组件,如何将ztree图片,改成字体图标呢?求解答?求思路?

使用npm install jquery –save 在项目中安装ztree依赖文件 jquery;

在index.html里面引用ztree样式文件zTreeStyle.css(前面的图标可以自定义可以参考官网)

3.在项目中引入ztree文件,在main.js中引入

网上给的资料是在这里同时引入jquery;但是项目中引入 报错

import from‘jquery′−在你的zTree.vue单文件中引入importfrom‘jquery′−在你的zTree.vue单文件中引入import from ‘jquery’

4.在template中创建盒子,一定要给盒子相应的高度

<div class="tree-box" >

<ul id="treeDemo" class="ztree" ></ul>

</div>

5.在 .vue文件中data配置setting 树,以及定义存放数据的zNodes

6.使用axios 后台请求数据,下图使用请求方式是封装好的

ok完成(希望对你有帮助)追问我服你,请看题

用zTree替代Element UI的Tree,解决大数据卡顿问题

Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿,电脑配置差点更是难受。即使使用懒加载,即每展开父节点再去加载子节点,若字节点数目同样众多,Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案,使用zTree替代Element UI的Tree组件,让树组件使用非常流畅。
因为树节点数目众多,使用zTree依旧延续展开父节点再去加载子节点的方式。

zTree: http://www.treejs.cn/v3/main.php#_zTreeInfo 。首先是zTree的标签:

参照zTree官方文档,配置zTree的setting:

展开父节点加载对应的子节点:

接下来设置滚动条。这里用到了vuescroll组件: https://vuescrolljs.yvescoding.org/zh/guide/

父节点的勾选状态有三种:勾选、半选(即只有部分子节点选中)、不勾选。
父节点勾选,则新加载的子节点全部勾选。

记录checkArray、pathArray

用zTree替代Element UI的Tree,解决大数据卡顿问题

Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿,电脑配置差点更是难受。即使使用懒加载,即每展开父节点再去加载子节点,若字节点数目同样众多,Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案,使用zTree替代Element UI的Tree组件,让树组件使用非常流畅。
因为树节点数目众多,使用zTree依旧延续展开父节点再去加载子节点的方式。

zTree: http://www.treejs.cn/v3/main.php#_zTreeInfo 。首先是zTree的标签:

参照zTree官方文档,配置zTree的setting:

展开父节点加载对应的子节点:

接下来设置滚动条。这里用到了vuescroll组件: https://vuescrolljs.yvescoding.org/zh/guide/

父节点的勾选状态有三种:勾选、半选(即只有部分子节点选中)、不勾选。
父节点勾选,则新加载的子节点全部勾选。

记录checkArray、pathArray

如何给树的父节点添加双击展开事件

给树的父节点添加双击展开事件的方法如下:

1. 首先,需要获取到树的父节点元素,可以通过 DOM 操作或者使用相关的 JavaScript 框架来获取。

2. 然后,给父节点元素绑定一个双击事件的,可以使用 addEventListener() 方法或者相关框架提供的事件绑定方法。

3. 在双击事件的中,通过操作树的展开或折叠方法来实现节点的展开或折叠功能。具体操作方法可以根据使用的树组件或框架的不同而有所差异,例如使用 jQuery Treeview 插件时,可以使用 toggle() 方法来切换节点的展开状态。

解释原因:

给树的父节点添加双击展开事件的原因是为了提供更友好的用户交互体验,使用户能够更方便地展开或折叠树的节点。通过双击父节点来展开或折叠子节点,可以减少用户的操作步骤,提高操作效率。

拓展内容:

除了双击展开事件,还可以考虑其他交互方式,例如单击加号或减号图标来展开或折叠节点,或者使用鼠标右键菜单来进行操作。根据具体需求和用户习惯,可以选择合适的交互方式来实现节点的展开和折叠功能。另外,还可以对展开和折叠过程进行动画效果的添加,以增加用户的视觉享受。

Vue3_15(全局组件,局部组件,递归组件)

例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可以封装成全局组件
案例------我这儿封装一个Card组件想在任何地方去使用

使用方法
在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
其次调用 component 第一个参数组件名称 第二个参数组件实例

使用方法
直接在其他vue页面 立即使用即可 无需引入

就是在一个组件内(A) 通过import 去引入别的组件(B) 称之为局部组件
应为B组件只能在A组件内使用 所以是局部组件
如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
案例递归树
在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

template
TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

Vue3_15(全局组件,局部组件,递归组件)

例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可以封装成全局组件
案例------我这儿封装一个Card组件想在任何地方去使用

使用方法
在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
其次调用 component 第一个参数组件名称 第二个参数组件实例

使用方法
直接在其他vue页面 立即使用即可 无需引入

就是在一个组件内(A) 通过import 去引入别的组件(B) 称之为局部组件
应为B组件只能在A组件内使用 所以是局部组件
如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
案例递归树
在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

template
TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

怎样正确使用vue组件复用功能

这次给大家带来怎样正确使用vue组件复用功能,正确使用vue组件复用功能的注意事项有哪些,下面就是实战案例,一起来看一下。

一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

二、组件用法

组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。

2.1 全局注册后,任何V ue 实例都可以使用。如:

<p id="app1">

<my-component></my-component>

</p>

Vue.component('my-component',{

template: '<p>这里是组件的内容</p>'

});

var app1 = new Vue({

el: '#app1'

}); 要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<p></ p >”是无法渲染的。(而且最外层只能有一个根的<p>标签)

2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

<p id="app2">

<my-component1></my-component1>

</p>

var app2 = new Vue({

el: '#app2',

components:{

'my-component1': {

template: '<p>这里是局部注册组件的内容</p>'

}

}

});2.3 data必须是函数

除了template选项外,组件中还可以像Vue实例那样使用其他的选项,比如data 、computed 、methods等。但是在使用data时,和实例稍有区别, data 必须是函数,然后将数据return 出去。

<p id="app3">

<my-component3></my-component3>

</p>

Vue.component('my-component3',{

template: '<p>{{message}}</p>',

data: function(){

return {

message: '组件内容'

}

}

});

var app3 = new Vue({

el: '#app3'

}); 一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。

所以一般给组件返回一个新的的data对象。

补充:vue-router 组件复用问题

组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、、可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。

问题

使用vue-router切换路由时会触发组件树的更新,根据定义的路由渲染一个新的组件树,大致的切换过程是这样的:

- 停用并移除不需要的组件

- 验证切换的可行性

- 复用没有进行更新的组件

- 启用并激活新的组件

具体路由切换控制流程请参考官方文档:切换控制流水线

那vue-router是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:

{

path: 'post/:postId',

name: 'post',

component: resolve => require(['./components/Post.vue'],resolve)

}这是通过文章ID加载对应文章页面的路由,第一次访问时,Post.vue这个组件会被渲染到组件树中,mounted安装组件时通过文章ID获取文章内容展示到页面上,当我们访问另一篇文章时,路由参数:postId发生改变,按照我们的预期应该会展示新文章的内容,但是事与愿违。

我们看到的还是之前的文章,虽然路由参数已发生更改,但是vue-router会以为你访问的是Post.vue这个组件,由于之前已经渲染过该组件,所以会直接复用之前的组件,并且不会执行组件中的任何操作包括mounted之类的生命周期函数。

所以我们最终看到的还是原来组件的内容。

那要怎么才能实现我们期望的效果呢?下面介绍一种有效的解决方法

解决方法

我们可以使用watch侦听器来监听路由的变化情况,根据路由参数的变化来响应相应的数据,具体实现过程是这样的:

定义数据获取方法

首先定义一个获取文章的方法,根据文章ID从后台获取对应的文章信息。

methods: {

getPost(postId) {

this.$http.get(`/post/get_post/${postId}`).then((response) => {

if(response.data.code === 0){

this.post = response.data.post;

}

});

}

}监听路由

接着是在路由切换的时候判断目标组件是否是Post.vue组件,这里可以根据定义的路由名称name实现,如果是,我们就可以从路由信息中获取目标文章ID来更新组件内容。

watch: {

'$route' (to, from) {

if(to.name === 'post'){

this.getPost(to.params.postId);

}

}

}组件初始化

这里需要注意的是,当组件首次被挂载到组件树上时,对路由的监听是无效的,这时我们需要在生命周期钩子mounted对组件进行初始化工作:

mounted() {

this.getPost(this.$route.params.postId);

}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样使用React高阶组件

如何正确解决Vue 项目中遇到跨域问题

jquery如何封装插件jquery封装插件的方法

如何打包jquery插件

前言

如今,jquery几乎是web开发的必备工具。甚至vs神器在2010年就开始在web项目中内置Jquery和ui。至于使用jquery的好处,这里就不赘述了。用过的我都认识。今天我们来讨论一下jquery的插件机制,jquery有上千个第三方插件。有时候我们写了一个的函数,想和jquery结合,可以用jquery链调用。有必要扩展jquery,把它写成插件。例如,下面是一个简单扩展jquery对象的演示:

//sample:扩展jquery对象的方法。bold()用于加粗字体。

(函数($){

$.fn.extend({bold总结/summary

返回this.CSS({fontweight:bold

}

});

})(jQuery);

呼叫方法:

这是一个非常简单的扩展。接下来,我们来一步步分析上面的代码。

首先,jquery的插件机制

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1.jQuery.extend()方法有一个重载。

JQuery.extend(object),用于扩展JQuery类本身的参数,也就是说在jQuery类/naming空之间添加新的函数,或者调用静态方法。比如jQuery内置的ajax方法都是用jQuery.ajax()调用的,有点像“类名”的静态方法。方法名”。让我们也写一个jQuery.extend(object)的例子:

//扩展jQuery对象本身jQuery.Extend({"minValue:函数(a,b){///总结/summary

返回一个

},总结/summary

returna

}

});//调用

vari=100j=101varmin_v=$。minValue(i,j);//min_v等于100

varmax_v=$。maxValue(i,j);//max_v等于101

重载:jquery.extend([deep],target,object1,[objectn])

用一个或多个其他对象扩展一个对象,并返回扩展的对象。

如果没有指定target,jQuery将被命名为空来扩展自身。这有助于插件作者向jQuery添加新方法。

如果第一个参数设置为true,jQuery返回深度副本,递归地复制它找到的任何对象。否则,副本将与原始对象共享结构。

未定义的属性不会被复制,但从对象原型继承的属性会被复制。

参数

深度:可选。如果设置为true,递归合并。

目标:要修改的对象。

1:要合并到第一个对象中的对象。

ObjectN:可选。要合并到第一个对象的对象。

示例1:

合并设置和选项,修改并返回设置。

var设置={validate:false,limit:5,name:foo

varoptions={validate:true,name:酒吧

jQuery.extend(设置,选项);

结果:

设置=={验证:真,:5,名称:

vardefaults={validate:false,limit:5,name:foo

varoptions={validate:true,name:酒吧

varsettings=jQuery.extend(空,默认,选项);

结果:

设置=={验证:真,:5,名称:酒吧

};

原来jQuery.fn=jQuery.prototype,是jQuery对象的原型。那么jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道在原型上扩展方法相当于给对象增加了一个“成员方法”,而类的“成员方法”只能被类的对象调用,所以使用jQuery.fn.extend(object)扩展的方法,jQuery类的实例就可以使用这个“成员函数”。必须区分jQuery.fn.extend(object)和jQuery.extend(object)方法。

二。自动执行匿名函数/闭包

1.什么是自执行匿名函数?

指的是这样一个函数:(function{//code})();

2.问为什么(function{//code})();可以执行,函数{//code}();你会报错吗?

3.分析

(1).首先明确两者的区别:(function{//code})是表达式,function{//code}是函数声明。

(2).其次,js,因为function(){//code}处于“编译”阶段已经解释过了,js会跳过function(){//code},尝试执行();,所以它会报告一个错误;

js执行到(function{//code})()时;当,因为(function{//code})是表达式,所以js会求解得到返回值。因为返回值是函数,所以遇到();当,它将被执行。

另外,函数转换成表达式的方法不一定要依赖分组运算符(),我们也可以使用void运算符、~operator,!操作员...

例如:

bootstrap框架中插件的编写方法:

!函数($){

//做点什么;

}(jQuery);

(函数($){

//做点什么;

})(jQuery);是一回事。

匿名函数最大的用途是创建闭包(这是JavaScript语言的特点之一),还可以构建命名空空间,减少全局变量的使用。

例如:

vara=1;

(函数()(){

vara=100

})();

警戒(一);//弹出1

更多闭包和匿名函数请查看文章匿名函数和Javascript的自执行。

第三,逐步打包JQuery插件

接下来,我们来写一个高亮的jqury插件。

1.设置封闭区域,防止插件“污染”

//闭包限定在named空(function($){

})(window.jquery);

2.jQuery.fn.extend(object)扩展jQuery方法,制作插件。

//闭包限定在named空(function($){

$.fn.extend({突出显示

})(window.jquery);

3.给出插件默认参数,实现插件功能。

//闭包限定在named空(function($){

$.fn.extend({突出显示//使用jQuery.extend覆盖插件默认参数。

This.each(function(){//这是jQuery对象。

//遍历所有要高亮显示的dom,当是调用highlight()插件的集合时。

var$this=$(this);//获取当前dom的jQuery对象,这里是当前循环的dom

//根据参数设置dom的样式

$this.css({

背景色:opts.background,

颜色:opts.前景

});

});

}

});//默认参数

vardefaluts={

前景:红色,

背景:

};

})(window.jquery);

至此,高亮插件的基本功能已经具备。调用代码如下:

$(function(){

$(p//调用自定义高亮插件});

只能在这里直接调用,不能在chain中调用。我们知道jQuery可以被链式调用,也就是说,在一个jQuery对象上可以调用多个方法,比如:

$(#id100像素}).addAttr(标题

但是我们上面的插件是不能这样链的。比如:$(p100像素});//会报错找不到css方法,因为我的自定义插件完成函数后没有返回jQuery对象。接下来,返回jQuery对象,这样我们的插件也支持链式调用。(其实很简单,就是在我们执行完我们的插件代码的时候返回jQuery对象,和上面的代码没什么区别)

jquery怎么获取inputfile中的内容?

jquery获取inputfile中内容的方法:;$("#conter").val();//这样就能获取它的值了(也就是内容)。

1.jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件.

插件使用方法?

1.使用script标签加载jquery框架2.使用script标签加载插件3.看插件是否有api,如果有的话按照api调用4.如果没有api,就自己看源码一般来说jquery插件的调用方法都是$('element').plugName(param);其中element是你用选择选择的要执行插件方法的对象,plugName是你插件中的方法名称,param是插件方法的参数。当然,也有的插件不是这样调用的,也有的插件是需要你在html标签中加入以下class。具体还是要看你用的插件的api

详解如何在vue项目里正确地引用jquery和jquery-ui的插件?

vue-cliwebpack全局引入jquery

1、首先在package.json里加入,

然后nmpinstall

2、在webpack.base.conf.js里加入

3、在mole.exports的最后加入

plugins:

4、然后一定要重新rundev

5、在main.js引入就ok了

在.vue文件中引入第三方非NPM模块

vue-cli引入外部文件

在webpack.base.conf.js中添加externals

externals中swiper是键,对应的值一定的是插件swiper.js所定义的变量Swiper:

之后再在根目录下的index.html文件里引入文件:scriptsrc="static/lib/swiper.js">/script>

这样子就可以在需要用到swiper.js的文件里加入这行代码:importSwiperfrom'swiper',这样就能正常使用了。

前端页面的插件有哪些?

工具类

方便操作对象,数组等的工具库

underscore.js

lo-dash与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建

Sugar在原生对象上增加一些工具方法

functional.js提够了一些Curry的支持

Watch.js监视对象或属性的变化

bacon.js函数式编程,cool

streamjs用流的方式来对数组,对象进行系列操作

异步流程控制

eventproxy朴灵出品

Arbiter.js详细

发布订阅

qPromise风格的

Async.js

mock

Mock.js生成随机数据和mockAjax请求

jquery-mockjaxmockajax请求

时间库

moment

datejs

浏览器探测

Bowser探测具体浏览器和版本

ua-parser-js探测具体浏览器和版本,操作系统,设备类型等

调试

console-polyfill能放心的使用console.log()之类的console方法

log让控制台输出的log有样式

Konsole.js在页面的一个元素里输出log信息详细

uri.jsuri操作

cookie增删改cookie的工具库

director前端路由库详细

BigDecimal.js提高精度的数字操作

JSDoc根据javascript文件中注释的信息,生成API文档详细

hotkeys键盘事件的封装

MD5用MD5的方式加密文件的库

浏览器增强类

让一些旧浏览器变牛的库

Selectivizr让IE6-8一些的css3选择器

ieBetter让ie6-8有高级浏览器的特性

ExplorerCanvas让IE8-的浏览器支持canvas

CSS3Pie让IE6-9支持border-radious,box-shadow,linear-gradient。可以使用.htc文件(注意Minetype)或.js文件。在用Pie.js时,box-radious的元素有背景色时,不显示背景色。。。

formFive让旧的浏览器支持HTML5表单的一些特性,如placeholder,autofocus

https://github.com/anselmh/object-fit让浏览器支持object-fit这css规则

HTML5CrossBrowserPolyfills一堆Polyfills

flexibility让旧的IE也支持Flexbox

选择器增强

Lining.js让浏览器实现类似::nth-line(),::nth-last-line()的效果

未归类

prefixfree用了它,写css时,就不需要加浏览器的前缀了

表单类

jquery-file-upload上传文件组件详细

zTree文件树形视图控件

Treed树编辑器。感觉展示的感觉很像思维导图

FileAPI对文件选择框内的文件的一些处理

表单验证

.Validate详细

jQuery-Validation-Engine

表单元素美化

uniform提供对下拉框,单,复选框,按钮等表单元素的美化

select2多选下拉框

selectivity和unfirom比较类似

DropKick下拉框,单,多选。外观比uniform好

switcheryios7风格的开关组件

nouislider用滚动条来设置/控制(音量等)

range.css美化input元素的外观

图片类

holderjs生成占位图片

lazyload

imagesLoaded选取的图片都加载好后执行调回

CSSgram用CSS3的Filter实现Instagram滤镜的库

图标类

IconFont汇总

SVG做的图标

svgicons

iconic

HYBICON带交互效果。如hover,click

HTML字符实体图标

http://www.amp-what.com/

transformicons图标点击时,会有一些变换效果。如,加号变成叉号

css3patternscss3做的可平铺纹理。浏览器兼容性不好。

浏览图片

fancybox弹出查看图片,视屏等等demo

yoxview弹出查看图片,图片尺寸缩放很自然

图片墙

wookmark

UI框架

WeUI由微信官方设计团队为微信Web开发量身设计。

Framework7

UI组件类

拖拽

dragula支持Draggable,Dropable和Sortable。感觉比jqueryUI的轻量级,好用的样子

angular-draguladragular官方的angular版本

数据可视化(图表)

Echarts百度出品

highcharts功能强大。是收费的。

Plottable.JS基于D3的一个图表库

flot文档不给力

chartJs中文文档demo很漂亮,很清晰。比较轻量级。

ichartJs中国的一个家伙搞的,感觉还不错。

时间选取组件

foundation-datepicker

DatePicker一个简单的日历详细

fullcalendar支持脱放的方式来改变待办事宜的时间

SimpleEventsCalendar外观很喜欢。收费5$

jQueryuidatepicker经典,不是很好看

pickadate轻量级,手机友好的,漂亮。但貌似只能在弹出层中显示,而没有下拉这种方式显示。

zebra-datepicker可配置性很强。但貌似只能在弹出在右上方。。。

bootstrap-datepickerbootstrap风格。

dateRangePicker选取时间段。bootstrap风格。该组件依赖TwitterBootstrap,Moment.js和jQuery.

自定义滚动条

perfectscrollbar轻量级的滚动条。外观与mac上chrome的滚动条一样。

iscroll在移动设备上用不错

加载(Loding)效果

CSSSpinnersCSS做的

Loaders.cssCSS做的

表格组件

jsGridDataGrid。详细

backgrid基于Backbone.js的DataGrid

excellentexport把表格的内容生成excel。兼容Firefox,Chrome,IE6+

datatables表格可交互(对内容进行排序,删除等)

handsontable生成Excel外观的数据

JSpreadsheets表格数据的组件库

选取颜色

Spectrum

分享到SNS

JiaThis生成分享代码。

编辑器

ace代码编辑器,可以用来做demo演示

ckeditor

ueditor百度做的

tinymce对html内容进行实时的编辑

summernote在移动设备上用不错

通知组件

notie.js

HTML5播放器

jwplayer被大量网站使用

html5media简单的h5player,轻量级

jplayer功能强太,可换肤

展示

Impress.js各种旋转,和奇特的体验

fullPage全屏显示。用滚轮来翻页详细

zepto.fullpage专注于移动端的fullPage.js,依赖Zepto

pagePiling和fullPage类似

turn.js做一本书,带漂亮的翻页的效果

幻灯

slidesjs挺好用的,只是那幻灯导航的CSS都要自己写,呵呵详细

iSlider无任何插件依赖的手机平台javascript滑动组件详细

bgstretcher全屏幻灯,会随着页面大小的变化而变化。

Swiper开源、免费、强大的移动端触摸滑动插件Swiper中文网

coin-slider兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。

wowslider幻灯切换时各种很炫的效果。收费。

cycle2普通的幻灯,竟然不支持垂直滚动。。。

jcarousel普通的幻灯,不兼容IE6

reveal3d滚动。做ppt相当不错

nodePPT国人做的,做ppt也相当不错。有些方面比reveal做的还好。但生成导出的html有些问题

roundabout3d切换,看的后面图片的边

弹出框

Magnific-Popup兼容PC,Mobile。还不错,有5k+的star

layer国人开发的,兼容ie6+。不喜欢其调用方式。

动画效果

mixitup用漂亮的动画效果来完成排序和筛选

jQuery.Marquee跑马灯效果

quickflip卡片翻转效果

卡片翻转效果2兼容性可以。写的比较简单:1,只支持x方向翻转2,类名都是规定好的3,只能被调用一次。需要改写一下。我的改进版见这里

TheaterJS模拟两个人在屏幕上对话

midnight.js文字颜色随着背景变,_炸了

color-animationjquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。

transit对元素进行css的变换

tagcanvas3D标签云效果详细

iconate图片切换动画

Snap.js左/右侧导航的出现效果

CSSshake抖动动画

ClickSpark.js点击后的一些酷炫的效果

视觉差插件

scrollorama比较简单

superscrollorama能做的效果更多,但要用第三方Tween的库,使用

车融汽车网还为您提供以下相关内容希望对您有帮助:

vue封装树形组件

1.项目原型:此树形结构分为三级:根节点,一级节点,二级节点,每个节点都可以选中或取消选中,父级节点选中,下级的所有节点也可全部选中。二级节点中有不可选中的节点 2.后台返回的数据结构:this.menuList = [{id:1,...

在vue中使用ztree树形组件,如何将ztree图片,改成字体图标呢?求解答?求...

5.在 .vue文件中data配置setting 树,以及定义存放数据的zNodes 6.使用axios 后台请求数据,下图使用请求方式是封装好的 ok完成(希望对你有帮助)

用zTree替代Element UI的Tree,解决大数据卡顿问题

参照zTree官方文档,配置zTree的setting:展开父节点加载对应的子节点:接下来设置滚动条。这里用到了vuescroll组件: https://vuescrolljs.yvescoding.org/zh/guide/ 父节点的勾选状态有三种:勾选、半选(即只有部分子节...

前端页面的插件有哪些?

prefixfree用了它,写css时,就不需要加浏览器的前缀了 表单类 jquery-file-upload上传文件组件详细 zTree文件树形视图控件 Treed树编辑器。感觉展示的感觉很像思维导图 FileAPI对文件选择框内的文件的一些处理 表单验证 .Val...

如何给树的父节点添加双击展开事件

1. 首先,需要获取到树的父节点元素,可以通过 DOM 操作或者使用相关的 JavaScript 框架来获取。2. 然后,给父节点元素绑定一个双击事件的监听器,可以使用 addEventListener() 方法或者相关框架提供的事件绑定方法。3. 在双击...

前端页面的插件有哪些

prefixfree 用了它,写css时,就不需要加浏览器的前缀了 表单类 jquery-file-upload 上传文件组件 详细 zTree 文件树形视图控件 Treed 树编辑器。感觉展示的感觉很像思维导图 FileAPI 对文件选择框内的文件的一些处理 表单验证 .Validate...

jquery如何封装插件jquery封装插件的方法

prefixfree用了它,写css时,就不需要加浏览器的前缀了 表单类 jquery-file-upload上传文件组件详细 zTree文件树形视图控件 Treed树编辑器。感觉展示的感觉很像思维导图 FileAPI对文件选择框内的文件的一些处理 表单验证 .Validate详细 jQue...

如何编写js插件如何编写js插件文件

prefixfree用了它,写css时,就不需要加浏览器的前缀了 表单类 jquery-file-upload上传文件组件详细 zTree文件树形视图控件 Treed树编辑器。感觉展示的感觉很像思维导图 FileAPI对文件选择框内的文件的一些处理 表单验证 .Validate详细 jQue...

vue前端面试题有哪些呢?

13、说出至少4种vue当中的指令和它的用法?答:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定14、vue-router是什么?它有哪些组件?答:vue用来写路由一个插件。router-link、router-view15...

如何使用vue注册组件

new Vue({ el: '#app' }); 运行结果如下: 一、 全局注册和局部注册 调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top