- 博客(437)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 10个方法帮你搞定Web设计风格指南
为了确保整个团队在设计网站各个组成部分或在改善开发人员设计成果时彼此之间能够充分协调一致，你需要编写一份设计文档或Web设计风格指南作为指导。风格指南能够保证不同的页面共同拥有一套核心的体验效果。另外，其还有助于保证未来的开发或第三方创作工作不偏离最初的品牌路线，能够与整体品牌保持一致。Luke Clum曾在去年简略地介绍过如何编写风格指南并将其作为Web设计的第一步骤，那么现在我
2016-10-08 11:15:50
1628
转载 web设计中什么是渐进增强和优雅降级
何为渐进增强、优雅降级？常用两种策略：要么优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复），要么渐进增强（progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。两者间的（微妙）差别万一你正挠着后脑勺，试图找出“优雅降级”和“渐进增强”之间的差别，那么我可以告
2016-10-08 11:09:44
1898
转载 css3之animation制作闪烁文字效果
.box{ animation: change 1s ease-in infinite ; font-size: 36px; color:#f00; font-weight: bold} @keyframes change { 0%{ text-shadow: 0 0 4px #f00} 50%{ text-shadow: 0 0
2016-10-08 10:53:48
11612
转载 Jquery DIV滚动至浏览器顶部位置固定
获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。方法一：$(function() { var elm = $('.nav'); var startPos = $(elm).offset().top; $.event.add(wind
2016-09-28 15:49:57
6571
转载 js获取滚动条距离浏览器顶部,底部的高度
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。首先我们需要知道的两个定义是：滚动条距离浏览器顶部的高度 = 窗口滚动条高度；滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗
2016-09-28 15:43:59
22365
转载 AngularJS路由和模板
前言如果想开发一款类似gmail的web应用，我们怎么做呢？以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。今天说一下，AngularJS是如何实现前端路由功
2016-09-22 11:26:52
1951
转载 IE8下提示’console’未定义错误
在开发的过程中由于调试的原因,在代码中加入console.info("xxxx"),而未进行删除在IE8下测试该代码所在的页面报错,如下：需要注意的是,使用console对象查看对象信息,在IE8浏览器下未打开开发人员工具(F12)的情况下会报'console'未定义错误。解决办法：1、打开开发人员调试工具(F12)
2016-09-22 11:24:54
3556
转载 UI-Router:为什么开发者都不喜欢Angular.js内置的路由
UI-Router:为什么开发者都不喜欢Angular.js内置的路由字数5012 阅读4366 评论7 喜欢10Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。这是因为UI-Router有两个重要的特性：多样化视图嵌
2016-09-22 11:23:22
1545
转载 深究AngularJS——ui-router详解
1.配置使用ui-router1.1导入js文件需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。script type="text/javascript" src="JS/angular.min.js">script>script type="text/javascr
2016-09-22 11:18:00
1021
转载 AngularJS 工作原理详解
个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。 首先上一小段代码（index.html），结合代码我们来看看，angular一步一步都做了些什么。?1234
2016-09-21 14:35:47
813
转载 AngularJS主要组成部分及小实例
AngularJS的主要组成部分： 启动(startup) - 展示"hello world!" 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器的集合区 控制器(controller) - 应用的行为 模型(model) - 应用的数据 视图(view) - 用户能看到的 指
2016-09-21 14:30:34
927
转载 AngularJS 的 IE 兼容性
备注：AngularJS 1.3抛弃了对IE8的支持。可以在我们的博客上了解更多内容。AngularJS 1.2将继续支持IE8，但核心团队已经不打算在解决IE8及之前版本的问题上花时间。本文档介绍了互联网浏览器（IE）在处理自定义HTML标签及属性时的特点。如果你正计划在IE8或更早的浏览器上部署Angular应用请阅读本文。项目目前支持且将尝试修复IE9以上的bug 。持续
2016-09-21 14:25:59
6448
转载 AngularJS 单路由多视图(Multiple Named Views)
AngularJS $route的局限性：一个路由只能影响一个ng-view 不是所有页面只有一栏，往往有两栏或两栏以上,例如:左边的功能导航和右边的正文区或三栏布局,下图是一个大概示例 上面的图片来自:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views对了，此文会介绍:ui-router,它弥
2016-09-21 14:21:37
631
转载 AngularJS ui-router (嵌套路由)
介绍AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问 这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性. 我们将在示例中看到ui-route
2016-09-21 14:18:15
575
转载 Bootstrap3 CSS样式基本用法总结
按钮a,input,button都可以设置为按钮a标签按钮 a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式
2016-09-21 14:13:00
7679
转载 Think in AngularJS：对比jQuery和AngularJS的不同思维模式
导言 stackoverflow上有一个人问了一个问题：如果我有jQuery背景，我应该如何切换到AngularJS的思维模式？ 有一个回复非常经典，获得了两千多票。 为了让国内开发者也能领略到其中的核心思想，现把这个问题和答案翻译出来供大家参考。 Question 假设我已经熟悉了如何使用jQuery来开发客户端
2016-09-21 14:05:09
440
转载 angularjs1.3.0源码解析之directive
前言angular之所以使用起来很方便，是因为通常我们只需要在html里面引入一个或多个（自定义或内置的）指令就可以完成一个特定的功能（这也是angular推荐的方式），比如：一个简单的双向绑定（用ng-model指令）,或者模板循环渲染（用ng-repeat指令），又或者是模板是否显示（用ng-if指令）,而对于这些指令的内部实现一般我们无需太多关心（除非你想深入了解），我们更乐意于
2016-09-21 13:33:11
617
转载 AngularJs Using $location详解及示例代码
一、What does it do? $location服务分析浏览器地址栏中的URL（基于window.location），让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL，会响应到$location服务中，而在$location中修改URL，也会响应到地址栏中。 $location服务：暴露当前浏览器地址栏的URL，所以我们可以1.
2016-09-19 14:22:36
624
转载 angularjs页面传参方式
1. 基于ui-router的页面跳转传参(1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传过去。.state('producers', { url: '/producer
2016-09-18 14:45:49
1113
转载 深入理解ANGULAR中的$APPLY()以及$DIGEST()
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么，以及在日常的编码中如何应用它们。 探索$apply()和$digest()AngularJS提供了一个非常酷的特性
2016-09-18 14:33:51
351
转载 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。1、正方形最终效果： CSS代码如下：
2016-09-18 14:28:43
490
转载 angularjs 实现 window.onload() $(document).ready() 的4种方法
习惯了window.onload(),$(document).ready()，现在换成别的了，还真有点不习惯了。下面说一下常用的4种情况。1，html中直接写script src="lib/angular/angular.min.js" type="text/javascript">script>script type="text/javascript"> angular.e
2016-09-18 14:25:43
7845
转载 关于AngularJs数据递归呈现的实现的几种方式
在实践中，常常会有数据结构一致但深度不确定的数据。而通常情况下，对数据的处理会用到递归的方式。例如网站的无限级分类的展现，分类数据结构：复制var cate = [ { cateId: 1, cateName: '前端技术', child: [ { cateId: 4,
2016-09-18 14:23:58
4692
转载 AngularJS中ng-repeat渲染完成事件和中间变量的引用
ng-repeat渲染完成事件因为在用AngularJS期间, 经常用到ng-repeat, 而有时需要在其渲染完成时操作已经渲染的对象, 所以特在此记录一下添加渲染事件的方法, 以方便以后的使用;代码如下myApp.directive('onRepeatFinishedRender', function ($timeout) { return { restrict:
2016-09-18 14:22:35
2998
转载 AngularJs在IE6~7，及IE8特定版本下的兼容性问题解决方案
AngularJs在IE8之前版本中，会出现{{}}无法解析的现象，先记录解决方法。1、添加html5shiv.js和json2.js2、在html或body节加： ng-app="myapp" id="ng-app" class="ng-app:myapp">源引：http://blog.csdn.net/baif911/article/details/4252
2016-09-18 14:21:22
2613
转载 AngularJS 关于ng-model和ng-bind还有{{}}
ng-bind是从$scope -> view的单向绑定ng-modle是$scope view的双向绑定在AngularJS中显示模型中的数据有两种方式：p>{{text}}p>另一种是使用基于属性的指令，叫做ng-bind：p ng-bind="text">p>主要区别在于，使用花括号语法时，在AngularJS使用数据
2016-09-18 14:19:56
1733
转载 Angularjs兼容低版本IE
注：AngularJS1.3已经不支持IE8（包括IE8）以下的浏览器。更多信息请查看 我们的Blog 。AngularJS 1.2将继续支持IE8，但核心团队不会花时间去解决IE8或更早的IE浏览器问题。本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话，这篇文章非常适合你。该项目目前支持IE9+了，并会
2016-09-18 14:16:46
3069
转载 网页设计中常用的19个Web安全字体
1, Arial微软公司的网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，你可以考虑用Tahoma字体来替代。（苹果系统没有这种字体，但有一种对应于Arial的字体叫Helvetica，它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好，说
2016-09-12 15:21:12
9999
转载 angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”
通常我们知道指令默认是可以跟外界通信的.比如:<div ng-controller="mytest"> test自定义指令是可以访问到mytest控制器的scope要想把test自定义指令独立作用域,也就是说跟mytest切断关系:可以加
2016-08-24 14:15:09
6146
转载 Angular学习心得之directive——scope选项与绑定策略
大家知道，当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域，现在，我们来看看绑定策略的三种形式：& 、= 、@。首先是@，它将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的），什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来，还是不懂？看看下面的代码：
2016-08-24 14:12:59
725
转载 AngularJs 指令directive之controller，link，compile
关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：。这里列出directive的合法命名：ng:bindng-bindng_bindx-
2016-08-24 14:08:52
3168
转载 AngularJS内幕详解之 Scope
在AngularJS的代码库中呈现出了大量有趣的设计，最有趣的两个例子是scope的工作方式和directives(指令)的表现。有的人第一次接触AngularJS时就被告知directives是和DOM交互，或供你随意操作DOM，就像jQuery. 这立马变得非常复杂，试想，scopes, directives 和controllers相互作用.复杂的设置之后，你开始学习它先进的
2016-08-24 14:06:12
9593
转载 AngularJS内幕详解之 Directive
如果这个图表看起来非常的费解，那么这篇文章很适合你。(Image credit: Angular JS documentation) (Large version)声明: 这篇文字是基于 AngularJS v1.3.0 tree.到底什么是指令(directive)？LinkAngularJS中，指令是 通常是小的 组件， 这意味着跟DOM交互
2016-08-24 14:04:33
1306
转载 AngularJS Directive 隔离 Scope 数据交互
什么是隔离 ScopeAngularJS 的 directive 默认能共享父 scope 中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。当你需要创建一个可重复使用的 directive，只是偶尔需要访问或者修改父 scope 的数据，就需要使用隔离 scope。当使用隔离 scope 的时候，di
2016-08-24 14:02:30
540
转载 《AngularJS》5个实例详解Directive（指令）机制
1.一点小说明 指令的作用：实现语义化标签 我们常用的HTML标签是这样的： 一点点内容 而使用AngularJS的directive（指令）机制，我们可以实现这样的东西： 子面板1 子面板2 很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊
2016-08-24 13:58:20
416
转载 移动页面点击穿透问题解决方案
一.click与300ms延迟移动浏览器提供一个特殊的功能：双击（double tap）放大300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍：黯羽轻扬：HTML5触摸事件移动事件提供了touchstart、touchmove、to
2016-08-24 13:53:02
7591
转载 javascript事件机制详解（涉及移动兼容）
前言这篇博客有点长，如果你是高手请您读一读，能对其中的一些误点提出来，以免我误人子弟，并且帮助我提高如果你是javascript菜鸟，建议您好好读一读，真的理解下来会有不一样的收获在下才疏学浅，文中难免会有不同程度的错误，请您指正留言 PS：事件阶段一节请看最新博客，之前理解有误javascript事件基础我们的网页之所以丰富多彩并具有交互功能，
2016-08-24 13:51:04
1487
转载 点击穿透
What? -> Events!Why?How to fix?说在前面的话：点击穿透这种现象算是移动H5开发比较经典的问题，也常用来做面试题。借此现象谈谈移动事件。What现象描述： 页面中存在上下两个层，上层元素具有表单，链接或者绑定相应事件，上层元素点击或触摸，导致上层DOM改变，下层中同样位置的 元素触发点击事件。这种现象就是点击穿透（Ghost Clicks）。其实我觉
2016-08-24 13:48:35
2140
转载 也来说说touch事件与点击穿透问题
前言做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。touch事件的来源PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousem
2016-08-24 13:46:36
6120
转载 AngularJS 常见面试问题
第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用display:block 和 display:none 来控制显示和不显示。第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-mo
2016-08-24 13:39:47
1301
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人