2011年12月9日
可拖动列表
摘要： 前天做了个树形菜单，今天接着让它可拖动。补充一点：要禁止移动中选中文字，FF可以设置CSSxxxx{-moz-user-select:none;}其他的浏览器可以设置XXXX.onselectstart = function(){return false}一种实现原理就是点击没目标元素之后，创建一个占位元素（或者复制一份目标元素，即拷贝B），然后拖动目标元素（或者复制的来的新元素B）；找到相应的位置之后，插入目标元素。清除占位元素或者B。比如有一个列表：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q 阅读全文
posted @ 2011-12-09 13:51 西山 阅读(777) 评论(0) 推荐(1)
2011年12月8日
添加浏览器的用户样式表
摘要： web前端都知道，CSS的来源有三种一、user agent stylesheet用户代理的默认CSS（就是浏览器默认的CSS，http://www.cnblogs.com/xesam/archive/2011/12/01/2270553.html）二、author style sheets开发人员定义的CSS（前端开发人员写的external-style，embeded-style，inline-style）三、user style sheets用户自定义的CSS（用户自己写的）优先级由上至下依次增高user agent stylesheetuserdeclarations（normal）a 阅读全文
posted @ 2011-12-08 14:19 西山 阅读(10049) 评论(1) 推荐(4)
各浏览器的鼠标位置测试
摘要： 废话不多说，下面分别检测各个浏览器下的e.pageXe.layerXe.offsetXe.clientXe.x属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> < 阅读全文
posted @ 2011-12-08 11:53 西山 阅读(8158) 评论(3) 推荐(0)
2011年12月7日
JS构建页面的DOM节点结构
摘要： 小提示：关于数组的concat和push方法。两者的区别主要有：concat是连接数组，不会修改原数组，返回值为连接后的数组，与push的重要区别是concat会展开数组的第一层子数组push是添加数组元素。就地修改原数组，返回值为添加的新项，push不会展开传入的数组。 var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a); console.log('b',b); console.log('c',c); c 阅读全文
posted @ 2011-12-07 16:25 西山 阅读(2152) 评论(0) 推荐(0)
一个简单的树形菜单
摘要： 说到树形菜单，貌似一般是用在一些管理系统里面的，我是还没有用到过，有些zTree之类的插件已经做得比较好了。我练习一下，以免不时之需。树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。给个例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><he 阅读全文
posted @ 2011-12-07 12:55 西山 阅读(11025) 评论(0) 推荐(0)
2011年12月5日
浅析Prototype的模板类--Template
摘要： 用过Prototype的人都知道，里面有个类叫做Template，用法示例如下： var str = '#{what} may have gone, but there is a time of #{how}'; var object = { what : 'Swallows', how : 'return' } var template_1 = new Template(str); var result = template_1.evaluate(object); console.log('result... 阅读全文
posted @ 2011-12-05 21:31 西山 阅读(1354) 评论(0) 推荐(0)
浅析字符串的replace方法应用
摘要： 按照W3C的说明，String对象的replace方法调用方式是stringObject.replace(regexp/substr,replacement)。这两个参数都是必须的，replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。对于replacement 阅读全文
posted @ 2011-12-05 14:19 西山 阅读(3379) 评论(0) 推荐(0)
2011年12月4日
模拟多桌面
摘要： 这段时间学习下linux，觉得linux的多桌面不错，于是顺便用js实现一个，虽说不知道有什么用，就当玩玩。PS：颜色的设定没有考虑，桌面多了颜色就会出错。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" conte 阅读全文
posted @ 2011-12-04 01:02 西山 阅读(330) 评论(1) 推荐(0)
2011年12月2日
幻灯片的实现
摘要： 幻灯片 阅读全文
posted @ 2011-12-02 21:03 西山 阅读(489) 评论(1) 推荐(0)
2011年12月1日
浏览器默认样式
摘要： 有个网站总结了IE6/7/8/9，FF3.6.3，webkit（r7042），opera10.51的默认样式，熟悉一下可以让我们更好的明白一些书写CSS过程中的差异。网站地址：http://www.iecss.com/熟悉这些之后可以明白一、使用CSS reset的原因。二、*{margin:0;padding:0;}一刀切的做法为什么不提倡三、网上广泛流传的CSSreset为什么也有人不提倡从对比图可以看出，不部分标签其实是没有margin或者padding的。其中又有些标签一般是很少用到的，就算用到了，一般也会特殊定制。对于一般的应用，简单的css reset（按需）就可以了。比如：bod 阅读全文
posted @ 2011-12-01 14:35 西山 阅读(2657) 评论(3) 推荐(1)