前端插件
良心有约
人人为我,我为人人
展开
-
Vue中引入并使用动态图标
Vue中引入并使用动态图标1.安装依赖2.在Vue项main.js中引入3.经过以上操作,已经实现全局引入,在任何地方直接使用即可。本次选用Font-awesome-animation1.安装依赖npm install font-awesome-animation2.在Vue项main.js中引入import 'font-awesome-animation/font-awesome-animation.scss'3.经过以上操作,已经实现全局引入,在任何地方直接使用即可。<i cla原创 2021-11-15 10:00:58 · 1860 阅读 · 0 评论 -
基于awesome实现audio样式自定义
1.先看效果2.完整源码(另外为html直接运行)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Audio Demo by Liangxin at 2021-02-09</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></sc原创 2021-02-09 16:55:37 · 159 阅读 · 0 评论 -
Audio标签自定义实现悬浮播放
1.起因audio标签自带的controls样式单一,不能很好的适配项目主题样式及风格,需要进行美化。2.站在巨人肩上借鉴GitHub现有AudioJS插件,插件实现了基本的播放控制,包括进度条,为了进一步精简,修改配置如下:$(document).ready(function() { var settings = { progressbarWidth: '0px', progressbarHeight原创 2021-02-09 16:47:20 · 496 阅读 · 0 评论 -
Keys.js(web快捷键)官方使用说明
Keys由三个类时金字塔的Classes组成,从最小的单元(Key)开始到全局Document的事件管理器(Bindings)。包括:key、combo、Bindingskey这个Class管理键盘上单个物理按键的信息。可以使用key.a或key['Num Lock']引用给定的实例。理论上不需要手动创建Key的新实例,因为键盘上的所有键都已经定义了静态实例。Combo这个Class管理键盘上物理组合键信息。具体地说,一个任何类型的物理键,以及特殊按键(SHIFT、ALT、meta等)的任意翻译 2020-11-01 11:12:09 · 256 阅读 · 0 评论 -
JS实现Bootstrap中的Nav自动轮播切换
1.直接上JS<script>//Add by liangxin at 2020-10-27 22:34:53 $(function () { var i = 0; setInterval(function(){ if(i==5){i=0;} //Nav Count $('#myTab li:eq('+i+') a').tab('show'); i++; },5000); })原创 2020-10-27 22:03:56 · 514 阅读 · 0 评论 -
几款JavaScript快捷键插件
为了提高操作效率,同时保持良好的交互性,快捷键无疑是绝佳的前端体验。下来梁新在网上网络了一些前端基于JavaScript的快捷键JS库。JavaScript快捷键库 序号 名称 版本 最后更新时间 官网 说明 1 jkey 1.2 http://oscargodson.github.io/jKey/ 暂时无法下载 2 jQuery Hotkeys 2013.11 https://github.com/...原创 2020-09-07 17:53:52 · 960 阅读 · 0 评论 -
JavaFX中ARGB颜色值转换成RGB颜色值
JavaFX中得颜色与AWT中的颜色空间可能存在差异,需要转换,且其返回的为sRGB颜色空间,在转换成RGB后,可能会有颜色损失。官方的解释为:Bits 24-31 are alpha, 16-23 are red, 8-15 are green, 0-7 are blue也是接下来进行转换的依据int red= (RGB>>16)&255;int gree...原创 2020-04-15 09:28:39 · 834 阅读 · 0 评论 -
XPath------XLink------XSLT------XQuery 关系
XML语言可谓无所不在,我们访问的各类Web站点几乎用到的XML语言进行标记。当如何快速高效的对XML文档进行遍历,选取,修改。各类优秀框架及技术也是层出不穷,如下就来介绍目前比较流行的几类技术:XSLT(Extensible Stylesheet Language Transformations):是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言。 X...原创 2019-08-12 11:50:37 · 302 阅读 · 0 评论 -
Echart图表两端坐标值显示不全问题处理
切记:Echart图表构建于canvas中,设置其他外部样式都没用。直接上代码:在Echart的选项中直接修改或添加:grid:{x:50}修改前的样式:修改后的效果:...原创 2019-08-02 14:36:38 · 2122 阅读 · 0 评论 -
Font Awesome 图标动画
基于Font Awesome及CSS3IE浏览器必须为10及以上版本(官方Demo)下载$ bower install font-awesome-animation安装引用如下CSS文件:<link rel="stylesheet" href="font-awesome-animation.min.css">使用为所选择的图标或人和网DOM元素...原创 2019-07-25 15:18:00 · 1500 阅读 · 0 评论 -
解决ReferenceError: $http is not defined问题
今日在使用Angular进行后台数据一部获取时,莫名出现如下问题,页面无法加载,如下图:百思不得其解,查看国外网站,发现如下思路:function FormCtrl($scope) {should befunction FormCtrl($scope, $http) {.是您只注入了$scope导致错误的问题终于完美解决!...原创 2019-07-23 17:30:15 · 7445 阅读 · 0 评论 -
Table不换行处理方法
目前有两种方法:1.设置TD的样式为:overflow: hidden;text-overflow:ellipsis; white-space: nowrap;2.添加<nobr></nobr>标签前提:设置table的样式为:table-layout:fixed...原创 2019-03-27 15:14:07 · 5689 阅读 · 0 评论 -
【转载】前端性能优化总结
原文路径:https://segmentfault.com/a/11900000175562031.原则多使用内存,缓存或者其他方法减少CPU计算,减少网络请求减少IO操作(硬盘读写)2.加载资源优化静态资源的合并和压缩。静态资源缓存(浏览器缓存策略)。使用CDN让静态资源加载更快。3. 渲染优化CSS放head中,JS放body后图片懒加载减少DO...转载 2018-12-29 14:46:16 · 108 阅读 · 0 评论 -
【翻译】Jquery Validation Plugin官方手册
1.概述这个jQuery插件简化了客户端表单验证,同时还提供了大量的自定义选项。 如果您从头开始构搭建,且尝试将某些内容集成到具有大量现有标记的现有应用程序时,它也是一个不错的选择。 该插件捆绑了一组有用的验证方法,包括URL和电子邮件验证,同时提供API来编写自己的方法。 所有捆绑方法都带有英语的默认错误消息,并翻译成其他37种语言。该插件最初是由JQuery团队的成员JörnZaeff...翻译 2018-12-29 15:38:55 · 726 阅读 · 0 评论 -
【官翻】Thymeleaf框架简介
Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板 - 可以在浏览器中正确显示的HTML,也可以用作静态原型,从而在开发团队中实现更强大的协作。借助Spring Framework的模块,与您喜欢的工具的大量集成,以及插入您自己的功能的能力,Thymeleaf是现代HTML5 JVM Web开发...翻译 2019-01-10 15:47:26 · 4605 阅读 · 0 评论 -
Swagger简介
Swagger 是一款RESTFUL接口的、基于YAML、JSON语言的文档在线自动生成、代码自动生成的工具。Swagger Editor在完全专用于基于OpenAPI的API的第一个开源编辑器上设计,描述和记录您的API。 Swagger编辑器非常适合快速入门OpenAPI(以前称为Swagger规范)规范,支持Swagger 2.0和OpenAPI 3.0。Swagger Edit...原创 2019-01-17 17:57:34 · 2013 阅读 · 0 评论 -
【官方原版】Bootstrap Tooltips
概述使用CSS和JavaScript为本地存储的标题数据添加自定义Bootstrap工具提示,可基于CSS3实现动画效果。使用必知:工具提示依靠第三方库Popper.js进行定位。 您必须在bootstrap.js之前包含popper.min.js或使用包含Popper.js的bootstrap.bundle.min.js 或bootstrap.bundle.js以便工具提示工作! ...翻译 2019-03-20 16:26:46 · 4985 阅读 · 0 评论 -
jQuery.noConflict()【官方使用说明】
jQuery.noConflict( [removeAll ] )Returns: Object说明:释放对$变量及jQuery变量的控制权 增加版本:1.0 jQuery.noConflict( [removeAll ] ) 参数名称:removeAll 参数类型::Boolean 参数说明:是否彻底移除jQuery对象(包括JQuery本身)许多其他的JavaSc...原创 2019-03-12 17:02:00 · 1616 阅读 · 0 评论 -
Bootstrap Table组件入门(三)数据绑定方式
支持三种方式初始化表格:1.html格式数据(即静态数据);2.JavaScript传递数据;3.数据属性变量动态获取。1.静态表格:data-toggle="table"<table data-toggle="table"> <thead> <tr> <th>Item ID</th> ...原创 2019-03-25 17:47:47 · 5404 阅读 · 0 评论 -
Bootstrap Table组件入门(一)简介
近期在Datatable与Bootstrap-Table之间纠结了颇九,静坐细思量,终于还是选择后者,原因有二:项目中原本使用了Bootstrap,兼容性好; 后期其他项目可能也要基于Bootstrap开发,便于积累,而且个人感觉完成度比Datatable高。近期活跃度(2019-03-22)说明:基于Bootstrap的扩展表格组件,包含Radio,复选框,排序,...原创 2019-03-22 15:29:22 · 468 阅读 · 0 评论 -
Bootstrap Table组件入门(二)快速上手
引入资源:<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css"><script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"...原创 2019-03-22 15:46:02 · 399 阅读 · 0 评论 -
art-template插件简介
art-template插件简介说明特性说明art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。特性拥有接近 JavaScript 渲染极限的的性能调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)支...原创 2018-12-11 14:49:24 · 747 阅读 · 0 评论