前端开发工程师
摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目。借助他们可以使你的网站更加绚丽多彩。 Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片,比如你可以在图片上添加一束光。
摘要: MVVM(Model View ViewModel)是一种帮助开发者将数据从模型分离的设计模式。MVVM的ViewModel负责将数据对象从模型中分离出来,通过这种方式数据就很容易控制数据如何显示在视图上。
摘要: 表单验证是每一个项目必不可少的,他能够帮助我们过滤不正确的用户输入,保证系统数据正确。例如下面这样: kendo-ui也有自己的表单验证方法,下面就分享下kendo-ui的表单验证方式。
摘要: 最近项目中有一个特殊的需求,下拉选择部门,但是部门的层级关系要在下来框中体现出来,如下图 下面我就把实现的过程分享给大家,代码如下: dropdowntreeview.js /* * * DropDownTreeView * https://github.
摘要: 前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性。 混合: 在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性.
摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名,HTML引用时可以像css那样引用,如下: 注意:本文描述的一切都是基于1.4.0版本,除非有特殊标明。
摘要: 前面介绍了使用javascript生成二维码,但是这样并不能满足我们的需求,我们有时也会看到带有logo的二维码,本文就介绍如何生成带有logo的二维码。 简介: 主要使用了svg的文本和图像,我这里也有介绍的,可以先了解这个再来看。
摘要: svg与canvas一样都可以将文本和图像放在画布中,制作出不一样的效果。下面是如何使用svg来渲染文本与图像。 简介: SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。
摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙。
摘要: 前面分享了一些less的是用方法,包括在grunt中,今天在分享下使用gulp来编译less文件。首先需要安装gulp,如何安装请看文章。 安装插件: gulp编译less使用了gulp-less模块,所以package.
摘要: gulp与grunt一样,都是自动构建工具。和grunt相比它更突出一个流的概念,任务是一个接一个执行的。今天就分享如何用gulp做自动化。 安装: gulp也是基于node环境,所以安装gulp之前你需要安装node.js。
摘要: 最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题。前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json。代码如下: 后端Python: def jsonp(func): """Wraps JSONified output for JSONP requests.
摘要: 之前介绍了canvas制作图像,今天再分享svg制作图像。 简介: SVG 意为可缩放矢量图形(Scalable Vector Graphics)。SVG 使用 XML 格式定义图像。
摘要: 之前项目用过Less,现在负责的项目也要使用,所以就总结下Less,也方便以后查看。本文主要是讲浏览器端如何使用Less。 简介: LESS是一种由Alexis Sellier设计的动态层叠样式表语言。
摘要: 现在已经有许多站点使用Node.js,所以在Node.js上配置Less环境也是很重要的,下面分享下如何在Node上使用Less开发,前提是你电脑上已经安装node。 安装: 只需要执行下面一句就完成全局安装Less编译模块 npm install -g less 命令行中调用: 全局安装完Less之后就可以在命令窗口上调用Lessc命令就会将Less文件编译成css输出到窗口。
摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件。 安装: Grunt是基于node,功能模块化。
摘要: HTML5又增加了许多新的表单输入类型,不在仅仅是文本输入框。它让表单更丰富多彩了,下面是一个表单样表 从图中可以看出,表单样式更加多样,而且支持验证,实现了原本只能通过js才能完成的功能。
摘要: Node.js最重要的一个文件就是package.json,其中的配置参数决定了功能。例如下面就是一个例子 { "name": "test", "version": "1.
摘要: 大部分项目在部署之前都需要做的就是js、css文件的压缩、合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等。但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍。
摘要: 数据存储是每一个站点必不可少的功能,在HTML5之前通过cookie可以实现本地数据存储。但是cookie只能存储4kb的数据,并且cookie是随http请求一起发送到服务端,这必然浪费了带宽。
摘要: 全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等。HTML5中又新增了一些特殊功能的全局属性和事件。 属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素。
摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现。这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等。这就导致HTML5自己开始支持媒体功能。HTML5 DOM 为 和 元素提供了方法、属性和事件。
摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像。我们可以利用javascript的setInterval函数来实现动画效果。 下面是一个例子,小圆绕着红点圆心不停的转圆圈。
摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘。本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像、画布或视频。
摘要: kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件。现在分享项目中自己定制的基于window组件的弹窗插件,如果你的项目也是用的kendo-ui,只需要将组件代码引到项目中即可。
摘要: HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5。从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需。 历史: 这个 HTML 元素是为了客户端矢量图形而设计的。
摘要: 本文讲解的是javascript最基础也是最重要的东西--函数,之所以写这篇博文,是因为面试的时候问到了,也算是温故而知新了。 先上个例子,如果你看懂了,说明你已经理解了本文要讲的。
分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ckeditor tinymce ...
摘要: 继‘带箭头提示框’,本文将分享几款带箭头提示框。 qtipqTip是一种先进的提示插件,基于jQuery框架。以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费。
摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框 Install: 下载poshytip插件,解压之后将文件夹src拷贝到项目中,然后引入js和css文件。
摘要 我们在制作页面时必须要测的就是IE浏览器,毕竟IE浏览器市场占有率还是很高。随着HTML5的流行,可能项目要求兼容IE最低版本为IE8或者更高,但是还是有很多项目兼容IE低版本。所以我们经常会碰到页面在ie浏览器低版本中排版错乱的问题,这是因为IE浏览器有两个模式影响着页面,现在就来研究下 文档验证机制(DTD) DTD是html文件的验证机制,属于html文件组成的一部分。
摘要: 最近在整理项目时发现有些同事写的页面代码嵌套的太多,而且有些嵌套不对,比如内容。虽然功能实现了,但是对于浏览器渲染引擎的性能还是有些影响。所以就大体上的整理了下HTML标签的嵌套规则,也希望读者提出不对之处。
摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 这样在浏览器中显示的大小就是25px。那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 DOCTYPE html> 2 3 4 ...
摘要: 国际化是指将页面显示的信息翻译成不同语言,可以根据不同语言开发多个版本,然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本,而且维护起来也很麻烦,一个地方有问题就要修改所有版本。
摘要: 格式化是通过格式操作使任意类型的数据转换成一个字符串。例如下面这样 console.log(chopper.format('{0} - {1} - {2}', 12, 24, 25)); // outputs "12 - 24 - 25" 下面是一个完整的代码,可以复制到自己的项目中。
摘要: 我们经常在网上能够看到点击鼠标右键弹出自定义的菜单项,自定义菜单可以使菜单项的样式和网站主题相似,开发自己需要的功能。本文分享了自己制作的右键菜单项,其主要特点是,当菜单项超出浏览器的可视区域时,改变菜单项的显示位置。
摘要: 网上已经有很多树形插件,本文主要记录下曾经使用过的树形插件,方便以后查找,也推荐给大家使用 ztree Treeview jsTree fancytree jqtree Nestable jquery-file-tree treetabl...
摘要: 瀑布流布局已经很早就流行起来了,最近项目中用到了,就整理了下。最早使用的是pinterest(https://www.pinterest.com/),在国内最常见的就是淘宝了(http://guang.taobao.com/),蘑菇街了(http://www.mogujie.com/book/clothing/)等等。
摘要: 上一篇文章介绍了瀑布流的原理和简单的布局,这篇文章主要分享几款jQuery瀑布流插件 Flex Masonry shapeshift grid-a-license BlocksIt wookmark
摘要: 随着用户体验的重要性越来越高,目前前端和后台的解耦已经越来越明显了,这也加大了前后端的配合工作。在前端开发过程中可能我们需要一些后台返回的数据来完成交互效果,但是后台开发人员并没有完成后台功能,此时我们只能等,但是这样必然影响了开发进度,浪费了时间。
万维网联盟(W3C)昨天宣布,HTML5 标准规范终于最终制定完成了,并已公开发布。对于前端工程师来说,这无疑是一个振奋人心的好消息。 众所周知,HTML5改变了互联网,将成为下一代web标准,HTML5 拥有许多新的特性,用于绘画的 canvas 元素,用于媒介回放的 video 和 audio 元素,对本地离线存储的更好的支持,新的特殊内容元素,新的表单控件。
根据时间生成m位随机数,最大13位随机数,并且不能保证首位不为0 function ran(m) { m = m > 13 ? 13 : m; var num = new Date().
摘要: 由于javascript语言的特殊性导致它有很多特殊的条件判断,下面我列出了一些特殊的条件判断语句和他们对应的结果。 1 if(condition) { 2 console.
摘要: 面试一个大公司的时候问到了一个问题,让我谈谈主要的浏览器内核以及他们的特点,当时并没有详细的回答,回来之后自己在网上找了找资料,总结了下分享给大家。 简介: 在维基百科上是这样介绍浏览器内核的,网页浏览器的排版引擎(Layout Engine或Rendering Engine)也被称为浏览器内核、页面渲染引擎或模板引擎,它负责取得网页的内容(HTML、XML、图像等等)、整理消息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。
摘要: ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言。
摘要: 大部分动态网站都支持从客户端到服务器传递数据,如果传递的数据被别人截取就非常危险,尤其是一些用户名密码之类的。这时候就需要我们在传递数据之前对数据进行加密。现在的加密算法已经有很多了,例如:MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC等等。
摘要: 现在来分享9款关系图插件 arborjsurl:http://arborjs.org/halfviz/#/a-new-hopegithub:https://github.com/samizdatco/arborbrowser:IE6+,chrome,firefoxresume:基...
摘要: 这是前端数据可视化最后一种,立体图。下面分享4款立体图插件 PhiloGLurl:http://www.senchalabs.org/philogl/github:https://github.
摘要: 继图谱插件之后,下面分享6款地图插件 Kartographurl:http://kartograph.org/github:https://github.com/kartograph/kartograph.pybrowser:Internet Explorer 7+,chrome,Firefoxresume:Gregor Aisch开发的一个基于JavaScript和Python的非常炫的、完全使用矢量的库。
摘要: 继图表插件,再来分享9款图谱插件 crossfilterurl:http://square.github.io/crossfilter/github:https://github.com/square/crossfilterbrowser:官方未说明resume:一个可以操作大型、多元数据集的库,帮助数据分析。