- 博客(15)
- 收藏
- 关注
原创 分页
自定义分页插件html<div class="row"> <div class="col-xs-12 text-center"> <page page-conf="pageConf"></page> </div></div>js$
2019-02-28 17:56:39
216
原创 Echarts柱状图和折线图结合
因功能需要,需要体现业务办理量及环比,故通过echarts的柱状图和折线图结合共同达到该效果;①柱状图因区域数量不确定,为保证查看的效果,使用dataZoom组件用于区域缩放;②折线图因有正负数,故选择环比最小和最大值作为折线图的起始坐标。另图例使用渐变色,见option设置html elecBarChart需设定高度<div class="full-width"&...
2019-02-28 17:53:46
25940
原创 前端图标、工具、框架汇总(持续更新中)
1.动画animatehttps://daneden.github.io/animate.css/2.图标 阿里巴巴矢量图标库iconfonthttps://www.iconfont.cn/3.符号https://www.copypastecharacter.com/all-characters图表echarts 官方实例https://echarts.bai...
2019-01-31 20:07:37
559
转载 JS正则表达式验证数字非常全
<script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert(...
2019-01-31 20:01:13
7068
原创 Bootstrap 折叠(Collapse)插件使用且保证一级、二级菜单的选中状态
关于Bootstrap 折叠(Collapse)插件的基础使用见:http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html要求:1、二级菜单中任意一个选中,则一级菜单选中;未选中二级菜单,仅一级菜单的点击不算选中;2、页面通过跳转进入相应的路径,则对应的一级、二级菜单也要实现选中状态;实现方案:1.监听$loc...
2019-01-31 19:49:30
3462
原创 ng-class实现模块自由添加后的自适应
在项目中遇到这样的情况,在一个大管理模块下,有多个小模块,而这些小模块可以自由添加和删除,故需要模块内容自适应,通过ng-class实现该效果,如有遇到类似情况的,希望可以给大家参考;要求:每行最多3个模块,均居中显示;思路:模块数量可以分为X%3=0,X%3=1,X%3=2三种情况;占1/3的情况的为X%3=0或者X%3=1且不是最后一个元素,亦或者X%3=2且序号小于模块总数-2;...
2019-01-31 18:52:02
239
原创 区域联动自定义
因项目需要,区域需要实现效果中的结果,select的option无法自定义,故通过自定义的div来实现该区域框。具体代码如下:html<div class="service-list"> <div class="col-xs-12 overflow marginB20 no-padding text-bg-write"> <div c...
2018-12-11 12:28:42
806
原创 区域联动自定义div实现select标签的选择效果
因项目对区域的样式有要求,而select标签的option不能自定义,故通过div实现select标签的选择效果。说明如下:1.实现点击文字框和⌵区域框出现,点击其他地方区域框关闭,通过在该页面的最大级div(非body)上增加点击事件实现:ng-click="areaHide($event)";2.为实现整个框都可以点击,增加$event.stopPropagation(),阻止冒泡;...
2018-12-07 14:01:47
1024
原创 jquery-ui日期插件datepicker仅显示年月且含有全部按钮
1.日历插件仅显示年月,需要在html中作如下处理:<style type="text/css"> .ui-datepicker-calendar { display: none; }</style>2.因业务需要,需要查询全部,故使用清除按钮做为全部,后台查询方法体现在插件的onClose方法,如果放在beforeShow则会出...
2018-12-06 09:02:42
5556
5
原创 jquery-ui日期插件datepicker显示时分
一、日期插件datepicker显示年月日(见效果一)引入如下文件:<script src="lib/jQuery/jquery-ui.min.js"></script><script src="lib/jQuery/jquery-ui-timepicker-addon.js"></script>Html<div clas
2018-09-15 20:15:29
5278
原创 jquery-ui日期插件datepicker平铺在页面
jquery-ui日期插件datepicker一般是在点击输入框是弹出时间选择框,本文实现日期插件datepicker平铺在页面。关于datepicker中文显示及显示时分秒在后面文章说明。页面引入<script src="lib/jQuery/jquery-ui.min.js"></script>Html<div class="col-xs-6">...
2018-09-15 19:11:37
699
原创 基于canvas的图片裁剪上传及删除
项目需求:欲实现PC端图片从本地上传,在裁剪框中裁剪成一定比例的图片,该图片会在微信端同步展示,考虑手机的屏幕适配,需要宽度为640px(只需修改一下参数即可),本文以宽320px为例;实现方式:点击+框,图片加载在canvas画布,前端按照320/110比例裁剪图片,裁剪后将base64编码传至后台,后台将base64编码字符串转换为图片,并返回图片保存信息的实体类至前端展示;引入文件:<...
2018-07-13 18:23:48
1957
原创 ng-file-upload实现图片上传
通过ng-file-upload这个轻量级、跨浏览器的angular上传文件指令实现图片上传及删除;
2018-07-11 16:37:36
2622
7
原创 百度离线地图与angularjs4的结合
预实现效果:在内部局域网(无外网)的情况下,以百度地图为底图,实现放大缩小,业务指标在一定的范围内以不同的颜色做出指示,同时展示相应数据信息;方案分析:方案一:如果一定要以百度地图为底图,则需要采用地图瓦片拼接底图,用地图的api,同时利用地图Marker点添加图标Icon,标注Label;如果只是要求显示指定区域的轮廓可以采用方案二和方案三,会在后续的文章中体现;为方便描述,以珠海市为例方案二:...
2018-06-25 17:20:35
1052
原创 AngularJS中checkbox与动态ng-model的结合
checkbox的样式方案1:css3自定义checkbox,IE9不兼容html:<div class="col-xs-12" > <label for="chk" class="chkbox" ng-class="{'focus on':checked,'focus':!checked}"> <span clas
2018-06-22 15:41:48
7913
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人