前端
文章平均质量分 68
豆趣编程
需要交流的可以加我公众号:豆趣编程
展开
-
vue.js在IE浏览器显示空白页面
首先这里指的是ie的9+版本,在8及以下版本是无法实现的,因为ie8以下不支持vue中使用的ES5有Object.defineProperty()这个属性。1.安装babel-polyfill处理器,所以第一步需要下载:npm install babel-polyfill --save-dev2、在main.js文件中引入:import 'babel-polyfill';3、在webpack.base.config.js中将entry中的app:‘./src/main.js'改为下.原创 2021-09-06 11:19:52 · 783 阅读 · 0 评论 -
layui table处理奇葩后台数据实现复杂表头固定列功能
公司要求在手机上实现复杂表头表格,可以第一列固定,其他滑动的table功能,我看了下,在elementui中有这个功能,但是它的多级表头需要实现上下级的对象关系,而后台给我们返回的数据都是用colspan,rowspan渲染表头的,所以这个插件无法使用。 然后退而求其实,使用比较简单的layui中的table,因为它的ui做的还可以。layui table 的复杂多级表头是支持表头使用rowspan和colspan 的。文档:https://www.layui.co...原创 2021-07-05 17:22:19 · 2404 阅读 · 1 评论 -
js 对象 使用小技巧
js中中,Object,Array ,Function 等都属于引用类型,他们的变量名都是指向对象的指针。这样就有一个好处,当处理一个复杂json树的时候,想要单独改变其中某一个子对象属性时,不需要根据对象id遍历查找到这个对象了,而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量,这个变量就指向这个对象,这样就可以随意改变对象属性了。改变这个变量对应的对象,整个json树中的...原创 2019-10-24 20:31:14 · 199 阅读 · 0 评论 -
H5 drag拖拽移动小结及示例
drag api是h5中的新功能,用来拖拽页面元素挺有用的,先小结一下首先,基本概念声明,概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi.html想让一个元素能拖动,需要在html中添加属性 draggable="true"。唯一特殊的应该是img标签,不加这个属性也可以拖动<div id="blue" class...原创 2019-01-07 19:17:13 · 6686 阅读 · 0 评论 -
js中const,let,var的区别及作用域
要说他们的区别,首先需要了解作用域的概念作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。首先理解两个概念:块级作用域与函数作用域。1.块级作用域任何一对花括号 {} 中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。比如if(){} ,for(){}中的花括号都是块级作用域2.函数作用域很明显是fu...原创 2018-12-14 11:20:08 · 4957 阅读 · 0 评论 -
解决value为“&#x;”的字体编码提交为空问题(转码UNICODE)
最近使用HUI里面的图标每个图标都是由类似“&#xe604;”的编码完成的,需要hui里面的字体文件解码才能显示成为图标。但是我将“&#xe604;”赋值给input想提交到后台出现了问题,每次取到的value成了方框,传到后台显示为空<html> <head> <meta charset="UTF-8"> <tit...原创 2018-12-03 14:40:30 · 2183 阅读 · 1 评论 -
前端方法 导出excel和调用浏览器打印功能
浏览的的打印功能目前只有chrome做的最好,会生成a4纸大小的打印预览,而火狐会将打印预览变成电脑屏幕的100%;所以最好用chrome来实现使用场景:我的页面是基于table做的,如下图,需要两个功能 1.导出excel 2.直接点击打印按钮,要求可以调用浏览器的打印功能。由于页面比较复杂,使用java后台生成表格需要配置的东西过多,比较麻烦,所以我就想到了用html页面直接生成e...原创 2018-11-16 15:22:04 · 6477 阅读 · 2 评论 -
java+js递归循环树实现无限下拉菜单
目前项目中需要做文章管理,每篇文章要选择文章分类,而文章的分类有层级性且没有层级限制,所以选择分类时可能会面临无限下拉菜单我的想法是做成上图一样的如果有下一级鼠标悬浮则在右侧显示子集菜单,由于不知道具体有几层关系,所以在java端的数据获取和js端的dom对象生成都是有递归循环实现的。1.数据格式 库是mysql,标准的父子集关系2.java生成树状json数据//递归循...原创 2018-11-06 11:31:28 · 1826 阅读 · 0 评论 -
超好用的富文本编辑器froalaEditor(方便传图片和视频等)
最近项目有个文章管理功能,我对比了很多富文本编辑器,有的是上传图片不方便,有的是复制粘贴不方便,有的是但编辑器里面不能改变图片大小,最后,我找到了froalaEditor,可以说是集各种功能为一身,不但界面清爽,功能也十分全面,插入图片和视频都很方便,自己可以到官网体验一下:https://www.froala.com/wysiwyg-editor官方文档地址:https:/...原创 2018-10-31 20:48:16 · 35338 阅读 · 33 评论 -
jq属性选择器同时匹配多个条件
示例:$('#td1,#td2,p').css('color','red'); //选择内容不是id=td1 $('tbody td:not(#td1)').css('color','green'); //选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素(且的关系) $('input[attr1="a1...转载 2018-10-16 15:06:46 · 5117 阅读 · 0 评论 -
jqGrid使用multiselect翻页时保持选中状态
使用场景:表单需要提加jqGrid表格中选中的行的id,而表格由于数据太多需要翻页,但每次选中checkbox翻页再翻回来之前选中的消失了。所以需要做到翻页后再回来之前选中的checkbox继续保持选中状态。1.首先,要让表格出现checkbox选择框列,需要添加multiselect属性2.其次:需要了解onSelectAll,onSelectRow,loadComplete三个事件...原创 2018-09-30 14:32:36 · 3357 阅读 · 2 评论 -
viewer.js预览图片时添加文字描述简介
关于viewer.js的用法参考 https://blog.csdn.net/lianzhang861/article/details/81901907使用viewer.js时有时想展示图片的简介,可以对viewer 源码做一些修改。图中框住的位置本来是显示图片的alt信息的,我想把它替换成图片的简介。首先,需要在img标签加入data-summary属性,summary的名字可以...原创 2018-09-26 11:10:02 · 3256 阅读 · 0 评论 -
js+css动画实现动态流水线条效果
需求让实现每个模块之间的线动态流水化,用canvas肯定很复杂,所有用了比较投机的方法,css动画加js控制<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type=&q原创 2018-09-25 17:35:25 · 17191 阅读 · 14 评论 -
使用echarts的一点总结
首先要下载最新echarts,旧版可能很多功能不支持1.饼图中心写文字var myChart = echarts.init(document.getElementById('row-1-1')); var option = { color:["#53647E","#05B6F0"], title: { text: '23.5', ...原创 2018-09-18 11:32:30 · 1254 阅读 · 0 评论 -
利用NativeShare.js实现移动端分享功能
原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md下载地址:https://github.com/fa-ge/NativeShare起因最近有一个活动页需要在移动端浏览器分享网页到微信,QQ。虽然每一个浏览器都有分享到微信的能力,但不是每个都提供接口供网页来调用。及时有提供,浏览器暴露出的api也各不相同,而我...原创 2018-08-21 15:16:14 · 25461 阅读 · 16 评论 -
video在谷歌chrome浏览器中点击进度条就重新播放问题
chrome浏览器中video中视频可以正常播放,但拖动进度条到新位置player.currentTime一直为0,进度条无法拖动,点击进度条会从0开始播放。无论是原生video标签还是使用video.js都有这问题但是在火狐和ie浏览器中并没有后这种问题。 解决方案:如果视频时本地视频,暂时没有找到解决办法,只能自己写事件控制。只有把video的src换成服务器地址,进度...原创 2018-08-28 17:25:23 · 7836 阅读 · 4 评论 -
js iframe获取documen中的对象为空问题
首先src为同源的话,父window是可以获取iframe中的元素对象的。通过iframe获取window、document如果想获取iframe里的window或者document,可以使用 iframe.contentWindow、iframe.contentDocument iframe.contentDocument=iframe.contentWindow.document,不...原创 2018-12-07 10:36:49 · 16057 阅读 · 14 评论 -
什么是跨域及怎么解决跨域问题?
什么是跨域?这篇博文解释的挺清楚,我直接引用https://blog.csdn.net/lambert310/article/details/51683775跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。不明白没关系,举个栗子:http://www.123.com/i...原创 2018-12-07 11:36:04 · 52835 阅读 · 2 评论 -
vue-org-tree 组织结构图组件应用及源码分析
需求:最近业务需要做类似思维导图的组织结构树功能,需要能动态增删改节点,且每层的节点样式并不相同可用插件:网上能找到的组织结构图插件有:1.orgchart.js 地址:https://github.com/dabeng/OrgChart.js这个缩进方式太另类了,个人不喜欢;2.vue-orgchart 地址:https://github.com/spiritre...原创 2019-09-05 10:29:46 · 13595 阅读 · 14 评论 -
vue+elementUI+axios实现的全局loading加载动画
在请求较多的应用中,loading是必不可少的,否则人们不是认为程序卡了就是认为设备卡了普通的项目中,每次请求基本都要手动写一下loading的出现和消失,且不说有些麻烦,而且在ajax异步的情况下,如果做不好loading同步,经常会出现loading不出现的情况,而且不同浏览器兼容性较差。一.概念在vue项目中,有了统一配置机制,可以实现对loading的配置使每次请求前自动出现l...原创 2019-08-22 17:11:23 · 8019 阅读 · 3 评论 -
css美化浏览器滚动条
单独使用css的方法虽然简单,但只有chrome兼容好,ie只能改滚动条颜色,火狐不支持css修改1.先看chrome滚动条每部分的名字(直接引用的https://www.cnblogs.com/weboey/p/5996164.html中的)CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scroll...原创 2019-08-22 11:34:12 · 841 阅读 · 0 评论 -
js关闭当前页面
关闭当前页面function closeWindow(){ var userAgent = navigator.userAgent; if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) { window.location.href="about:blank"; window.c...原创 2019-08-16 11:40:14 · 37589 阅读 · 10 评论 -
js闭包
闭包是指有权访问另一个 函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。如:var a = 100;function addNum(){ var a=0; return function(){ a++; console.log(a) }}var plusNum=addNum();plusNum() //打印1a = 200; ...原创 2019-08-23 20:52:37 · 182 阅读 · 1 评论 -
elementui tabs自定义标签页 在标签后面增加添加按钮问题
本来我想实现这样的tab切换效果,能删除和添加但看了看elementui的文档,有点不太一样添加按钮跑天上去了,所以我就基于原本功能做了一些优化以实现我想要的结果1.首先在循环的el-tab-pane下面单独添加一个el-tab-pane,并取一个特别的名字,我叫add<el-tabs v-model="editableTabsValue" type="card"...原创 2019-06-28 12:00:34 · 20782 阅读 · 8 评论 -
elementui tree树形控件 单选问题
1.单选功能elementui中的树形可以设置checkbox,但是不能设置radio的单选功能但官方提供了自动勾选方法:想实现单选只需要给node增加点击事件,并控制setCheckedKeys即可<el-tree :data="treeData" show-checkbox node-key="offerSvcCode" ref="tree" che...原创 2019-06-14 17:26:23 · 12571 阅读 · 4 评论 -
elementui tree树形控件 default-expanded-keys失效及动态绑定问题
elementui 中的树想要默认展开官方文档中有介绍:1.默认展开失效问题https://element.eleme.cn/#/zh-CN/component/tree<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default...原创 2019-06-14 12:01:49 · 40999 阅读 · 5 评论 -
探索HTML5 Plus 拍照或者相册选择图片上传过程
起因:webApp中需要一个拍摄照片并上传服务器的功能由于我正好使用Hbuilder在做webApp,所以自然想到了使用h5+中的调用摄像头功能从此开始了踩坑之旅。。。1.手机连接电脑问题 如果你没有连接问题请跳过。 手机通过数据线本来连接电脑好好的,突然就中断了,然后再咋也连不上电脑了,使用360手机助手连接也没用,而且我的手机设置和数据线及接口肯...原创 2019-01-23 16:54:29 · 3272 阅读 · 1 评论 -
a标签中在href中写javascript this指向window
小小记录一下发现的问题a标签中在href中写javascript this指向window<a href="javascript:test(this);">跳转</a><script type="text/javascript"> function test(self){ console.log(self) }</script>...原创 2019-01-21 15:58:38 · 2509 阅读 · 0 评论 -
js获取url中参数生成参数对象
本方法摘抄自高程第三版225页//假设url中查询字符串是?q=javascript&num=10要将?后边的参数按“&”取出来并组合成一个对象function getQueryStringArgs() { //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.sub...原创 2018-12-21 16:09:47 · 3543 阅读 · 0 评论 -
viewer.js+lazyload.js实现滚动ajax异步懒加载及图片查看器
1.viewer的用法:关于viewer,一款强大的jquery图片查看器可以看这篇文章https://blog.csdn.net/lianzhang861/article/details/80702741下载地址:https://download.csdn.net/download/lianzhang861/10480866值得一提的是,不管你的img被什么元素包裹...原创 2018-08-21 10:04:29 · 3849 阅读 · 0 评论 -
JS异常: Uncaught RangeError: Maximum call stack size exceeded(jquery ajax参数错误)
function sendMsg1() { var userName = $("#username1").val(); var flag=true; if("" == userName || undefined == userName) { alert("用户名不能为空!"); flag=false; return false; } $.ajax({ url:$.c...原创 2018-08-30 16:32:00 · 11884 阅读 · 2 评论 -
HTML5新控件 - 日期和时间选择输入
转载自:https://blog.csdn.net/u014063717/article/details/50914466HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。注意:我测试了Chrome和Opera,火狐提供下拉式日历支持,其它浏览器可能仍是一个普通文本框。1,日期控件 - date<input type="date" valu...原创 2018-05-23 17:02:42 · 46867 阅读 · 2 评论 -
Bootstrap的datetimepicker详细示例
首先引入css和jshtml:只需要写一个普通的input<div class="row" style="margin-top: 10px"> <label class="col-sm-3 control-label" style="text-align: right; margin-top:5px;padding-left: 10px;paddin...原创 2018-05-23 14:51:46 · 38116 阅读 · 11 评论 -
jquery.onoff实现简单的开关按钮功能
一个按钮小插件,首先引入css和js <script type="text/javascript" src="../js/jquery-1.11.3.js" ></script> <link rel="stylesheet" href="../js/dist/jquery.onoff.css" /> <script原创 2018-05-23 10:37:08 · 9762 阅读 · 0 评论 -
layui upload插件的使用(java)以及怎么处理每个文件都要请求一次路径
一般的上传空间的原理都是使用input type='file'的h5元素实现的,那这个layui的原理也是如此。每次点击选择文件按钮,控件自动生成一个input,将文件选择,选择后将其files中的属性提取出文件名,大小等信息,关于files可看这篇文章。选择的文件可以累加,文件的files都会保存在构造函数内部https://blog.csdn.net/lianzhang861/ar...原创 2018-05-16 17:27:11 · 10420 阅读 · 6 评论 -
spring-mvc里静态资源访问返回404
在进行Spring MVC的配置时,通常我们会配置一个dispatcher servlet用于处理对应的URL。配置如下: <servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.Di...原创 2018-05-25 17:01:57 · 1004 阅读 · 1 评论 -
关于input type=“file”的及其files对象的深层探究
我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能但一般的做法只是简单的在表单中操作,我来研究一下深层东西想要了解它,就要知道它的内置对象,files页面上写一个input,然后选俩个图片,打印这个input对象$("input[name='file1']").change( function(e){ console.log...原创 2018-05-11 16:57:03 · 118092 阅读 · 25 评论 -
使用dropzone实现文件拖拽上传功能
前端代码,关于dropzone的配置我写在注释里了<html><head> <meta charset="utf-8" /> <%@include file="/webmana/meta.jsp" %> <title></title> <li原创 2018-05-11 15:34:44 · 2688 阅读 · 3 评论 -
Jquery ajax 同步阻塞引起的UI线程阻塞的坑(loading图片显示不出来,layer.load延迟)
今天想做一个点击地市用ajax重新获取数据刷新页面功能,因为ajax属于耗时操作,想在获取数据且加载页面时显示加载遮罩层,结果发现了ajax的好多坑。 例如如上栗子,我想点击按钮让遮罩层显示,ajax加载完毕后遮罩层消失。因为我想让loadChart()在赋值操作后执行,但如果async设为true时,往往会先执行loadChart(),之后才会赋值,所以我只能将ajax设为...原创 2018-03-02 20:27:07 · 13018 阅读 · 10 评论 -
zTree的使用,向后台传值和获取值选中
首先引入zTree的css和jshtml:<div class="row"> <label class="col-sm-4 control-label" style="text-align: right; margin-top:5px;padding-left: 1...原创 2018-05-10 19:17:16 · 10549 阅读 · 3 评论