- 博客(15)
- 收藏
- 关注
RSS订阅原创 分页
自定义分页插件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关注的人