08 2013 档案
摘要：之前写过一篇可拖动的DIV讲如何实现可拖动的元素，最后提出了几点不足，这篇文章主要就是回答着三个问题1. 浏览器兼容性2. 边界检查3. 拖动卡顿、失灵先附上上次代码 1 2 3 4 Test 5 41 42 43 44 Dialog 45 46 This is a draggable test. 47 48 49 108 109 View Code ...
阅读全文
摘要：在之前的博客CSS hack中我有提到，一个问题的解决让我对CSS hack的态度从不屑一顾，到认真研究了实验一下，事情是这样的，最近产品发布，向来狂妄的我被一个bug纠缠住了，甚至丧气的表示我做不出来，说来也惭愧，难住我的并不是造火箭这样的难题，只是个背景图片。。。前世今生最近为产品做了一个扁平化的新Theme，看起来很美观，公司的艺术家看后表示需要一张有深意的背景图片，发给我了放上去后一看艺术家就是艺术家，果真和Theme很搭而且让网站高端了很多（自我感脚），兴冲冲的就发布了上去，主要代码大概是这样的 Test 很...
阅读全文
摘要：之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。什么是CSS hack由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。CSS 内部hack正经的CSS是这么写的 Test ...
阅读全文
摘要：在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。Tips绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的元素可以使元素脱离文档流，相对于其定位的父元素或者屏幕定位，可以利用这点儿，通过改变元素与已定位父元素的位移来实现元素拖动。关于定位知识具体可以看看CSS布局 ——从display，position， flo
阅读全文
摘要：JavaScript 有Date、Array、String等这样的内置对象，功能强大使用简单，人见人爱，但在处理一些复杂的逻辑的时候，内置对象就很无力了，往往需要开发者自定义对象。对象是什么从JavaScript定义上讲对象是无序属性的集合，其属性可以包含基本值、对象或函数。也就是说对象是一组没有特定顺序的属性，每个属性会映射到一个值上，是一组键值对，值可以是数据或对象。最简单的对象JavaScript的一对花括号{}就可以定义一个对象，这样的写法实际上和调用Object的构造函数一样var obj={};var obj2=new Object();这样构建出来的对象仅仅包含一个指向Objec
阅读全文
摘要：用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱。每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。私有变量、函数在具体说prototype前说几个相关的东东，可以更好的理解prototype的设
阅读全文
摘要：最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。 CSS2/media 在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用media使某些style只在打印的时候生效 ...
阅读全文
摘要：之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包，觉得写得很清晰，可以简单理解闭包产生原因，但看评论都在说了解了作用域链和活动对象才能真正理解闭包，起初不以为然，后来在跟公司同事交流的时候发现作用域和执行环境确实很重要，又很基础，对理解JavaScript闭包很有帮助，所以在写一篇对作用域和执行环境的理解。作用域作用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的作用域有全局作用域和局部作用域。单纯的JavaScript作用域还是很好理解的，在一些类C编程语言中花括号内的每一段代码都有各自的作用域，而且变量在声明它们的代码段外是不可
阅读全文
摘要：JavaScript是面向对象的语言，使用”.”操作符可以访问对象的属性和方法，而对于基本类型（null, undefined, bool, number, string）应该是值类型，没有属性和方法，然而var s='this is a string';alert(s.length);alert(s.indexOf('is'));结果很简单，但是仔细想想还真奇怪，string不是值类型吗！怎么又有属性又有方法的！内置对象JavaScript有一系列内置对象来创建语言的基本功能，具体看一下BooleanBoolean 对象表示两个值："true&quo
阅读全文
摘要：之前写过一篇JavaScript命名空间的文章，写完后一对比对jQuery的简单使用很是惊羡，看了看人家源码，用的原理很类似啊，改进一下之前的版本，做个简易版的jQuery之前的代码(function () { var _NS = function () { } _NS.prototype.select = function (selector,context) { var context = context || document; ...
阅读全文
摘要：使用过Java、C#的同学对命名空间非常的熟悉，在复杂的系统中会有N多的函数、对象，语言提供的、架构预定义的，这么多的函数和对象，由于编程规范要求起有实际意义的名字，难免会重名发生错误调用，而有了命名空间烦恼就没有了，不但可以分类组织函数与对象，还可以形成隔离，解决重名问题。 使用JavaScript就没有这么舒服了，Javascript只有函数作用域，什么块儿啊、神马文件啊统统都认为是一个命名...
阅读全文
摘要：做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。简单演示 两个DIV，第二个向上移动50px，正常情况应该是这样的第二个div遮住了第一个div，对第二个添加z-...
阅读全文
摘要：很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。简单的事件需求事件并不是可有可无，在某些需求下是必需的。以一个很简单的需求为例，在web开发中Dialog很常见，每个Dialog都有一个关闭按钮，按钮对应Dialog的关闭方法，代码看起来大概是这样 Test Dialog ...
阅读全文
摘要：属性构造到了window对象在JavaScript中构造函数其实是一个使用new操作符调用的函数，在使用呢我调用时， 构造函数内部用到的this对象会指向新创建的对象function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new Person('Byron',24,'Software Engineer');在这个例子中构...
阅读全文
摘要：一个简单的函数绑定在JavaScript与DOM交互中经常需要使用函数绑定，定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上，绑定函数经常和回调函数及事件处理程序一起使用，以便把函数作为变量传递的同时保留代码执行环境。 上面的例子创建了一个handler对象，handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的：当点击按钮的时候触发该方法，弹出对话框显示handler定义的message，然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存hand...
阅读全文
摘要：最近看JavaScript高级程序设计，大有收获，接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔，里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因，写出的代码通过大量if判断或者try，catch语句将函数引导到正确代码处。每次调用这个函数的时候，都要先进行浏览器能力检查，首先检查浏览器是否支持内置的XMLHyypRequest对象，如果不支持然后检查各版本基于ActiveX的XMLHttpRequest，每次调用该函数都是这样，其实当第一次执行完后，如果浏览器支持某个特定XMLHttpRequest对象，那么下次执行的时候这种支持性并不会改变，没必要再进行
阅读全文
摘要：之前在Ajax初步理解中介绍了对Ajax的初步理解，本文将介绍在ASP.NET中如何方便使用Ajax，第一种当然是使用jQuery的ajax，功能强大而且操作简单方便，第二种是使用.NET封装好的ScriptManager。$.ajax向普通页面发送get请求这是最简单的一种方式了，先简单了解jQuery ajax的语法，最常用的调用方式是这样：$.ajax({settings}); 有几个常用的setting，全部参数及其解释可以去jQuery官方API文档查询1. type:请求方式 get/post2. url:请求的Uri3. async：请求是否为异步4. headers：自定义的h
阅读全文
摘要：最近在项目中经常会使用Ajax技术，用法上倒是熟练了，但是只知其然，不知其所以然，抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解，在此总结一下。什么是AjaxAjax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据，这个过程是同步的，顺序执行。AJAX 在浏览器与 Web 服务器之间使
阅读全文
摘要：在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作，而点击页面其它地方隐藏该div。比如很多导航菜单，当菜单展开的时候，就会要求点击页面其它非菜单地方，隐藏该菜单。先从最简单的开始，假如页面有一个id为test的div，我们要实现点击页面其它地方隐藏该div: 对于这个问题一般有两种思路，这两种思路都会利用事件冒泡这一原理，想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点，所以这里只是简单介绍一下事件冒泡，事件冒泡IE的事件冒泡：事件开始时由最具体的元素接收，...
阅读全文
摘要：网页上定义字体大小有常见三种单位，px、em、ptpxpx是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。emem：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em,
阅读全文
摘要：初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线 Test 中文English English中文 从上到下四条线分别是顶线、中线、基...
阅读全文
摘要：接触JavaScript两年多遇到过各种错误，其中有一些让人防不胜防，原来对JavaScript的误会如此之深，仅以此文总结一下常见的各种想当然的误区String replacestring的replace方法我们经常用，替换string中的某些字符，语法像这样子string.replace(subStr/reg,replaceStr/function)第一个参数是要查找的字符串或者一个正则表达式，第二个参数是想替换成的字符串或一个方法，我们可以这么使用"I'm Byron".replace("B","b") // I'
阅读全文
