- 博客(65)
- 收藏
- 关注
RSS订阅原创 vue+treeTable 树形表格
dataTranslate.jsimport Vue from 'vue'function DataTransfer (data) { if (!(this instanceof DataTransfer)) { return new DataTransfer(data, null, null) }}// 数据转换DataTransfer.treeToArray = ...
2018-12-11 20:46:39
4316
原创 vue-cli 解决Invalid Host header
在webpack.dev.conf.js中添加：disableHostCheck: true devServer: { public: 'local.kingsum.biz', clientLogLevel: 'warning', historyApiFallback: true,hot: true,compress: true,host: HOST || conf...
2018-09-26 16:24:08
1483
原创 使echarts图表兼容ie浏览器
echarts 在谷歌浏览器中可以所向披靡，丝毫不会出现因兼容性问题出现图像不显示的结果。而在ie中似乎却不太混得开。最近在做各种图表的展示，引入了资源echarts.js 谷歌中正常显示，而在ie中却出现了如下问题: 初始化的时候图表不显示，在F12开启的情况下 刷新页面，图表正常显示，经过调试发现 echarts.init(document.getElementById(‘firstEch
2018-01-08 11:40:50
11575
转载 echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全如图：解决办法1：xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置。（当然yAxis也是一样有这个属性的）[html] view plain copy print?axisLabel: { interval:0, rotate:40 }
2017-12-25 09:58:31
1108
转载 如何让图片按比例响应式缩放并自动裁剪的css技巧（同时也适用于一些轮播父容器响应式缩放）
响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不想让图片拉伸变形，自动裁剪掉两边多余部分、这该如何解决呢？首先，今天准备了四张宽高各不相同的素材，如下图所
2017-12-22 10:06:34
3918
转载 css实现多行文本溢出显示省略号(…)
省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 代码如下 overflo
2017-12-22 09:22:03
631
原创 ionic应用在mac上使用xcode7.0进行iphone真机调试
1.开发环境：假设已在mac系统下配置好ionic开发环境(目前使用ionic1.7.14)以及安装好xcode7.02.在命令终端切换到ionic项目路径下，运行添加ios平台命令 ionic platform add ios3.ios平台添加成功后，找到ionic项目 > platforms > ios > xxx.xcodeproj文件，双击用xcode打开；或者在xcode导入
2017-07-18 17:37:59
5281
转载 深究AngularJS——自定义服务详解(factory、service、provider)
前言3种创建自定义服务的方式。 FactoryServiceProvider大家应该知道，AngularJS是后台人员在工作之余发明的，他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用，如果你是前端人员不了解什么是分层，那么你最好问问你后台的小伙伴。dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就
2017-06-08 17:49:00
575
转载 mac 命令行 安装 需要管理员 权限“Please try running this command again as root/Administrator”的解决办法
我们在进行mac 命令行安装软件的时候，有的时候会遇见这样的问题：Please try running this command again as root/Administrator.如图：解决办法是在终端输入：[plain] view plain copyprint?sudo chown -R $USER /usr/l
2017-05-15 18:41:47
2219
原创 在基于angular/cli搭建的angular2项目中集成systemjs加载器
在学习angular2教程时，里面的“英雄编辑器”实例项目在模拟服务（内存 Web API）中获取和保存数据时用到了In-Memory Web API，那么怎么将In-Memory Web API添加到基于angular/cli搭建的项目的systemjs加载器中呢？1.打开package.json,添加依赖包： "angular-in-memory-web-api": "^0.3.1
2017-04-06 14:46:38
3038
原创 从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0
现在Angular CLI在npm下通过@angular/cli来替代angular-cli，并且它只支持Node6.9.0或更高的版本，npm 3或更高的版本。所以在升级angular cli之前，请先升级node和npm。如果你使用Angular CLI beta.28或更低的版本，你需要先卸载掉 angular-cli包：npm uninstall -g angular-cli
2017-04-01 17:25:12
6245
4
原创 使用WebStorm创建Angular2项目
要想在WebStorm里创建Angular2项目，前提是需要安装angular-cli的。使用npm安装angular-cli的方法《使用 angular-cli 创建angular2 项目》。1.在webstorm中新建一个angular cli项目，如下图所示。第一个框中输入项目的路径和名字第二个选的是nodeJs安装的位置 第三个是Angular-cli的文件夹位置,我是
2017-03-30 11:15:35
15365
3
原创 使用 angular-cli 创建 angular2 项目
起初使用angular-cli创建angular2项目时，有好几次都是失败告终。最后发现是node-sass没有安装上，原来是npm翻墙的缘故。使用淘宝官方制作的npm镜像站点cnpm就可以正常创建项目了。下面是一部分报错信息：说一下使用angular-cli 创建angular2项目的步骤吧：1.安装cnpm$ npm install cnpm以后就用cnpm
2017-03-30 10:38:21
7372
1
原创 如何在TypeScript中应用像Jquery之类的第三方JavaScript框架
类型定义文件(*.d.ts)要在TypeScript引用第三方JavaScript库和框架，首先要了解TypeScript的类型定义文件。TypeScript的类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包，如：Jquery。所有的类型定义文件都是以.d.ts结尾的。这个文件实际上就是一个TypeScript模块，它把你要使用的JavaScript
2017-03-28 19:26:51
16193
1
原创 ES6新特性
ECMAScript6，也称为ECMAScript2015，是JavaScript语言的下一代标准。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。我们可以点此访问traceur-compiler 在线版本实时编辑ES6代码并查看转换后的结果，代码运行结果会在console显示。最常用的ES6特性let, const, class,
2017-03-23 14:32:00
549
原创 使用WebStorm开发TypeScript的设置
起初编写完TypeScript后是在命令行工具下编译ts文件，后来发现ts文件内容一旦发生改变就要手动去执行编译命令，难免降低了工作效率。后来发现原来强大的Webstorm IDE也可以开发TypeScript，还支持自动编译成js文件，用了那么久Webstorm竟然都没发现，要不要这么爽？？下面说一下完整的设置步骤吧1.去node.js官网下载安装node.js2.下载安装新
2017-03-22 18:14:15
20606
1
原创 npm常用指令以及使用淘宝镜像cnpm
npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。有了npm，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
2017-03-22 15:48:20
17078
原创 解决Ionic2浏览器跨域问题
ionic2项目从Localhost向远程服务器提交请求，在真机中可以返回正确的数据,但是在Chrome中遇到了跨域的问题。
2017-03-22 15:30:02
7852
1
转载 TypeScript：更好的JavaScript
作为编程语言的TypeScript关于TypeScript，首先要认识的一点就是：它是Anders Hejlsberg的作品。Anders是第一流的编程语言设计师，也是第一流的编译器实现者。作为Object Pascal和C#之父，Anders这次仍然采用了此前的做法：他设计了一种新的语言，并实现了这种语言的编译器，来改进一种已有的语言。但这次又和此前有所不同，此前无论是Object Pasc
2017-03-21 17:11:53
4293
1
原创 TypeScript学习起步
在学习TypeScript之前，首先要了解TypeScript与JavaScript的不同。TypeScript是微软公司于2012年发布（用以替代JavaScript）的一门语言，提供了类、模块和接口来帮助构建组件，帮助开发人员编写和维护应用程序。TypeScript是一个应用程序级的JavaScript开发语言。TypeScript是JavsScript类型的超集，它可以编译成纯J
2017-03-21 17:08:53
822
原创 Ionic使用指定IP地址启动服务器
默认情况下，使用命令ionic serve启动服务器调试程序，必须通过localhost（或者127.0.0.1）来访问。这时手机无法访问该程序。在网上搜到的，要使用指定IP地址，应该这样启动：ionic serve --address 192.168.xxx.xxx
2017-03-20 11:23:15
6218
原创 使用命令行工具构建ionic项目
第一步：安装ionic和cordovanpm install -g cordova ionic需要首先安装好nodejs，然后通过npm来安装第二步：创建ionic项目tabs使用下面的命令创建一个新的项目（默认的tabs示例）ionic start --v2 myApp tabs初始目录结构如下第三步：运行ionic项目cdmyAppionic
2017-03-20 11:13:32
605
原创 Angular 1.6版本路由中/#!/的解决方法
AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为html页面的a标签设置href路由链接切换不同的视图。通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。结果查看了下浏览器地址栏，默认视图链接竟然显示“#!/..”,是的，中间多加了个！
2017-03-17 15:07:07
6053
转载 Angular 1.6提示$http.get(...).success is not a function
1.在使用Angular 1.6版本的$http服务时会抛出异常：$http.get(...).success is not a function或者$http(...).success is not a function异常代码如下：[javascript] view plain copyprint?//请求api $http.get('
2017-03-17 13:59:08
656
转载 网站优化：引用CDN公共JS库
什么是CDN公共库？CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。为什么要引用CDN公共库？1.减少等待时间CDN-Content Delivery Network（内容分发网络），通过各种各样的服务途径把你的一
2017-03-09 10:37:59
2500
原创 freemarker如何获取页面请求的参数
用例描述:A页面:http://localhost:8080/Houser/newsManage.action?categoryname=402880f5122bc83801122bd89fae0005B页面:newsManage.ftl在ftl页面这样写:${request.getParameter("categoryname")}但是假如你要用正确写法：1)
2017-03-01 10:15:13
14793
转载 如何将页脚固定在页面底部
文章转载于：W3CPLUS作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚foote
2017-02-22 10:30:25
673
原创 如何写出漂亮的js代码
javascript代码和其他脚本语言一样，都要合理的组织好，不然到最后js代码也是比较乱的。 我把JS的组织分成了三个阶段，看看您现在属于哪个阶段。 初级阶段：JS代码从头顺序写到尾,过程化 if(document.getElementById("username").value == ""){ alert("用户名不
2017-02-16 18:11:42
422
原创 js判断是否是微信内置浏览器以及自动关闭页面回到会话窗口
js判断是否是微信内置浏览器：function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return
2017-01-22 15:32:32
6290
转载 freemarker使用小结
FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成:1,文本:直接输出的部分2,注释:格式部分,不会输出3,插值:即${...}或#{...}格式的部分,将使用数据模型中的部分替代输出4,FTL指令:FreeMarker指定,和HTML标记类似,名字前加#予以区分,不会输出下面是一个FreeMarker模板的例子
2017-01-18 16:15:32
839
原创 ajax模拟关键字智能匹配搜索效果
准备数据keyword.json：（这里只贴出部分数据）[ {"id":1,"initial":"ad","keyword":"奥迪"}, {"id":2,"initial":"ada4l","keyword":"奥迪A4L"}, {"id":3,"initial":"ada6l","keyword":"奥迪A6L"}, {"id":4,"initial":"adq5","ke
2016-12-22 16:41:08
3110
1
原创 Sass实现颜色卡的制作
效果图：实现代码：html： var list = ['red', 'orange', 'yellow', 'green', 'blue', 'purple','black']; var html = ''; for(var i = 0; i < list.length; i++){ var ul = document.createElement('ul'
2016-12-15 17:24:07
773
原创 CSS预处理器——SASS学习笔记(二)
Sass的控制命令1. @if@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 外，还可以配合 @else if 和 @else 一起使用。假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参
2016-12-15 17:22:33
1315
原创 CSS预处理器——SASS学习笔记(一)
什么是CSS预处理器？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只需要使用这种语言进行编码工作。通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特
2016-12-15 17:21:22
5117
原创 Javascript中的事件处理程序
事件是文档或浏览器窗口中发生的一些特定的交互瞬间事件流事件流描述的是从页面中接受事件的顺序。而IE和Netscape开发团队提出了完全相反的两个事件流的概念。IE的事件流是事件冒泡流；Netscape的事件流是事件捕获流。事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。事件捕获：不太具体的节点应该更早接收到
2016-11-02 19:36:01
1210
原创 DOM探索之控制页面元素
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。HTML文档可以说由节点构成的集合，DOM节点有:1. 元素节点：像、、等都是元素节点，即标签。2. 文本节点：向用户展示的内容，如...中的文本内容。3. 属性节点：元素属性，如标签的链接属性
2016-10-26 19:20:37
810
原创 DOM探索之基础详解
DOM为document、object、model三个单词的缩写，直译过来即文档对象模型。DOM的地位我们知道，一个网页是由html来搭建结构的，通过css来定义网页的样式，而javascript赋予了页面的行为，通过它我们可以与页面进行交互，实现页面的动画效果等等。那javascript究竟通过什么来实现的呢？学过javascript的同学知道，通过ECMAScript这个标准，我们可以
2016-10-25 16:59:35
2329
1
原创 一些CSS和浏览器之间的怪异显示及对应的解决办法
有的时候编写的CSS样式没有什么错误，但在浏览器中却会出现一些很奇怪的问题，明明没有间距的地方出现了间距，没有空隙的地方多了一条白线，或者IE、Firefox下显示的效果截然不同，这些都与使用CSS Hack的原因相同。下面列举几个在工作中经常会用到的样式属性所存在的问题及解决方案。（1）inline-block的兼容与4px空隙问题在实际工作中，我们经常会用到“inline-block”
2016-09-24 14:49:02
1423
原创 学习编写jquery插件—美化表格
当了这么久的码农，也用了无数次别人写的插件，是时候该学习学习自己动手写插件了。今天先借用别人写的超简单、实用的美化表格小插件，来学习下jquery插件的编写。写插件之前先想好插件要实现的功能，这里写的美化表格插件就是让表格的奇偶行颜色不同，然后鼠标移到某行上，某行可以高亮显示。接下来想想插件的实现原理，美化表格无非就是找到表格的奇偶行，然后添加不同的class，活动行高亮显示也很简单，只要
2016-09-21 19:27:03
1209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人